parcel-bundler · devongovett · Apr 11, 2022 · Oct 10, 2021 · Oct 11, 2021 · Oct 12, 2021
diff --git a/packages/configs/webextension/index.json b/packages/configs/webextension/index.json
@@ -4,7 +4,8 @@
     "manifest.json": ["@parcel/transformer-webextension"],
     "raw:*": ["@parcel/transformer-raw"]
   },
+  "runtimes": ["...", "@parcel/runtime-webextension"],
   "packagers": {
-    "manifest.json": "@parcel/packager-raw-url"
+    "manifest.json": "@parcel/packager-webextension"
   }
 }
diff --git a/packages/configs/webextension/package.json b/packages/configs/webextension/package.json
@@ -16,7 +16,8 @@
   "main": "index.json",
   "dependencies": {
     "@parcel/config-default": "2.4.0",
-    "@parcel/packager-raw-url": "2.4.0",
+    "@parcel/packager-webextension": "2.4.0",
+    "@parcel/runtime-webextension": "2.4.0",
     "@parcel/transformer-raw": "2.4.0",
     "@parcel/transformer-webextension": "2.4.0"
   }

diff --git a/packages/core/integration-tests/test/integration/webextension-mv3/.parcelrc b/packages/core/integration-tests/test/integration/webextension-mv3/.parcelrc
@@ -0,0 +1,3 @@
+{
+  "extends": ["@parcel/config-webextension"]
+}
diff --git a/packages/core/integration-tests/test/integration/webextension-mv3/background.js b/packages/core/integration-tests/test/integration/webextension-mv3/background.js
diff --git a/packages/core/integration-tests/test/integration/webextension-mv3/content-script.js b/packages/core/integration-tests/test/integration/webextension-mv3/content-script.js
@@ -0,0 +1 @@
+alert('File test alert');
diff --git a/packages/core/integration-tests/test/integration/webextension-mv3/injected.css b/packages/core/integration-tests/test/integration/webextension-mv3/injected.css
@@ -0,0 +1,3 @@
+h1 {
+    font-family: "Comic Sans MS";
+}
diff --git a/packages/core/integration-tests/test/integration/webextension-mv3/manifest.json b/packages/core/integration-tests/test/integration/webextension-mv3/manifest.json
@@ -0,0 +1,20 @@
+{
+  "name": "MV3 Migration - content script example",
+  "description": "Source: https://github.com/GoogleChrome/chrome-extensions-samples",
+  "version": "0.1",
+  "manifest_version": 3,
+  "background": {
+    "service_worker": "background.js"
+  },
+  "permissions": [
+    "scripting",
+    "activeTab"
+  ],
+  "content_scripts": [{
+    "matches": ["https://*.google.com/*"],
+    "js": ["other-content-script.js"]
+  }],
+  "action": {
+    "default_popup": "popup.html"
+  }
+}
diff --git a/packages/core/integration-tests/test/integration/webextension-mv3/other-content-script.js b/packages/core/integration-tests/test/integration/webextension-mv3/other-content-script.js
@@ -0,0 +1 @@
+import './injected.css';
diff --git a/packages/core/integration-tests/test/integration/webextension-mv3/popup.css b/packages/core/integration-tests/test/integration/webextension-mv3/popup.css
@@ -0,0 +1,19 @@
+* {
+  box-sizing: border-box;
+}
+html,
+body,
+main {
+  height: 100%;
+  margin: 0;
+  padding: 0;
+}
+body {
+  min-width: 20em;
+  min-height: 10em;
+}
+main {
+  padding: 1em .5em;
+  display: grid;
+  place-items: center;
+}
diff --git a/packages/core/integration-tests/test/integration/webextension-mv3/popup.html b/packages/core/integration-tests/test/integration/webextension-mv3/popup.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Document</title>
+  <link rel="stylesheet" href="popup.css">
+  <script src="popup.js" type="module"></script>
+</head>
+<body>
+  <main>
+    <div>
+      <button id="inject-file">Inject file</button>
+    </div>
+    <div>
+      <button id="inject-function">Inject function</button>
+    </div>
+  </main>
+</body>
+</html>
diff --git a/packages/core/integration-tests/test/integration/webextension-mv3/popup.js b/packages/core/integration-tests/test/integration/webextension-mv3/popup.js
@@ -0,0 +1,33 @@
+import contentScript from 'url:./content-script.js';
+let injectFile = document.getElementById('inject-file');
+let injectFunction = document.getElementById('inject-function');
+
+async function getCurrentTab() {
+  let queryOptions = { active: true, currentWindow: true };
+  let [tab] = await chrome.tabs.query(queryOptions);
+  return tab;
+}
+
+injectFile.addEventListener('click', async () => {
+  let tab = await getCurrentTab();
+
+  chrome.scripting.executeScript({
+    target: {tabId: tab.id},
+    files: [contentScript]
+  });
+});
+
+function showAlert(givenName) {
+  alert(`Hello, ${givenName}`);
+}
+
+injectFunction.addEventListener('click', async () => {
+  let tab = await getCurrentTab();
+
+  let name = 'World';
+  chrome.scripting.executeScript({
+    target: {tabId: tab.id},
+    func: showAlert,
+    args: [name]
+  });
+});
diff --git a/packages/core/integration-tests/test/integration/webextension-mv3/yarn.lock b/packages/core/integration-tests/test/integration/webextension-mv3/yarn.lock
diff --git a/packages/core/integration-tests/test/integration/webextension/_locales/.unwanted-file b/packages/core/integration-tests/test/integration/webextension/_locales/.unwanted-file
@@ -0,0 +1 @@
+This is to cover files like .DS_Store
diff --git a/packages/core/integration-tests/test/webextension.js b/packages/core/integration-tests/test/webextension.js
@@ -1,6 +1,6 @@
 import assert from 'assert';
 import path from 'path';
