feat: Add manipulateScript option to injectScript

[ion1]

Note

This PR builds on top of #1761 at the moment. In case it is not accepted, I will rebase this on top of main.

Overview

manipulateScript enables the the manipulation 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', {
      manipulateScript(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 setting 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]

✅ Deploy Preview for creative-fairy-df92c4 ready!

Name	Link
🔨 Latest commit	55c59d4
🔍 Latest deploy log	https://app.netlify.com/projects/creative-fairy-df92c4/deploys/68543131e5b55d0008fb0c4c
😎 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.