feat: Add modifyScript option to injectScript

[ion1]

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

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

Overview

modifyScript enables the the modification of the script element just before it is added to the DOM.

It can be useful for e.g. passing data to the script via the dataset property (which can be accessed by the script via document.currentScript), as shown in the example:

// entrypoints/example.content.ts
export default defineContentScript({
  matches: ['*://*/*'],
  async main() {
    await injectScript('/example-main-world.js', {
      modifyScript(script) {
        script.dataset['greeting'] = 'Hello there';
      },
    });
  },
});

// entrypoints/example-main-world.ts
export default defineUnlistedScript(() => {
  console.log(document.currentScript?.dataset['greeting']);
});

It can also be used to change script.async/script.defer or to set up event listeners for communication through the script element.

Manual Testing

It can be tested as shown in the example above.

Related Issue

#1755 proposes a higher level (and potentially type-checked) API for passing an object to the script.

[netlify[bot]]

✅ Deploy Preview for creative-fairy-df92c4 ready!

Name	Link
🔨 Latest commit	c47193b15c2332f32479dc22f742b3b78afd3ac7
🔍 Latest deploy log	https://app.netlify.com/projects/creative-fairy-df92c4/deploys/6941d27d5a8d4400080902d7
😎 Deploy Preview	https://deploy-preview-1762--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.

[ion1]

Looks good, but can we call it modify instead of manipulate?

Sure, I'll update my patch series in a bit.

[ion1]

Looks good, but can we call it modify instead of manipulate?

Updated.

[ion1]

I had forgotten to rename one manipulateScript as modifyScript in the documentation. Fixed, and tested that the code in the documentation works.

[pkg-pr-new[bot]]

Open in StackBlitz

@wxt-dev/analytics

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

@wxt-dev/auto-icons

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

@wxt-dev/browser

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

@wxt-dev/i18n

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

@wxt-dev/module-react

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

@wxt-dev/module-solid

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

@wxt-dev/module-svelte

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

@wxt-dev/module-vue

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

@wxt-dev/runner

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

@wxt-dev/storage

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

@wxt-dev/unocss

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

@wxt-dev/webextension-polyfill

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

wxt

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

commit: c47193b

[codecov[bot]]

Codecov Report

:x: Patch coverage is 0% with 1 line in your changes missing coverage. Please review. :white_check_mark: Project coverage is 76.63%. Comparing base (938c25c) to head (c47193b). :warning: Report is 1 commits behind head on main.

Files with missing lines	Patch %	Lines
packages/wxt/src/utils/inject-script.ts	0.00%	1 Missing :warning:

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #1762      +/-   ##
==========================================
- Coverage   76.76%   76.63%   -0.13%     
==========================================
  Files         113      113              
  Lines        3025     3026       +1     
  Branches      686      686              
==========================================
- Hits         2322     2319       -3     
- Misses        622      624       +2     
- Partials       81       83       +2     

:umbrella: View full report in Codecov by Sentry.
:loudspeaker: Have feedback on the report? Share it here.

:rocket: New features to boost your workflow:

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

[github-actions[bot]]

Thanks for helping make WXT better!