@crxjs/vite-plugin 2.2.1 → 2.3.0

package/dist/index.d.ts

@@ -84,6 +84,7 @@ interface ManifestV3 {
         match_about_blank?: boolean | undefined;
         include_globs?: string[] | undefined;
         exclude_globs?: string[] | undefined;
+        world?: chrome.scripting.ExecutionWorld | string | undefined;
     }[] | undefined;
     content_security_policy?: {
         extension_pages?: string;
@@ -263,6 +264,13 @@ type FilePathFields<T extends string> = {
         match_about_blank?: boolean;
         include_globs?: string[];
         exclude_globs?: string[];
+        /**
+         * - 'ISOLATED' (default): Content script runs in an isolated world.
+         * - 'MAIN': Content script runs in the main world.
+         * NOTE: MAIN currently does NOT support crxjs HMR
+         * @see https://developer.chrome.com/docs/extensions/mv3/content_scripts/#world
+         */
+        world?: 'ISOLATED' | 'MAIN';
     }[];
     input_components?: {
         name: string;

package/dist/index.mjs

@@ -10,11 +10,11 @@ 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 pc from 'picocolors';
 import { createLogger, version } from 'vite';
 import { readFileSync, existsSync, promises } from 'fs';
 import { createRequire } from 'module';
 import fg from 'fast-glob';
-import pc from 'picocolors';
 import { load } from 'cheerio';
 import jsesc from 'jsesc';
 
@@ -347,8 +347,12 @@ var contentHmrPort = "function isCrxHMRPayload(x) {\n  return x.type === \"custo
 
 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 contentDevMainLoader = "(function () {\n  'use strict';\n\n  const injectTime = performance.now();\n  (async () => {\n    console.warn(__SCRIPT__, \"Content-script doesn't support HMR because the world is MAIN\");\n    const { onExecute } = await import(\n      /* @vite-ignore */\n      __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  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";
 
+var contentProMainLoader = "(function () {\n  'use strict';\n\n  const injectTime = performance.now();\n  (async () => {\n    const { onExecute } = await import(\n      /* @vite-ignore */\n      __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 }) => {
   const keyNames = [
@@ -381,6 +385,14 @@ function createDevLoader({
 function createProLoader({ fileName }) {
   return contentProLoader.replace(/__SCRIPT__/g, JSON.stringify(fileName));
 }
+function createDevMainLoader({
+  fileName
+}) {
+  return contentDevMainLoader.replace(/__SCRIPT__/g, JSON.stringify(fileName)).replace(/__TIMESTAMP__/g, JSON.stringify(Date.now()));
+}
+function createProMainLoader({ fileName }) {
+  return contentProMainLoader.replace(/__SCRIPT__/g, JSON.stringify(fileName));
+}
 
 const serverEvent$ = new ReplaySubject(1);
 const close$ = serverEvent$.pipe(
@@ -593,15 +605,37 @@ async function write(fileId) {
 }
 
 const pluginContentScripts = () => {
+  const pluginName = "crx:content-scripts";
   let server;
   let preambleCode;
   let hmrTimeout;
   let sub = new Subscription();
+  const worldMainIds = /* @__PURE__ */ new Set();
+  const findWorldMainIds = async (config, env) => {
+    const { manifest: _manifest } = await getOptions(config);
+    const manifest = await (typeof _manifest === "function" ? _manifest(env) : _manifest);
+    (manifest.content_scripts || []).forEach(({ world, js }) => {
+      if (world === "MAIN" && js) {
+        js.forEach((path) => worldMainIds.add(prefix$1("/", path)));
+      }
+    });
+    if (worldMainIds.size) {
+      const name = `[${pluginName}]`;
+      const message = pc.yellow(
+        [
+          `${name} Some content-scripts don't support HMR because the world is MAIN:`,
+          ...[...worldMainIds].map((id) => `  ${id}`)
+        ].join("\r\n")
+      );
+      console.log(message);
+    }
+  };
   return [
     {
-      name: "crx:content-scripts",
+      name: pluginName,
       apply: "serve",
-      async config(config) {
+      async config(config, env) {
+        await findWorldMainIds(config, env);
         const { contentScripts: contentScripts2 = {} } = await getOptions(config);
         hmrTimeout = contentScripts2.hmrTimeout ?? 5e3;
         preambleCode = preambleCode ?? contentScripts2.preambleCode;
@@ -630,7 +664,9 @@ const pluginContentScripts = () => {
               const loader = add({
                 type: "asset",
                 id: getFileName({ type: "loader", id }),
-                source: createDevLoader({
+                source: worldMainIds.has(file.id) ? createDevMainLoader({
+                  fileName: `./${file.fileName.split("/").at(-1)}`
+                }) : createDevLoader({
                   preamble: preamble.fileName,
                   client: client.fileName,
                   fileName: file.fileName
@@ -671,10 +707,11 @@ const pluginContentScripts = () => {
       }
     },
     {
-      name: "crx:content-scripts",
+      name: pluginName,
       apply: "build",
       enforce: "pre",
-      config(config) {
+      async config(config, env) {
+        await findWorldMainIds(config, env);
         return {
           ...config,
           build: {
@@ -705,7 +742,7 @@ const pluginContentScripts = () => {
                     type: "loader",
                     id: basename(script.id)
                   }),
-                  source: createProLoader({ fileName })
+                  source: worldMainIds.has(script.id) ? createProMainLoader({ fileName: `./${fileName.split("/").at(-1)}` }) : createProLoader({ fileName })
                 });
                 script.loaderName = this.getFileName(refId);
               } else {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crxjs/vite-plugin",
-  "version": "2.2.1",
+  "version": "2.3.0",
   "description": "Build Chrome Extensions with this Vite plugin.",
   "keywords": [
     "rollup-plugin",