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

package/dist/index.d.ts

@@ -17,6 +17,14 @@ interface WebAccessibleResourceById {
     resources: string[];
     use_dynamic_url?: boolean;
 }
+interface ChromeManifestBackground {
+    service_worker: string;
+    type?: 'module';
+}
+interface FirefoxManifestBackground {
+    scripts: string[];
+    persistent?: false;
+}
 interface ManifestV3 {
     manifest_version: number;
     name: string;
@@ -26,10 +34,7 @@ interface ManifestV3 {
     icons?: chrome.runtime.ManifestIcons | undefined;
     action?: chrome.runtime.ManifestAction | undefined;
     author?: string | undefined;
-    background?: {
-        service_worker: string;
-        type?: 'module';
-    } | undefined;
+    background?: ChromeManifestBackground | FirefoxManifestBackground | undefined;
     chrome_settings_overrides?: {
         homepage?: string | undefined;
         search_provider?: chrome.runtime.SearchProvider | undefined;
@@ -166,6 +171,9 @@ interface ManifestV3 {
         pages: string[];
         content_security_policy?: string | undefined;
     } | undefined;
+    side_panel?: {
+        default_path?: string | undefined;
+    } | undefined;
     short_name?: string | undefined;
     spellcheck?: {
         dictionary_language?: string | undefined;
@@ -229,9 +237,15 @@ declare type CrxDevScriptId = {
     type: 'module' | 'iife';
 };
 interface CrxPlugin extends Plugin {
-    /** Runs during the transform hook for the manifest. Filenames use input filenames. */
+    /**
+     * Runs during the transform hook for the manifest. Filenames use input
+     * filenames.
+     */
     transformCrxManifest?: (this: PluginContext, manifest: ManifestV3) => Promise<ManifestV3 | null | undefined> | ManifestV3 | null | undefined;
-    /** Runs during generateBundle, before manifest output. Filenames use output filenames. */
+    /**
+     * Runs during generateBundle, before manifest output. Filenames use output
+     * filenames.
+     */
     renderCrxManifest?: (this: PluginContext, manifest: ManifestV3, bundle: OutputBundle) => Promise<ManifestV3 | null | undefined> | ManifestV3 | null | undefined;
     /**
      * Runs in the file writer on content scripts during development. `script.id`
@@ -246,7 +260,13 @@ interface CrxOptions {
         injectCss?: boolean;
     };
     fastGlobOptions?: Options;
+    /**
+     * The browser that this extension is targeting, can be "firefox" or "chrome".
+     * Default is "chrome".
+     */
+    browser?: Browser;
 }
+declare type Browser = 'firefox' | 'chrome';
 
 /** Resolves when all existing files in scriptFiles are written. */
 declare function allFilesReady(): Promise<void>;

package/dist/index.mjs

@@ -275,6 +275,7 @@ const workerClientId = "/@crx/client-worker";
 
 const pluginBackground = () => {
   let config;
+  let browser;
   return [
     {
       name: "crx:background-client",
@@ -297,23 +298,37 @@ const pluginBackground = () => {
       name: "crx:background-loader-file",
       // this should happen after other plugins; the loader file is an implementation detail
       enforce: "post",
+      async config(config2) {
+        const opts = await getOptions(config2);
+        browser = opts.browser || "chrome";
+      },
       configResolved(_config) {
         config = _config;
       },
       renderCrxManifest(manifest) {
-        const worker = manifest.background?.service_worker;
+        const worker = browser === "firefox" ? manifest.background?.scripts[0] : manifest.background?.service_worker;
         let loader;
         if (config.command === "serve") {
           const port = config.server.port?.toString();
           if (typeof port === "undefined")
             throw new Error("server port is undefined in watch mode");
-          loader = `import 'http://localhost:${port}/@vite/env';
+          if (browser === "firefox") {
+            loader = `import('http://localhost:${port}/@vite/env');
+`;
+            loader += `import('http://localhost:${port}${workerClientId}');
+`;
+            if (worker)
+              loader += `import('http://localhost:${port}/${worker}');
 `;
-          loader += `import 'http://localhost:${port}${workerClientId}';
+          } else {
+            loader = `import 'http://localhost:${port}/@vite/env';
+`;
+            loader += `import 'http://localhost:${port}${workerClientId}';
 `;
-          if (worker)
-            loader += `import 'http://localhost:${port}/${worker}';
+            if (worker)
+              loader += `import 'http://localhost:${port}/${worker}';
 `;
+          }
         } else if (worker) {
           loader = `import './${worker}';
 `;
@@ -326,10 +341,16 @@ const pluginBackground = () => {
           fileName: getFileName({ type: "loader", id: "service-worker" }),
           source: loader
         });
-        manifest.background = {
-          service_worker: this.getFileName(refId),
-          type: "module"
-        };
+        if (browser !== "firefox") {
+          manifest.background = {
+            service_worker: this.getFileName(refId),
+            type: "module"
+          };
+        } else {
+          manifest.background = {
+            scripts: [this.getFileName(refId)]
+          };
+        }
         return manifest;
       }
     }
@@ -977,7 +998,9 @@ async function manifestFiles(manifest, options = {}) {
   ) ?? [];
   const contentScripts = manifest.content_scripts?.flatMap(({ js }) => js) ?? [];
   const contentStyles = manifest.content_scripts?.flatMap(({ css }) => css);
-  const serviceWorker = manifest.background?.service_worker;
+  const serviceWorker = manifest.background && "service_worker" in manifest.background ? manifest.background.service_worker : void 0;
+  const backgroundScripts = manifest.background && "scripts" in manifest.background ? manifest.background.scripts : void 0;
+  const background = serviceWorker ? [serviceWorker].filter(isString) : backgroundScripts ? backgroundScripts.filter(isString) : [];
   const htmlPages = htmlFiles(manifest);
   const icons = [
     Object.values(
@@ -1007,7 +1030,7 @@ async function manifestFiles(manifest, options = {}) {
     icons: [...new Set(icons)].filter(isString),
     locales: [...new Set(locales)].filter(isString),
     rulesets: [...new Set(rulesets)].filter(isString),
-    background: [serviceWorker].filter(isString),
+    background,
     webAccessibleResources
   };
 }
@@ -1022,7 +1045,8 @@ function htmlFiles(manifest) {
     manifest.devtools_page,
     manifest.options_page,
     manifest.options_ui?.page,
-    manifest.sandbox?.pages
+    manifest.sandbox?.pages,
+    manifest.side_panel?.default_path
   ].flat().filter(isString).map((s) => s.split("#")[0]).sort();
   return [...new Set(files)];
 }
@@ -1566,7 +1590,7 @@ const pluginManifest = () => {
                   })
                 );
               }
-          if (manifest2.background?.service_worker) {
+          if (manifest2.background && "service_worker" in manifest2.background) {
             const file = manifest2.background.service_worker;
             const id2 = join(config.root, file);
             const refId2 = this.emitFile({
@@ -1600,7 +1624,7 @@ const pluginManifest = () => {
               );
             }
         } else {
-          if (manifest2.background?.service_worker) {
+          if (manifest2.background && "service_worker" in manifest2.background) {
             const ref = manifest2.background.service_worker;
             const name = this.getFileName(ref);
             manifest2.background.service_worker = name;
@@ -1712,7 +1736,11 @@ function compileFileResources(fileName, {
   assets: /* @__PURE__ */ new Set(),
   css: /* @__PURE__ */ new Set(),
   imports: /* @__PURE__ */ new Set()
-}) {
+}, processedFiles = /* @__PURE__ */ new Set()) {
+  if (processedFiles.has(fileName)) {
+    return resources;
+  }
+  processedFiles.add(fileName);
   const chunk = chunks.get(fileName);
   if (chunk) {
     const { modules, facadeModuleId, imports, dynamicImports } = chunk;
@@ -1721,7 +1749,7 @@ function compileFileResources(fileName, {
     for (const x of dynamicImports)
       resources.imports.add(x);
     for (const x of [...imports, ...dynamicImports])
-      compileFileResources(x, { chunks, files, config }, resources);
+      compileFileResources(x, { chunks, files, config }, resources, processedFiles);
     for (const m of Object.keys(modules))
       if (m !== facadeModuleId) {
         const key = prefix$1("/", relative(config.root, m.split("?")[0]));
@@ -1734,7 +1762,8 @@ function compileFileResources(fileName, {
             compileFileResources(
               script.fileName,
               { chunks, files, config },
-              resources
+              resources,
+              processedFiles
             );
           }
       }
@@ -1765,25 +1794,34 @@ _debug("web-acc-res");
 const pluginWebAccessibleResources = () => {
   let config;
   let injectCss;
+  let browser;
   return [
     {
       name: "crx:web-accessible-resources",
       apply: "serve",
       enforce: "post",
+      async config(config2) {
+        const opts = await getOptions(config2);
+        browser = opts.browser || "chrome";
+      },
       renderCrxManifest(manifest) {
         manifest.web_accessible_resources = manifest.web_accessible_resources ?? [];
         manifest.web_accessible_resources = manifest.web_accessible_resources.map(({ resources, ...rest }) => ({
           resources: resources.filter((r) => r !== DYNAMIC_RESOURCE),
           ...rest
         })).filter(({ resources }) => resources.length);
-        manifest.web_accessible_resources.push({
-          // change the extension origin on every reload
-          use_dynamic_url: true,
+        const war = {
           // all web origins can access
           matches: ["<all_urls>"],
           // all resources are web accessible
-          resources: ["**/*", "*"]
-        });
+          resources: ["**/*", "*"],
+          // change the extension origin on every reload
+          use_dynamic_url: true
+        };
+        if (browser === "firefox") {
+          delete war.use_dynamic_url;
+        }
+        manifest.web_accessible_resources.push(war);
         return manifest;
       }
     },
@@ -1792,7 +1830,9 @@ const pluginWebAccessibleResources = () => {
       apply: "build",
       enforce: "post",
       async config({ build, ...config2 }, { command }) {
-        const { contentScripts: contentScripts2 = {} } = await getOptions(config2);
+        const opts = await getOptions(config2);
+        const contentScripts2 = opts.contentScripts || {};
+        browser = opts.browser || "chrome";
         injectCss = contentScripts2.injectCss ?? true;
         return { ...config2, build: { ...build, manifest: command === "build" } };
       },
@@ -1900,6 +1940,11 @@ const pluginWebAccessibleResources = () => {
               use_dynamic_url
             });
           }
+        if (browser === "firefox") {
+          for (const war of combinedResources) {
+            delete war.use_dynamic_url;
+          }
+        }
         if (combinedResources.length === 0)
           delete manifest.web_accessible_resources;
         else

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crxjs/vite-plugin",
-  "version": "2.0.0-beta.17",
+  "version": "2.0.0-beta.19",
   "description": "Build Chrome Extensions with this Vite plugin.",
   "keywords": [
     "rollup-plugin",
@@ -26,7 +26,7 @@
   "type": "module",
   "exports": {
     ".": {
-      "require": "./index.cjs",
+      "require": "./dist/index.cjs",
       "import": "./dist/index.mjs",
       "types": "./dist/index.d.ts"
     },
@@ -83,13 +83,13 @@
   "devDependencies": {
     "@extend-chrome/messages": "1.2.2",
     "@extend-chrome/storage": "1.5.0",
-    "@rollup/plugin-alias": "4.0.2",
+    "@rollup/plugin-alias": "4.0.4",
     "@rollup/plugin-commonjs": "21.1.0",
     "@rollup/plugin-json": "^5.0.0",
     "@rollup/plugin-node-resolve": "13.2.0",
-    "@sveltejs/vite-plugin-svelte": "1.1.0",
+    "@sveltejs/vite-plugin-svelte": "1.4.0",
     "@types/acorn": "4.0.6",
-    "@types/chrome": "0.0.209",
+    "@types/chrome": "0.0.237",
     "@types/convert-source-map": "^2.0.0",
     "@types/debug": "4.1.7",
     "@types/fs-extra": "9.0.13",
@@ -105,7 +105,7 @@
     "chokidar": "^3.5.3",
     "esbuild": "0.17.14",
     "esbuild-runner": "2.2.2",
-    "eslint": "8.39.0",
+    "eslint": "8.43.0",
     "eslint-plugin-react": "^7.29.4",
     "jest-image-snapshot": "^5.2.0",
     "npm-run-all": "^4.1.5",
@@ -114,7 +114,7 @@
     "react-dom": "17.0.2",
     "rimraf": "3.0.2",
     "rollup-plugin-dts": "^4.2.0",
-    "rollup-plugin-esbuild": "4.10.1",
+    "rollup-plugin-esbuild": "4.10.3",
     "svelte": "^3.48.0",
     "typescript": "^4.6.4",
     "vite": "^3.1.7",