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
+ */