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]

✅ Deploy Preview for creative-fairy-df92c4 ready!

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

[aklinker1]

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

[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.