@crxjs/vite-plugin 2.0.0-beta.15 → 2.0.0-beta.17

package/client.d.ts

@@ -57,3 +57,18 @@ declare module '*?script&module' {
   const fileName: string
   export default fileName
 }
+
+declare namespace ContentScriptAPI {
+  export interface ExecuteFnOptions {
+    perf: {
+      injectTime: number
+      loadTime: number
+    }
+  }
+  export interface ExecuteFn {
+    (options: ExecuteFnOptions): void
+  }
+  export interface ModuleExports {
+    onExecute?: ExecuteFn
+  }
+}

package/dist/index.d.ts

@@ -118,12 +118,12 @@ interface ManifestV3 {
     } | undefined;
     incognito?: string | undefined;
     input_components?: {
-        name?: string | undefined;
-        type?: string | undefined;
+        name: string;
         id?: string | undefined;
-        description?: string | undefined;
-        language?: string | undefined;
-        layouts?: string[] | undefined;
+        language?: string | string[] | undefined;
+        layouts?: string | string[] | undefined;
+        input_view?: string | undefined;
+        options_page?: string | undefined;
     }[] | undefined;
     key?: string | undefined;
     minimum_chrome_version?: string | undefined;

package/dist/index.mjs

@@ -10,6 +10,7 @@ import { rollup } from 'rollup';
 import * as lexer from 'es-module-lexer';
 import { readFile as readFile$1 } from 'fs/promises';
 import MagicString from 'magic-string';
+import convertSourceMap from 'convert-source-map';
 import { createLogger } from 'vite';
 import { readFileSync, existsSync, promises } from 'fs';
 import { createRequire } from 'module';