-import {bundle, assertBundles, outputFS} from '@parcel/test-utils';
+import {bundle, assertBundles, outputFS, distDir} from '@parcel/test-utils';
 
 describe('webextension', function () {
   it('should resolve a full webextension bundle', async function () {
@@ -25,7 +25,6 @@ describe('webextension', function () {
         assets: ['manifest.json'],
       },
       {
-        name: 'background.js',
         assets: ['background.ts'],
       },
       {assets: ['a.txt']},
@@ -37,6 +36,24 @@ describe('webextension', function () {
       {assets: ['content.js']},
       {assets: ['content.css']},
     ]);
+    assert(
+      await outputFS.exists(
+        path.join(distDir, '_locales', 'en_US', 'messages.json'),
+      ),
+    );
+    const manifest = JSON.parse(
+      await outputFS.readFile(
+        b.getBundles().find(b => b.name == 'manifest.json').filePath,
+        'utf8',
+      ),
+    );
+    const scripts = manifest.background.scripts;
+    assert.equal(scripts.length, 1);
+    assert(
+      (
+        await outputFS.readFile(path.join(distDir, scripts[0]), 'utf-8')
+      ).includes('Hello Parcel!'),
+    );
   });
 
   it('should resolve the web_accessible_resources globs', async function () {
@@ -52,15 +69,12 @@ describe('webextension', function () {
         assets: ['manifest.json'],
       },
       {
-        name: 'index.js',
         assets: ['index.ts', 'esmodule-helpers.js'],
       },
       {
-        name: 'other.js',
         assets: ['other.ts', 'esmodule-helpers.js'],
       },
       {
-        name: 'index-jsx.js',
         assets: [
           'esmodule-helpers.js',
           'index-jsx.jsx',
@@ -78,12 +92,35 @@ describe('webextension', function () {
       ),
     );
     const war = manifest.web_accessible_resources;
-    assert.deepEqual(war, [
-      '/injected/index.js',
-      '/injected/nested/other.js',
-      '/injected/index-jsx.js',
-      '/injected/single.js',
+    assert.equal(war.length, 4);
+  });
+  it('should support web extension manifest v3', async function () {
+    let b = await bundle(
+      path.join(__dirname, '/integration/webextension-mv3/manifest.json'),
+    );
+    assertBundles(b, [
+      {
+        name: 'manifest.json',
+        assets: ['manifest.json'],
+      },
+      {assets: ['background.js']},
+      {assets: ['popup.html']},
+      {assets: ['popup.css']},
+      {assets: ['popup.js', 'esmodule-helpers.js', 'bundle-url.js']},
+      {assets: ['content-script.js']},
+      {assets: ['other-content-script.js']},
+      {assets: ['injected.css']},
     ]);
+    const manifest = JSON.parse(
+      await outputFS.readFile(path.join(distDir, 'manifest.json'), 'utf-8'),
+    );
+    const css = manifest.content_scripts[0].css;
+    assert.equal(css.length, 1);
+    assert(
+      (await outputFS.readFile(path.join(distDir, css[0]), 'utf-8')).includes(
+        'Comic Sans MS',
+      ),
+    );
   });
   // TODO: Test error-checking
 });
diff --git a/packages/core/types/index.js b/packages/core/types/index.js
@@ -186,7 +186,7 @@ export type EnvironmentOptions = {|
  */
 export type VersionMap = {
   [string]: string,
-  ...
+  ...,
 };
 
 export type EnvironmentFeature =
@@ -398,7 +398,9 @@ export interface AssetSymbols // eslint-disable-next-line no-undef
    * This is the default state.
    */
   +isCleared: boolean;
-  get(exportSymbol: Symbol): ?{|
+  get(
+    exportSymbol: Symbol,
+  ): ?{|
     local: Symbol,
     loc: ?SourceLocation,
     meta?: ?Meta,
@@ -441,7 +443,9 @@ export interface MutableDependencySymbols // eslint-disable-next-line no-undef
    * This is the default state.
    */
   +isCleared: boolean;
-  get(exportSymbol: Symbol): ?{|
+  get(
+    exportSymbol: Symbol,
+  ): ?{|
     local: Symbol,
     loc: ?SourceLocation,
     isWeak: boolean,

diff --git a/packages/packagers/webextension/package.json b/packages/packagers/webextension/package.json
@@ -0,0 +1,27 @@
+{
+  "name": "@parcel/packager-webextension",
+  "version": "2.4.0",
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "funding": {
+    "type": "opencollective",
+    "url": "https://opencollective.com/parcel"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/parcel-bundler/parcel.git"
+  },
+  "main": "lib/WebExtensionPackager.js",
+  "source": "src/WebExtensionPackager.js",
+  "engines": {
+    "node": ">=12.0.0",
+    "parcel": "^2.4.0"
+  },
+  "dependencies": {
+    "@parcel/plugin": "2.4.0",
+    "@parcel/utils": "2.4.0",
+    "nullthrows": "^1.1.1"
+  }
+}
diff --git a/packages/packagers/webextension/src/WebExtensionPackager.js b/packages/packagers/webextension/src/WebExtensionPackager.js
@@ -0,0 +1,76 @@
+// @flow strict-local
+
+import assert from 'assert';
+import nullthrows from 'nullthrows';
+import {Packager} from '@parcel/plugin';
+import {replaceURLReferences, relativeBundlePath} from '@parcel/utils';
+
+export default (new Packager({
+  async package({bundle, bundleGraph}) {
+    let assets = [];
+    bundle.traverseAssets(asset => {
+      assets.push(asset);
+    });
+
+    assert.equal(
+      assets.length,
+      1,
+      'Web extension manifest bundles must only contain one asset',
+    );
+    const asset = assets[0];
+    assert(asset.meta.webextEntry === true);
+
+    const relPath = b =>
+      relativeBundlePath(bundle, b, {leadingDotSlash: false});
+
+    const manifest = JSON.parse(await asset.getCode());
+    const deps = asset.getDependencies();
+    const war = [];
+    for (const contentScript of manifest.content_scripts || []) {
+      const jsBundles = deps
+        .filter(d => contentScript.js?.includes(d.id))
+        .map(d => nullthrows(bundleGraph.getReferencedBundle(d, bundle)));
+
+      contentScript.css = [
+        ...new Set(
+          (contentScript.css || []).concat(
+            jsBundles
+              .flatMap(b => bundleGraph.getReferencedBundles(b))
+              .filter(b => b.type == 'css')
+              .map(relPath),
+          ),
+        ),
+      ];
+
+      war.push({
+        matches: contentScript.matches,
+        extension_ids: [],
+        resources: jsBundles
+          .flatMap(b => {
+            const children = [];
+            const siblings = bundleGraph.getReferencedBundles(b);
+            bundleGraph.traverseBundles(child => {
+              if (b !== child && !siblings.includes(child)) {
+                children.push(child);
+              }
+            }, b);
+            return children;
+          })
+          .map(relPath),
+      });
+    }
+    manifest.web_accessible_resources = (
+      manifest.web_accessible_resources || []
+    ).concat(
+      manifest.manifest_version == 2
+        ? [...new Set(war.flatMap(entry => entry.resources))]
+        : war,
+    );
+    let {contents} = replaceURLReferences({
+      bundle,
+      bundleGraph,
+      contents: JSON.stringify(manifest),
+    });
+    return {contents};
+  },
+}): Packager);