@crxjs/vite-plugin 2.0.0-beta.18 → 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;
@@ -232,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`
@@ -249,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}');
+`;
+          } else {
+            loader = `import 'http://localhost:${port}/@vite/env';
 `;
-          loader += `import 'http://localhost:${port}${workerClientId}';
+            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
   };
 }
@@ -1567,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({
@@ -1601,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;
@@ -1771,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;
       }
     },
@@ -1798,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" } };
       },
@@ -1906,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.18",
+  "version": "2.0.0-beta.19",
   "description": "Build Chrome Extensions with this Vite plugin.",
   "keywords": [
     "rollup-plugin",