Add support for Web Extension manifest V3

packages/configs/webextension/index.json

@@ -2,6 +2,7 @@
   "extends": "@parcel/config-default",
   "transformers": {
     "manifest.json": ["@parcel/transformer-webextension"],
+    "mv3-bg-sw:*": ["...", "@parcel/transformer-webextension"],
     "raw:*": ["@parcel/transformer-raw"]
   },
   "packagers": {

packages/transformers/webextension/src/WebExtensionTransformer.js

@@ -1,8 +1,9 @@
 // @flow
-import type {MutableAsset} from '@parcel/types';
+import type {MutableAsset, TransformerResult, ResolveFn} from '@parcel/types';
 
 import {Transformer} from '@parcel/plugin';
 import path from 'path';
+import fs from 'fs';
 import jsm from 'json-source-map';
 import parseCSP from 'content-security-policy-parser';
 import {validateSchema} from '@parcel/utils';
@@ -19,7 +20,10 @@ const DEP_LOCS = [
   ['browser_action', 'default_popup'],
   ['page_action', 'default_icon'],
   ['page_action', 'default_popup'],
+  ['action', 'default_icon'],
+  ['action', 'default_popup'],
   ['background', 'scripts'],
+  ['background', 'page'],
   ['chrome_url_overrides'],
   ['devtools_page'],
   ['options_ui', 'page'],
@@ -31,16 +35,23 @@ const DEP_LOCS = [
   ['user_scripts', 'api_script'],
 ];
 
+const AUTORELOAD_BG = fs.readFileSync(
+  path.join(__dirname, 'runtime', 'autoreload-bg.js'),
+  'utf8',
+);
+
 async function collectDependencies(
   asset: MutableAsset,
   program: any,
   ptrs: {[key: string]: any, ...},
   hot: boolean,
+  resolve: ResolveFn,
 ) {
   // isEntry used whenever strictly necessary to preserve filename
   // also for globs because it's wasteful to write out every file name
   const fs = asset.fs;
   const filePath = asset.filePath;
+  const isMV2 = program.manifest_version == 2;
   if (program.default_locale) {
     const locales = path.join(path.dirname(filePath), '_locales');
     let err = !(await fs.exists(locales))
@@ -152,12 +163,13 @@ async function collectDependencies(
       });
     }
   }
-  if (program.browser_action?.theme_icons) {
-    for (let i = 0; i < program.browser_action.theme_icons.length; ++i) {
-      const themeIcon = program.browser_action.theme_icons[i];
+  const browserActionName = isMV2 ? 'browser_action' : 'action';
+  if (program[browserActionName]?.theme_icons) {
+    for (let i = 0; i < program[browserActionName].theme_icons.length; ++i) {
+      const themeIcon = program[browserActionName].theme_icons[i];
       for (const k of ['light', 'dark']) {
         const loc = getJSONSourceLocation(
-          ptrs[`/browser_action/theme_icons/${i}/${k}`],
+          ptrs[`/${browserActionName}/theme_icons/${i}/${k}`],
           'value',
         );
         themeIcon[k] = asset.addURLDependency(themeIcon[k], {
@@ -174,12 +186,10 @@ async function collectDependencies(
     let war = [];
     for (let i = 0; i < program.web_accessible_resources.length; ++i) {
       // TODO: this doesn't support Parcel resolution
+      const files = program.web_accessible_resources[i];
       const globFiles = (
         await glob(
-          path.join(
-            path.dirname(filePath),
-            program.web_accessible_resources[i],
-          ),
+          path.join(path.dirname(filePath), isMV2 ? files : files.resources),
           fs,
           {},
         )
@@ -188,11 +198,20 @@ async function collectDependencies(
           needsStableName: true,
           loc: {
             filePath,
-            ...getJSONSourceLocation(ptrs[`/web_accessible_resources/${i}`]),
+            ...getJSONSourceLocation(
+              ptrs[
+                `/web_accessible_resources/${i}${isMV2 ? '' : '/resources'}`
+              ],
+            ),
           },
         }),
       );
-      war = war.concat(globFiles);
+      if (isMV2) {
+        war = war.concat(globFiles);
+      } else {
+        files.resources = globFiles;
+        war.push(files);
+      }
     }
     program.web_accessible_resources = war;
   }
@@ -227,18 +246,53 @@ async function collectDependencies(
       }
     }
   }
-  if (needRuntimeBG) {
-    if (!program.background) {
-      program.background = {};
+  if (isMV2) {
+    if (hot) {
+      // To enable HMR, we must override the CSP to allow 'unsafe-eval'
+      program.content_security_policy = cspPatchHMR(
+        program.content_security_policy,
+      );
+
+      if (needRuntimeBG) {
+        if (!program.background) {
+          program.background = {};
+        }
+        if (!program.background.scripts) {
+          program.background.scripts = [];
+        }
+        program.background.scripts.push(
+          asset.addURLDependency('./runtime/autoreload-bg.js', {
+            resolveFrom: __filename,
+          }),
+        );
+      }
     }
-    if (!program.background.scripts) {
-      program.background.scripts = [];
+  } else {
+    if (program.background?.service_worker) {
+      program.background.service_worker = asset.addURLDependency(
+        program.background.service_worker,
+        {
+          needsStableName: true,
+          // Extra pipeline needed to accept URL specifier
+          pipeline: needRuntimeBG ? 'mv3-bg-sw' : '',
+          env: {
+            context: 'service-worker',
+            sourceType: 'module',
+          },
+        },
+      );
+    } else if (needRuntimeBG) {
+      if (!program.background) {
+        program.background = {};
+      }
+      program.background.service_worker = asset.addURLDependency(
+        './runtime/autoreload-bg.js',
+        {
+          resolveFrom: __filename,
+          env: {context: 'service-worker'},
+        },
+      );
     }
-    program.background.scripts.push(
-      asset.addURLDependency('./runtime/autoreload-bg.js', {
-        resolveFrom: __filename,
-      }),
-    );
   }
 }
 
@@ -265,32 +319,38 @@ function cspPatchHMR(policy: ?string) {
 }
 
 export default (new Transformer({
-  async transform({asset, options}) {
+  async transform({asset, options, resolve}) {
     const code = await asset.getCode();
-    const parsed = jsm.parse(code);
-    const data: any = parsed.data;
-    validateSchema.diagnostic(
-      WebExtensionSchema,
-      {
-        data: data,
-        source: code,
-        filePath: asset.filePath,
-      },
-      '@parcel/transformer-webextension',
-      'Invalid Web Extension manifest',
-    );
-    await collectDependencies(
-      asset,
-      data,
-      parsed.pointers,
-      Boolean(options.hmrOptions),
-    );
-    if (options.hmrOptions) {
-      // To enable HMR, we must override the CSP to allow 'unsafe-eval'
-      data.content_security_policy = cspPatchHMR(data.content_security_policy);
+    if (asset.pipeline == 'mv3-bg-sw') {
+      asset.setCode(`
+        (function() {
+          ${AUTORELOAD_BG}
+        })();
+        ${code}
+      `);
+      return [asset];
+    } else {
+      const parsed = jsm.parse(code);
+      const data: any = parsed.data;
+      validateSchema.diagnostic(
+        WebExtensionSchema,
+        {
+          data: data,
+          source: code,
+          filePath: asset.filePath,
+        },
+        '@parcel/transformer-webextension',
+        'Invalid Web Extension manifest',
+      );
+      await collectDependencies(
+        asset,
+        data,
+        parsed.pointers,
+        Boolean(options.hmrOptions),
+        resolve,
+      );
+      asset.setCode(JSON.stringify(data, null, 2));
+      return [asset];
     }
-    asset.meta.handled = true;
-    asset.setCode(JSON.stringify(data, null, 2));
-    return [asset];
   },
 }): Transformer);

packages/transformers/webextension/src/runtime/autoreload-bg.js

@@ -1,5 +1,6 @@
 /* global window */
-var env = window.chrome || window.browser;
+var global = typeof self == 'undefined' ? window : self;
+var env = global.chrome || global.browser;
 env.runtime.onMessage.addListener(function(msg) {
   if (msg.__parcel_hmr_reload__) {
     env.runtime.reload();