Using defineUnlistedScript for scripts injected into the main world overwrites a global variable

[tstehr]

Describe the bug

We're using defineUnlistedScript to create a script that is subsequently inserted into websites via the content script, allowing it to interact with the main world, like done in the inject-script example.

We noticed that on particular websites having a script injected can lead to errors in page JavaScript. The problem happens even for empty scripts.

Investigating the error points to the output generated by defineUnlistedScript. In inject-script for example the generated file injected.js starts as follows:

var injected=function(){<...>}();

This leads to a property window.injected being set to undefined, since that is the return value of the function. This overwrite can interfere with a page script that also uses window.injected (or another variable that matches the name of an unlisted script being injected).

Reproduction

https://github.com/tstehr/repro-wxt-inject

Steps to reproduce

1. Check out the test repo linked above
2. run npm install and then npm run demo
3. Run the inject-script example in a browser. I used pnpm dev:firefox.
4. In that browser, visit the local server started in step 2.

Expected: The page displays "✅ The function has run"

Actual: The page continues to display "❌ The function has not yet run" and errors are shown in the developer console.

System Info

System:
    OS: macOS 15.5
    CPU: (10) arm64 Apple M2 Pro
    Memory: 80.66 MB / 32.00 GB
    Shell: 4.0.1 - /opt/homebrew/bin/fish
  Binaries:
    Node: 23.10.0 - ~/.nodenv/shims/node
    Yarn: 1.22.22 - /opt/homebrew/bin/yarn
    npm: 10.9.2 - ~/.nodenv/shims/npm
    pnpm: 10.7.0 - /usr/local/bin/pnpm
  Browsers:
    Chrome: 137.0.7151.104
    Chrome Canary: 139.0.7236.0
    Firefox Nightly: 141.0a1
    Safari: 18.5
    Safari Technology Preview: 18.4
  npmPackages:
    wxt: ^0.20.5 => 0.20.5

Used Package Manager

npm

Validations

• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[tstehr]

For now I'm using the following workaround: tstehr/wxt-examples@0ebf561

This adds a simple vite plugin that wraps the problematic file in an IIFE during build.

[aklinker1]

Good find! I think your IIFE prevents the value from being returned when using the scripting API, so it's not a generic solution (that's why the variable exists in the first place).

I'll just prefix the variable with wxt_, that should fix it. I'll open a PR for this soon.

[Valodim]

I'll just prefix the variable with wxt_, that should fix it.

With this fix, wouldn't two wxt extensions that define a page.js still conflict on a wxt_page variable?

[aklinker1]

Hmm, true. We should randomize it instead of using a prefix? No reason the variables need to be named something specific.

[aklinker1]

scratch that, a random string would lead to non reproducible builds for the Mozilla store...

Maybe we could use the extension's ID via the localization APIs... But no, Firefox uses uuids, so dashes in variable names would cause problems...

Maybe use the file's hash? After the build finishes, has the file and replace a template car with it?

Or, is it as simple as not using var? Though I don't know how to configure rollup to use const instead

[ion1]

As for browser.scripting.executeScript, an IIFE does not seem to prevent the value from being returned. A demonstration follows as a patch against a freshly initialized wxt project with the vanilla template.

As for injectScript, setting any window properties within the MAIN world script won't help either as they are not visible in the ISOLATED world. (#1765 has an approach for getting the return value out of those, but I will need advice on how to support both injectScript and executeScript.)

I would much prefer not leaving any changes in the window object by default.

diff --git a/entrypoints/background.ts b/entrypoints/background.ts
index f96fa48..56a5aa1 100644
--- a/entrypoints/background.ts
+++ b/entrypoints/background.ts
@@ -1,3 +1,43 @@
 export default defineBackground(() => {
   console.log('Hello background!', { id: browser.runtime.id });
+
+  const messageHandler = async (
+    message: unknown,
+    sender: Browser.runtime.MessageSender
+  ) => {
+    try {
+      if (message === "runScript") {
+        const tabId = sender.tab?.id;
+        if (tabId === undefined) {
+          throw new Error("No tab id");
+        }
+
+        const injectionResult = await browser.scripting.executeScript({
+          target: { tabId },
+          files: ["/script.js"],
+          injectImmediately: true,
+          world: "MAIN",
+        });
+
+        const result = injectionResult[0]?.result;
+
+        console.info("result:", result);
+
+        return result;
+      }
+    } catch (err) {
+      console.error("message handler:", err);
+      throw err;
+    }
+  };
+
+  browser.runtime.onMessage.addListener((message, sender, sendResponse) => {
+    messageHandler(message, sender)
+      .then((result) => sendResponse(result))
+      .catch((error) =>
+        sendResponse(`${error instanceof Error ? error.stack ?? error : error}`)
+      );
+
+    return true;
+  });
 });
diff --git a/entrypoints/content.ts b/entrypoints/content.ts
index 264a528..4b502c2 100644
--- a/entrypoints/content.ts
+++ b/entrypoints/content.ts
@@ -1,6 +1,10 @@
 export default defineContentScript({
-  matches: ['*://*.google.com/*'],
-  main() {
+  matches: ["*://*/*"],
+  async main() {
     console.log('Hello content.');
+
+    const result = await browser.runtime.sendMessage("runScript");
+
+    console.info("result:", result);
   },
 });
diff --git a/public/script.js b/public/script.js
new file mode 100644
index 0000000..96ea86c
--- /dev/null
+++ b/public/script.js
@@ -0,0 +1,4 @@
+(async () => {
+  await new Promise((resolve) => setTimeout(resolve, 1000));
+  return "Hello there";
+})();
diff --git a/wxt.config.ts b/wxt.config.ts
index 1e2f53d..e3fbc22 100644
--- a/wxt.config.ts
+++ b/wxt.config.ts
@@ -1,4 +1,9 @@
 import { defineConfig } from 'wxt';
 
 // See https://wxt.dev/api/config.html
-export default defineConfig({});
+export default defineConfig({
+  manifest: {
+    host_permissions: ["*://*/*"],
+    permissions: ["scripting"],
+  },
+});

[ion1]

Oh, that doesn't seem to work in Firefox. I will have to look into it after some sleep.

[ion1]

It was because I had failed to include host_permissions. I updated the diff above.

I can now confirm that neither injectScript nor executeScript need the script to set a global variable to return the result.