feat: Add injectScript helper (#900)

2024-08-04 09:16:46 -05:00
parent ea97410fb4
commit a38de0c03f
4 changed files with 53 additions and 0 deletions
@@ -19,6 +19,7 @@ exports[`Auto Imports > eslintrc > "enabled: 8" should output a JSON config file
    "defineUnlistedScript": true,
    "defineWxtPlugin": true,
    "fakeBrowser": true,
+    "injectScript": true,
    "storage": true,
    "useAppConfig": true
  }
@@ -44,6 +45,7 @@ const globals = {
  "defineUnlistedScript": true,
  "defineWxtPlugin": true,
  "fakeBrowser": true,
+  "injectScript": true,
  "storage": true,
  "useAppConfig": true
 }
@@ -77,6 +79,7 @@ exports[`Auto Imports > eslintrc > "enabled: true" should output a JSON config f
    "defineUnlistedScript": true,
    "defineWxtPlugin": true,
    "fakeBrowser": true,
+    "injectScript": true,
    "storage": true,
    "useAppConfig": true
  }
@@ -103,6 +106,7 @@ exports[`Auto Imports > eslintrc > should allow customizing the output 1`] = `
    "defineUnlistedScript": "readonly",
    "defineWxtPlugin": "readonly",
    "fakeBrowser": "readonly",
+    "injectScript": "readonly",
    "storage": "readonly",
    "useAppConfig": "readonly"
  }
@@ -31,6 +31,7 @@ describe('Auto Imports', () => {
            const defineUnlistedScript: typeof import('wxt/sandbox')['defineUnlistedScript']
            const defineWxtPlugin: typeof import('wxt/sandbox')['defineWxtPlugin']
            const fakeBrowser: typeof import('wxt/testing')['fakeBrowser']
+            const injectScript: typeof import('wxt/client')['injectScript']
            const storage: typeof import('wxt/storage')['storage']
            const useAppConfig: typeof import('wxt/client')['useAppConfig']
          }
@@ -5,3 +5,4 @@
 */
 export * from './content-scripts';
 export * from './app-config';
+export * from './inject-script';
@@ -0,0 +1,47 @@
+import { browser } from 'wxt/browser';
+
+export type ScriptPublicPath = Extract<
+  // @ts-expect-error: PublicPath is generated per-project
+  import('wxt/browser').PublicPath,
+  `${string}.js`
+>;
+
+/**
+ * This function can only be called inside content scripts.
+ *
+ * Inject an unlisted script into the page. Scripts are added to the `<head>`
+ * element or `document.documentElement` if there is no head.
+ *
+ * Make sure to add the injected script to your manifest's
+ * `web_accessible_resources`.
+ */
+export async function injectScript(
+  path: ScriptPublicPath,
+  options?: InjectScriptOptions,
+): Promise<void> {
+  // @ts-expect-error: getURL is defined per-project, but not inside the package
+  const url = browser.runtime.getURL(path);
+  const script = document.createElement('script');
+
+  if (browser.runtime.getManifest().manifest_version === 2) {
+    // MV2 requires using an inline script
+    script.innerHTML = await fetch(url).then((res) => res.text());
+  } else {
+    // MV3 requires using src
+    script.src = url;
+  }
+
+  if (!options?.keepInDom) {
+    script.onload = () => script.remove();
+  }
+
+  (document.head ?? document.documentElement).append(script);
+}
+
+export interface InjectScriptOptions {
+  /**
+   * By default, the injected script is removed from the DOM after being
+   * injected. To disable this behavior, set this flag to true.
+   */
+  keepInDom?: boolean;
+}