v0.1.0 Manifest v3 (Chrome-only)

Author: yaroslav-ilin

.gitignore

@@ -14,6 +14,7 @@ coverage
 /packages/*/bundle/manifest.json
 /packages/*/bundle/popup.html
 /packages/*/bundle/options.html
+/packages/*/bundle/offscreen.html
 /packages/*/bundle/*.js
 /packages/*/bundle/*.css
 /packages/*/bundle/*.svg

README.md

@@ -92,7 +92,7 @@ Then, run the watch mode:
 yarn start
 ```
 
-<small>While it's building you may want to check out [how to load an unpacked extension](https://developer.chrome.com/extensions/faq#faq-dev-01) in Google Chrome.</small>
+<small>While it's building you may want to check out [how to load an unpacked extension](https://developer.chrome.com/docs/extensions/get-started/tutorial/hello-world#load-unpacked) in Google Chrome.</small>
 
 Once it's built you will be able to load the extension from a `./bundle` directory in the appropriate package.
 

package.json

@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "ctf",
-  "version": "0.0.16",
+  "version": "0.1.0",
   "scripts": {
     "test": "jest --watch",
     "start": "npm-run-all --print-label --parallel firefox chromium",
@@ -17,10 +17,10 @@
     "@hot-loader/react-dom": "^17.0.2",
     "buffer": "^6.0.3",
     "country-flag-emoji-json": "^2.0.0",
-    "maxmind": "^4.3.6",
+    "maxmind": "^4.3.20",
     "node-libs-browser": "^2.2.1",
     "react": "^18.1.0",
-    "webextension-polyfill": "^0.9.0"
+    "webextension-polyfill": "^0.12.0"
   },
   "devDependencies": {
     "@babel/core": "^7.17.9",
@@ -32,15 +32,17 @@
     "@types/node-fetch": "^2",
     "@types/react": "^17.0.43",
     "@types/react-dom": "^18.0.2",
+    "@types/webextension-polyfill": "^0.10.7",
     "@types/webpack-env": "^1.16.4",
-    "@typescript-eslint/eslint-plugin": "^5.27.1",
-    "@typescript-eslint/parser": "^5.27.1",
+    "@typescript-eslint/eslint-plugin": "^7.11.0",
+    "@typescript-eslint/parser": "^7.11.0",
     "@wojtekmaj/enzyme-adapter-react-17": "^0.6.7",
     "babel-jest": "^27.5.1",
     "babel-loader": "^8.2.5",
     "babel-plugin-rewire-exports": "^2.3.0",
     "babel-preset-react-app": "^10.0.0",
     "bundlewatch": "^0.3.3",
+    "chrome-types": "^0.1.286",
     "css-loader": "^6.7.1",
     "css-minimizer-webpack-plugin": "^4.0.0",
     "enzyme": "^3.11.0",
@@ -67,13 +69,12 @@
     "react-dom": "^18.1.0",
     "react-hot-loader": "^4.13.0",
     "style-loader": "^3.3.1",
-    "typescript": "^4.6.4",
-    "webextension-polyfill-ts": "^0.26.0",
-    "webpack": "^5.73.0",
-    "webpack-cli": "^4.9.2",
-    "webpack-dev-server": "^4.9.2",
+    "typescript": "^5.4.5",
+    "webpack": "^5.91.0",
+    "webpack-cli": "^5.1.4",
+    "webpack-dev-server": "^5.0.4",
     "webpack-manifest-plugin": "^5.0.0",
-    "webpack-merge": "^5.8.0"
+    "webpack-merge": "^5.10.0"
   },
   "keywords": [],
   "author": "Yaroslav Ilin",
@@ -97,8 +98,8 @@
     ],
     "coverageThreshold": {
       "global": {
-        "lines": 90,
-        "statements": 90
+        "lines": 84,
+        "statements": 83
       }
     },
     "setupFiles": [

packages/bundler/bundle.js

@@ -24,6 +24,11 @@ class Bundle {
     return { basename: 'options', title: 'Options', filepath: 'options.html' };
   }
 
+  get offscreen() {
+    const basename = 'offscreen';
+    return { basename, title: 'Offscreen', filepath: `${basename}.html` };
+  }
+
   get isDevelopment() {
     return this.env.WEBPACK_SERVE;
   }

packages/bundler/entrypoints/_basic.js

@@ -26,11 +26,6 @@ class BasicEntrypoint {
           hotUpdateChunkFilename: 'hot/chunk~[id]~[fullhash].js',
           hotUpdateMainFilename: 'hot/main_[runtime]_[fullhash].json',
         },
-        optimization: {
-          runtimeChunk: {
-            name: (entrypoint) => `${entrypoint.name}.runtime`,
-          },
-        },
       },
       this.configuration,
       this.bundle.extra

packages/bundler/entrypoints/background.js

@@ -9,8 +9,10 @@ const { BasicEntrypoint } = require('./_basic');
 class BackgroundEntrypoint extends BasicEntrypoint {
   get configuration() {
     return merge(this._maxmindMocks, this._devServer, {
+      target: 'webworker',
+
       entry: {
-        background: `${this.bundle.runtimePath}/entrypoints/background`,
+        service_worker: `${this.bundle.runtimePath}/entrypoints/service_worker`,
       },
 
       module: {

packages/bundler/entrypoints/ui.js

@@ -8,7 +8,7 @@ class UIEntrypoint extends ReactEntrypoint {
   constructor(bundle) {
     super(bundle);
 
-    this.html = [bundle.popup, bundle.options];
+    this.html = [bundle.popup, bundle.options, bundle.offscreen];
     this._createEntry = this._createEntry.bind(this);
     this._createHtml = this._createHtml.bind(this);
   }

packages/bundler/manifest.js

@@ -13,7 +13,7 @@ class ManifestFactory {
     const { author, version } = bundle.pkg;
 
     return {
-      manifest_version: 2,
+      manifest_version: 3,
 
       name: '__MSG_ext_name__',
       version,
@@ -22,7 +22,7 @@ class ManifestFactory {
       description: '__MSG_ext_description__',
       icons: this.icons,
 
-      page_action: {
+      action: {
         default_icon: this.icons,
         default_popup: bundle.popup.filepath,
         show_matches: ['<all_urls>'],
@@ -34,12 +34,11 @@ class ManifestFactory {
 
       author,
       background: {
-        scripts: entrypoints.background,
+        service_worker: entrypoints.service_worker[0],
       },
 
-      minimum_chrome_version: '36',
-
-      permissions: ['webRequest', '<all_urls>', 'storage'],
+      permissions: ['webRequest', 'storage', 'offscreen'],
+      host_permissions: ['*://*/*'],
 
       short_name: '__MSG_ext_short_name__',
       version_name: this._getVersionTag(bundle.pkg),

