Moving to manifest v3

README.md

@@ -37,6 +37,20 @@ You can read more about this in its official documentation: [Web Extension Polyf
 
 Run `npm run watch:firefox` or `npm run watch:chrome` to running the project and open on the browser.
 
+### Using devbox.json
+
+You can also use [devbox](https://www.jetify.com/docs/devbox/installing_devbox/) for more reproducible builds:
+
+```bash
+devbox run watch:firefox
+```
+
+or
+
+```bash
+devbox run watch:chrome
+```
+
 ## Support and credits
 
 - Author - [Andry Mendoza](https://dreez.dev/)

devbox.json

@@ -0,0 +1,23 @@
+{
+  "$schema": "https://raw.githubusercontent.com/jetify-com/devbox/0.15.0/.schema/devbox.schema.json",
+  "packages": [
+    "nodejs@latest"
+  ],
+  "shell": {
+    "init_hook": [
+      "test -d node_modules || npm ci",
+      "rm -rf dist"
+    ],
+    "scripts": {
+      "watch:firefox": [
+        "npm run watch:firefox"
+      ],
+      "watch:chrome": [
+        "npm run watch:chrome"
+      ]
+    }
+  },
+  "env": {
+    "PATH":"$PATH:$PWD/node_modules/.bin"
+  }
+}

devbox.lock

@@ -0,0 +1,90 @@
+{
+  "lockfile_version": "1",
+  "packages": {
+    "github:NixOS/nixpkgs/nixpkgs-unstable": {
+      "last_modified": "2025-09-15T20:13:12Z",
+      "resolved": "github:NixOS/nixpkgs/0d7c15863b251a7a50265e57c1dca1a7add2e291?lastModified=1757967192&narHash=sha256-%2FaA9A%2FOBmnuOMgwfzdsXRusqzUpd8rQnQY8jtrHK%2BTo%3D"
+    },
+    "nodejs@latest": {
+      "last_modified": "2025-08-11T07:05:29Z",
+      "plugin_version": "0.0.2",
+      "resolved": "github:NixOS/nixpkgs/9585e9192aadc13ec3e49f33f8333bd3cda524df#nodejs_24",
+      "source": "devbox-search",
+      "version": "24.5.0",
+      "systems": {
+        "aarch64-darwin": {
+          "outputs": [
+            {
+              "name": "out",
+              "path": "/nix/store/b1j05q96hwagn787p2jlgqcjg2nf5x49-nodejs-24.5.0",
+              "default": true
+            },
+            {
+              "name": "dev",
+              "path": "/nix/store/j6ayg4xpqy9xdxgrhpqylzq8v7v07c6r-nodejs-24.5.0-dev"
+            },
+            {
+              "name": "libv8",
+              "path": "/nix/store/3ys6v5s5gvd9snwnl4saynl6av7mz3vy-nodejs-24.5.0-libv8"
+            }
+          ],
+          "store_path": "/nix/store/b1j05q96hwagn787p2jlgqcjg2nf5x49-nodejs-24.5.0"
+        },
+        "aarch64-linux": {
+          "outputs": [
+            {
+              "name": "out",
+              "path": "/nix/store/1kn0vh4gf3a22arldrw694apq3fhgp15-nodejs-24.5.0",
+              "default": true
+            },
+            {
+              "name": "dev",
+              "path": "/nix/store/i3lqaj3j6znhnzh8ayka6q85r81ppxnw-nodejs-24.5.0-dev"
+            },
+            {
+              "name": "libv8",
+              "path": "/nix/store/jjw6xgmg6qynp336g9igqnzlfbhzxr2i-nodejs-24.5.0-libv8"
+            }
+          ],
+          "store_path": "/nix/store/1kn0vh4gf3a22arldrw694apq3fhgp15-nodejs-24.5.0"
+        },
+        "x86_64-darwin": {
+          "outputs": [
+            {
+              "name": "out",
+              "path": "/nix/store/sbcg21wp4bdzyh2542v77sp535kvfbfq-nodejs-24.5.0",
+              "default": true
+            },
+            {
+              "name": "libv8",
+              "path": "/nix/store/75b7iix0pbmxmfnmv90l3q0ll1gc75az-nodejs-24.5.0-libv8"
+            },
+            {
+              "name": "dev",
+              "path": "/nix/store/fg7pi9s6m0spci1pfqbny0kxmk832i3r-nodejs-24.5.0-dev"
+            }
+          ],
+          "store_path": "/nix/store/sbcg21wp4bdzyh2542v77sp535kvfbfq-nodejs-24.5.0"
+        },
+        "x86_64-linux": {
+          "outputs": [
+            {
+              "name": "out",
+              "path": "/nix/store/357id3rjy9417k4dkvxxmpgd9bxrwc7l-nodejs-24.5.0",
+              "default": true
+            },
+            {
+              "name": "dev",
+              "path": "/nix/store/0drh8jjq84sji6889l2k3ysmvy7sc9sg-nodejs-24.5.0-dev"
+            },
+            {
+              "name": "libv8",
+              "path": "/nix/store/kdlv4q7sgap0z43cylklhxz1g1q7751b-nodejs-24.5.0-libv8"
+            }
+          ],
+          "store_path": "/nix/store/357id3rjy9417k4dkvxxmpgd9bxrwc7l-nodejs-24.5.0"
+        }
+      }
+    }
+  }
+}

package.json

@@ -5,8 +5,8 @@
     "ng": "ng",
     "start": "ng serve",
     "build": "ng build && webpack --config webpack.config.js --mode production",
-    "watch:firefox": "concurrently \"nodemon\"  \"wait-on ./dist/angular-web-extension/browser/manifest.json && web-ext run --target firefox-desktop --source-dir ./dist/angular-web-extension/browser\"",
-    "watch:chrome": "concurrently \"nodemon\" \"wait-on ./dist/angular-web-extension/browser/manifest.json && web-ext run --target chromium --source-dir ./dist/angular-web-extension/browser\"",
+    "watch:firefox": "cp src/manifest.firefox.json src/manifest.json && concurrently \"nodemon\"  \"wait-on ./dist/angular-web-extension/browser/manifest.json && web-ext run --target firefox-desktop --source-dir ./dist/angular-web-extension/browser\"",
+    "watch:chrome": "cp src/manifest.chrome.json src/manifest.json && concurrently \"nodemon\" \"wait-on ./dist/angular-web-extension/browser/manifest.json && web-ext run --target chromium --source-dir ./dist/angular-web-extension/browser\"",
     "test": "ng test"
   },
   "private": true,
@@ -29,7 +29,7 @@
     "@angular/compiler-cli": "^18.2.0",
     "@types/chrome": "^0.0.279",
     "@types/jasmine": "~5.1.0",
-    "concurrently": "^9.0.1",
+    "concurrently": "^9.2.1",
     "jasmine-core": "~5.2.0",
     "karma": "~6.4.0",
     "karma-chrome-launcher": "~3.2.0",

src/.gitignore

@@ -0,0 +1 @@
+manifest.json

src/app/app.component.html

@@ -62,7 +62,7 @@
   }
 
   main {
-    width: 100%;
+    width: 100vw;
     min-height: 100%;
     display: flex;
     justify-content: center;
@@ -72,6 +72,12 @@
     position: relative;
   }
 
+  @supports (-moz-appearance: none) {
+    main {
+      width: 100%;
+    }
+  }
+
   .angular-logo {
     max-width: 9.2rem;
   }

src/manifest.chrome.json

@@ -0,0 +1,30 @@
+{
+  "manifest_version": 3,
+  "name": "Angular Web Extension Template by Dreez",
+  "description": "A starter template for Angular web extensions.",
+  "version": "1.0",
+  "short_name": "angular-web-extension",
+  "icons": {
+    "16": "icons/16.png",
+    "32": "icons/32.png",
+    "48": "icons/48.png",
+    "96": "icons/96.png",
+    "128": "icons/128.png"
+  },
+  "author": "",
+  "background": {
+    "service_worker": "background.js"
+  },
+  "content_scripts": [
+    {
+      "matches": ["<all_urls>"],
+      "js": ["content-script.js"]
+    }
+  ],
+  "permissions": ["storage", "activeTab"],
+  "host_permissions": ["<all_urls>"],
+  "action": {
+    "default_title": "Angular Web Extension by Dreez",
+    "default_popup": "index.html"
+  }
+}

src/manifest.json → src/manifest.firefox.json

@@ -1,5 +1,5 @@
 {
-  "manifest_version": 2,
+  "manifest_version": 3,
   "name": "Angular Web Extension Template by Dreez",
   "description": "A starter template for Angular web extensions.",
   "version": "1.0",
@@ -13,17 +13,17 @@
   },
   "author": "",
   "background": {
-    "scripts": ["background.js"],
-    "persistent": false
+    "scripts": ["background.js"]
   },
   "content_scripts": [
     {
       "matches": ["<all_urls>"],
       "js": ["content-script.js"]
     }
   ],
-  "permissions": ["storage", "activeTab", "tabs"],
-  "browser_action": {
+  "permissions": ["storage", "activeTab"],
+  "host_permissions": ["<all_urls>"],
+  "action": {
     "default_title": "Angular Web Extension by Dreez",
     "default_popup": "index.html"
   }