@@ -337,9 +338,9 @@ const pluginBackground = () => {
 
 var contentHmrPort = "function isCrxHMRPayload(x) {\n  return x.type === \"custom\" && x.event.startsWith(\"crx:\");\n}\nclass HMRPort {\n  port;\n  callbacks = /* @__PURE__ */ new Map();\n  constructor() {\n    setInterval(() => {\n      try {\n        this.port?.postMessage({ data: \"ping\" });\n      } catch (error) {\n        if (error instanceof Error && error.message.includes(\"Extension context invalidated.\")) {\n          location.reload();\n        } else\n          throw error;\n      }\n    }, __CRX_HMR_TIMEOUT__);\n    setInterval(this.initPort, 5 * 60 * 1e3);\n    this.initPort();\n  }\n  initPort = () => {\n    this.port?.disconnect();\n    this.port = chrome.runtime.connect({ name: \"@crx/client\" });\n    this.port.onDisconnect.addListener(this.handleDisconnect.bind(this));\n    this.port.onMessage.addListener(this.handleMessage.bind(this));\n    this.port.postMessage({ type: \"connected\" });\n  };\n  handleDisconnect = () => {\n    if (this.callbacks.has(\"close\"))\n      for (const cb of this.callbacks.get(\"close\")) {\n        cb({ wasClean: true });\n      }\n  };\n  handleMessage = (message) => {\n    const forward = (data) => {\n      if (this.callbacks.has(\"message\"))\n        for (const cb of this.callbacks.get(\"message\")) {\n          cb({ data });\n        }\n    };\n    const payload = JSON.parse(message.data);\n    if (isCrxHMRPayload(payload)) {\n      if (payload.event === \"crx:runtime-reload\") {\n        console.log(\"[crx] runtime reload\");\n        setTimeout(() => location.reload(), 500);\n      } else {\n        forward(JSON.stringify(payload.data));\n      }\n    } else {\n      forward(message.data);\n    }\n  };\n  addEventListener = (event, callback) => {\n    const cbs = this.callbacks.get(event) ?? /* @__PURE__ */ new Set();\n    cbs.add(callback);\n    this.callbacks.set(event, cbs);\n  };\n  send = (data) => {\n    if (this.port)\n      this.port.postMessage({ data });\n    else\n      throw new Error(\"HMRPort is not initialized\");\n  };\n}\n\nexport { HMRPort };\n";
 
-var contentDevLoader = "(function () {\n  'use strict';\n\n  (async () => {\n    if (__PREAMBLE__)\n      await import(\n        /* @vite-ignore */\n        chrome.runtime.getURL(__PREAMBLE__)\n      );\n    await import(\n      /* @vite-ignore */\n      chrome.runtime.getURL(__CLIENT__)\n    );\n    await import(\n      /* @vite-ignore */\n      chrome.runtime.getURL(__SCRIPT__)\n    );\n  })().catch(console.error);\n\n})();\n";
+var contentDevLoader = "(function () {\n  'use strict';\n\n  const injectTime = performance.now();\n  (async () => {\n    if (__PREAMBLE__)\n      await import(\n        /* @vite-ignore */\n        chrome.runtime.getURL(__PREAMBLE__)\n      );\n    await import(\n      /* @vite-ignore */\n      chrome.runtime.getURL(__CLIENT__)\n    );\n    const { onExecute } = await import(\n      /* @vite-ignore */\n      chrome.runtime.getURL(__SCRIPT__)\n    );\n    onExecute?.({ perf: { injectTime, loadTime: performance.now() - injectTime } });\n  })().catch(console.error);\n\n})();\n";
 
-var contentProLoader = "(function () {\n  'use strict';\n\n  (async () => {\n    await import(\n      /* @vite-ignore */\n      chrome.runtime.getURL(__SCRIPT__)\n    );\n  })().catch(console.error);\n\n})();\n";
+var contentProLoader = "(function () {\n  'use strict';\n\n  const injectTime = performance.now();\n  (async () => {\n    const { onExecute } = await import(\n      /* @vite-ignore */\n      chrome.runtime.getURL(__SCRIPT__)\n    );\n    onExecute?.({ perf: { injectTime, loadTime: performance.now() - injectTime } });\n  })().catch(console.error);\n\n})();\n";
 
 const contentScripts = new RxMap();
 contentScripts.change$.pipe(filter(RxMap.isChangeType.set)).subscribe(({ map, value }) => {
@@ -441,8 +442,25 @@ function prepScript(fileName, script) {
       const transformResult = await server.transformRequest(viteUrl);
       if (!transformResult)
         throw new TypeError(`Unable to load "${script.id}" from server.`);
-      const { code, deps = [], dynamicDeps = [] } = transformResult;
-      return { target, code, deps: [...deps, ...dynamicDeps].flat(), server };
+      const { deps = [], dynamicDeps = [], map: map2 } = transformResult;
+      let { code } = transformResult;
+      try {
+        if (map2 && server.config.build.sourcemap === "inline") {
+          code = code.replace(/\n*\/\/# sourceMappingURL=[^\n]+/g, "");
+          const sourceMap = convertSourceMap.fromObject(map2).toComment();
+          code += `
+${sourceMap}
+`;
+        }
+      } catch (error) {
+        console.warn("Failed to inline source map", error);
+      }
+      return {
+        target,
+        code,
+        deps: [...deps, ...dynamicDeps].flat(),
+        server
+      };
     }),
     // retry in case of dependency rebundle
     retry({ count: 10, delay: 100 }),
@@ -649,6 +667,19 @@ const pluginContentScripts = () => {
       name: "crx:content-scripts",
       apply: "build",
       enforce: "pre",
+      config(config) {
+        return {
+          ...config,
+          build: {
+            ...config.build,
+            rollupOptions: {
+              ...config.build?.rollupOptions,
+              // keep exports for content script module api
+              preserveEntrySignatures: config.build?.rollupOptions?.preserveEntrySignatures ?? "exports-only"
+            }
+          }
+        };
+      },
       generateBundle() {
         for (const [key, script] of contentScripts)
           if (key === script.refId) {
@@ -1555,7 +1586,7 @@ const pluginManifest = () => {
           }
         }
         const encoded = encodeManifest(manifest2);
-        return encoded;
+        return { code: encoded, map: null };
       },
       async generateBundle(options, bundle) {
         const manifestName = this.getFileName(refId);
@@ -1662,10 +1693,10 @@ Public dir: "${config.publicDir}"`
           this.emitFile({
             type: "asset",
             fileName: "manifest.json",
-            source: JSON.stringify(manifest2, null, 2)
+            source: JSON.stringify(manifest2, null, 2) + "\n"
           });
         } else {
-          manifestJson.source = JSON.stringify(manifest2, null, 2);
+          manifestJson.source = JSON.stringify(manifest2, null, 2) + "\n";
         }
         delete bundle[manifestName];
       }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crxjs/vite-plugin",
-  "version": "2.0.0-beta.15",
+  "version": "2.0.0-beta.17",
   "description": "Build Chrome Extensions with this Vite plugin.",
   "keywords": [
     "rollup-plugin",
@@ -68,6 +68,7 @@
     "acorn-walk": "^8.2.0",
     "cheerio": "^1.0.0-rc.10",
     "connect-injector": "^0.4.4",
+    "convert-source-map": "^1.7.0",
     "debug": "^4.3.3",
     "es-module-lexer": "^0.10.0",
     "fast-glob": "^3.2.11",
@@ -89,6 +90,7 @@
     "@sveltejs/vite-plugin-svelte": "1.1.0",
     "@types/acorn": "4.0.6",
     "@types/chrome": "0.0.209",
+    "@types/convert-source-map": "^2.0.0",
     "@types/debug": "4.1.7",
     "@types/fs-extra": "9.0.13",
     "@types/jest-image-snapshot": "^5.1.0",
@@ -101,13 +103,13 @@
     "@vitejs/plugin-react": "^2.1.0",
     "@vitejs/plugin-vue": "3.2.0",
     "chokidar": "^3.5.3",
-    "esbuild": "0.17.4",
+    "esbuild": "0.17.14",
     "esbuild-runner": "2.2.2",
-    "eslint": "8.26.0",
+    "eslint": "8.39.0",
     "eslint-plugin-react": "^7.29.4",
     "jest-image-snapshot": "^5.2.0",
     "npm-run-all": "^4.1.5",
-    "playwright-chromium": "1.27.1",
+    "playwright-chromium": "1.33.0",
     "react": "17.0.2",
     "react-dom": "17.0.2",
     "rimraf": "3.0.2",
@@ -116,8 +118,8 @@
     "svelte": "^3.48.0",
     "typescript": "^4.6.4",
     "vite": "^3.1.7",
-    "vite-plugin-inspect": "0.7.14",
+    "vite-plugin-inspect": "0.7.25",
     "vitest": "0.28.5",
-    "vue": "3.2.41"
+    "vue": "3.2.47"
   }
 }