feat: Make injectScript return the created script element

[ion1]

Note

The patch series in which each PR builds on top of the previous one: #1761, #1762, #1763, #1838 (you are here), #1765.

In case some of the changes are rejected, I will rebase the subsequent PRs on top of main.

Overview

injectScript now returns the created script element. It can be used to e.g. send messages to the script in the form of custom events. The script can add an event listener for them via document.currentScript. An example of bidirectional communication:

// entrypoints/example.content.ts
export default defineContentScript({
  matches: ['*://*/*'],
  async main() {
    const { script } = await injectScript('/example-main-world.js', {
      modifyScript(script) {
        // Add a listener before the injected script is loaded.
        script.addEventListener('from-injected-script', (event) => {
          if (event instanceof CustomEvent) {
            console.log(`${event.type}:`, event.detail);
          }
        });
      },
    });

    // Send an event after the injected script is loaded.
    script.dispatchEvent(
      new CustomEvent('from-content-script', {
        detail: 'General Kenobi',
      }),
    );
  },
});

// entrypoints/example-main-world.ts
export default defineUnlistedScript(() => {
  const script = document.currentScript;

  script?.addEventListener('from-content-script', (event) => {
    if (event instanceof CustomEvent) {
      console.log(`${event.type}:`, event.detail);
    }
  });

  script?.dispatchEvent(
    new CustomEvent('from-injected-script', {
      detail: 'Hello there',
    }),
  );
});

I made injectScript return an object ({ script }) for future extensibility, in particular for returning the result value of the script.

Manual Testing

Create the files in the example above, add the following to wxt.config.ts, observe the event being logged in the console.

export default defineConfig({
  manifest: {
    web_accessible_resources: [
      {
        resources: ['example-main-world.js;],
        matches: ['*://*/*'],
      },
    ],
  },
});

Related Issue

N/A

[netlify]

✅ Deploy Preview for creative-fairy-df92c4 ready!

Name	Link
🔨 Latest commit	666db50
🔍 Latest deploy log	https://app.netlify.com/projects/creative-fairy-df92c4/deploys/6941d6a136d8430008a6b370
😎 Deploy Preview	https://deploy-preview-1838--creative-fairy-df92c4.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[pkg-pr-new]

Open in StackBlitz

@wxt-dev/analytics

npm i https://pkg.pr.new/@wxt-dev/analytics@1838

@wxt-dev/auto-icons

npm i https://pkg.pr.new/@wxt-dev/auto-icons@1838

@wxt-dev/browser

npm i https://pkg.pr.new/@wxt-dev/browser@1838

@wxt-dev/i18n

npm i https://pkg.pr.new/@wxt-dev/i18n@1838

@wxt-dev/module-react

npm i https://pkg.pr.new/@wxt-dev/module-react@1838

@wxt-dev/module-solid

npm i https://pkg.pr.new/@wxt-dev/module-solid@1838

@wxt-dev/module-svelte

npm i https://pkg.pr.new/@wxt-dev/module-svelte@1838

@wxt-dev/module-vue

npm i https://pkg.pr.new/@wxt-dev/module-vue@1838

@wxt-dev/runner

npm i https://pkg.pr.new/@wxt-dev/runner@1838

@wxt-dev/storage

npm i https://pkg.pr.new/@wxt-dev/storage@1838

@wxt-dev/unocss

npm i https://pkg.pr.new/@wxt-dev/unocss@1838

@wxt-dev/webextension-polyfill

npm i https://pkg.pr.new/@wxt-dev/webextension-polyfill@1838

wxt

npm i https://pkg.pr.new/wxt@1838

commit: 666db50

[codecov]

Codecov Report

❌ Patch coverage is 0% with 2 lines in your changes missing coverage. Please review.
✅ Project coverage is 76.29%. Comparing base (adeef6e) to head (666db50).
⚠️ Report is 1 commits behind head on main.

Files with missing lines	Patch %	Lines
packages/wxt/src/utils/inject-script.ts	0.00%	2 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #1838      +/-   ##
==========================================
+ Coverage   76.12%   76.29%   +0.17%     
==========================================
  Files         113      113              
  Lines        3041     3042       +1     
  Branches      686      686              
==========================================
+ Hits         2315     2321       +6     
+ Misses        643      638       -5     
  Partials       83       83              

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[github-actions]

Thanks for helping make WXT better!