packages/chromium/bundle/offscreen.js.LICENSE.txt

@@ -0,0 +1,9 @@
+/**
+ * @license React
+ * react.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */

packages/chromium/bundle/background.js.LICENSE.txt renamed to packages/chromium/bundle/service_worker.js.LICENSE.txt

@@ -1,9 +1,3 @@
-/*
-object-assign
-(c) Sindre Sorhus
-@license MIT
-*/
-
 /*!
  * The buffer module from node.js, for the browser.
  *
@@ -19,3 +13,11 @@ object-assign
  */
 
 /*! ieee754. BSD-3-Clause License. Feross Aboukhadijeh <https://feross.org/opensource> */
+
+/**
+ * tiny-lru
+ *
+ * @copyright 2024 Jason Mulligan <jason.mulligan@avoidwork.com>
+ * @license BSD-3-Clause
+ * @version 11.2.6
+ */

packages/chromium/webpack.config.cjs

@@ -14,7 +14,7 @@ class ChromiumBundle extends bundler.Bundle {
       {
         plugins: [
           new webpack.ProvidePlugin({
-            browser: ['webextension-polyfill-ts', 'browser'],
+            browser: 'webextension-polyfill',
           }),
         ],
       },
@@ -28,10 +28,12 @@ class ChromiumManifestFactory extends bundler.ManifestFactory {
     const manifest = super.create(bundle, _, entrypoints);
 
     if (bundle.devServer) {
-      manifest.content_security_policy = [
-        `script-src 'self' 'unsafe-eval' http://localhost:${bundle.devServer.port}`,
-        "object-src 'self'",
-      ].join('; ');
+      manifest.content_security_policy = {
+        extension_pages: [
+          `script-src 'self' 'wasm-unsafe-eval' http://localhost:${bundle.devServer.port}`,
+          "object-src 'self'",
+        ].join('; '),
+      };
     }
 
     return manifest;

packages/cli/airports.spec.ts

@@ -16,7 +16,10 @@ describe('Airports Script', () => {
     });
 
     it('should respect double quotes in input', async () => {
-      const spy = jest.spyOn(csvStream, 'createStream');
+      const spy = jest.spyOn(
+        csvStream as { createStream: jest.Mock },
+        'createStream'
+      );
 
       const mainTyped = main as () => Promise<void>;
       const ignoredResult = await mainTyped();

packages/firefox/bundle/offscreen.js.LICENSE.txt

@@ -0,0 +1,9 @@
+/**
+ * @license React
+ * react.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */

packages/firefox/bundle/background.js.LICENSE.txt renamed to packages/firefox/bundle/service_worker.js.LICENSE.txt

@@ -1,9 +1,3 @@
-/*
-object-assign
-(c) Sindre Sorhus
-@license MIT
-*/
-
 /*!
  * The buffer module from node.js, for the browser.
  *
@@ -19,3 +13,11 @@ object-assign
  */
 
 /*! ieee754. BSD-3-Clause License. Feross Aboukhadijeh <https://feross.org/opensource> */
+
+/**
+ * tiny-lru
+ *
+ * @copyright 2024 Jason Mulligan <jason.mulligan@avoidwork.com>
+ * @license BSD-3-Clause
+ * @version 11.2.6
+ */

packages/landing/src/index.tsx

@@ -7,7 +7,7 @@ import { reportWebVitals } from './report-web-vitals';
 import './index.css';
 
 const rootElement = document.getElementById('react-root');
-// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+
 if (rootElement!.hasChildNodes()) {
   ReactDOM.hydrate(
     <React.StrictMode>

packages/runtime/__test__/fixtures/success_cloudflare-cph.ts

@@ -1,4 +1,4 @@
-export const state = 'success' as const;
+export const state = 'success';
 
 export const request = {
   url: 'https://ilin.dk/',

packages/runtime/__test__/fixtures/success_cloudfront-fra.ts

@@ -1,4 +1,4 @@
-export const state = 'success' as const;
+export const state = 'success';
 
 export const request = {
   url: 'https://www.workday.com/',

packages/runtime/__test__/fixtures/success_fastly-cph.ts

@@ -1,4 +1,4 @@
-export const state = 'success' as const;
+export const state = 'success';
 
 export const request = {
   url: 'https://example.com/',

packages/runtime/__test__/fixtures/success_ip-ch.ts

@@ -1,4 +1,4 @@
-export const state = 'success' as const;
+export const state = 'success';
 
 export const request = {
   url: 'https://protonmail.com/',

packages/runtime/__test__/harness/browser/action.ts

@@ -0,0 +1,19 @@
+import { Action } from 'webextension-polyfill';
+
+import { stub } from './stub';
+
+export function action() {
+  const browser = stub();
+
+  beforeEach(() => {
+    browser.action = {
+      setTitle: jest.fn(),
+      setPopup: jest.fn(),
+      setIcon: jest.fn(),
+    } as unknown as Action.Static;
+  });
+
+  afterEach(() => {
+    browser.action = undefined as unknown as Action.Static;
+  });
+}

packages/runtime/__test__/harness/browser/dns.ts

@@ -1,4 +1,4 @@
-import { Dns } from 'webextension-polyfill-ts';
+import { Dns } from 'webextension-polyfill';
 
 import { stub } from './stub';
 

packages/runtime/__test__/harness/browser/i18n.ts

@@ -1,4 +1,4 @@
-import { I18n } from 'webextension-polyfill-ts';
+import { I18n } from 'webextension-polyfill';
 
 import * as locale from '../../../../bundle/content/_locales/en/messages.json';
 

packages/runtime/__test__/harness/browser/index.ts

@@ -1,5 +1,5 @@
 export { stub } from './stub';
+export { action } from './action';
 export { dns } from './dns';
 export { i18n } from './i18n';
 export { storage } from './storage';
-export { pageAction } from './page_action';