feat: Add manipulateScript option to injectScript

It enables 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`).

Author: ion1

docs/guide/essentials/content-scripts.md

@@ -591,6 +591,29 @@ For MV3, `injectScript` is synchronous and the injected script will be evaluated
 However for MV2, `injectScript` has to `fetch` the script's text content and create an inline `<script>` block. This means for MV2, your script is injected asynchronously and it will not be evaluated at the same time as your content script's `run_at`.
 :::
 
+The `script` element can be manipulated just before it is added to the DOM by using the `manipulateScript` option. This can be used to e.g. pass data to the script as shown in the example:
+
+```ts
+// entrypoints/example.content.ts
+export default defineContentScript({
+  matches: ['*://*/*'],
+  async main() {
+    await injectScript('/example-main-world.js', {
+      manipulateScript(script) {
+        script.dataset['greeting'] = 'Hello there';
+      },
+    });
+  },
+});
+```
+
+```ts
+// entrypoints/example-main-world.ts
+export default defineUnlistedScript(() => {
+  console.log(document.currentScript?.dataset['greeting']);
+});
+```
+
 ## Mounting UI to dynamic element
 
 In many cases, you may need to mount a UI to a DOM element that does not exist at the time the web page is initially loaded. To handle this, use the `autoMount` API to automatically mount the UI when the target element appears dynamically and unmount it when the element disappears. In WXT, the `anchor` option is used to target the element, enabling automatic mounting and unmounting based on its appearance and removal.

packages/wxt/src/utils/inject-script.ts

@@ -32,6 +32,8 @@ export async function injectScript(
     script.src = url;
   }
 
+  await options?.manipulateScript?.(script);
+
   (document.head ?? document.documentElement).append(script);
 
   if (!options?.keepInDom) {
@@ -45,4 +47,12 @@ export interface InjectScriptOptions {
    * injected. To disable this behavior, set this flag to true.
    */
   keepInDom?: boolean;
+  /**
+   * Manipulate 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`).
+   */
+  manipulateScript?: (script: HTMLScriptElement) => Promise<void> | void;
 }