Automates the creation of the extension

examples/browser-extension/README.md

@@ -20,39 +20,50 @@ Chrome browser extension adding HTTP Message Signature on all outgoing requests
 
 ## Usage
 
-If you don't have one, generate a signing key for your extension
+Compile the code of the extension:
 
 ```shell
-npm run generate-signing-key
+npm run build:chrome
 ```
 
-Then build, bundle, and sign the Chrome extension
+Bundle and sign the Chrome extension:
 
 ```shell
 npm run bundle:chrome
 ```
 
-This extension requires an [entreprise policy](https://support.google.com/chrome/a/answer/187202?hl=en) to be configured on your Chrome. It requires that you configure your Chrome instance with a policy to force install the extension.
+This command creates the folder `dist` with both the unpacked and packed (.crx) Chrome extension.
 
-In a distinct terminal, run `npm run start:config`. This ensures Chrome can install your extension.
+## Installing Extension from Sources
 
-On Linux
+This extension requires the [webRequestBlocking](https://developer.chrome.com/docs/extensions/reference/api/webRequest) permission, which in turn requires of an [Enterprise policy](https://support.google.com/chrome/a/answer/187202?hl=en) to be configured on Chrome.
+
+Follow these steps to configure Chrome with such a policy and force it to install the extension locally.
+First, run in another terminal:
+
+```shell
+npm run start:config
+```
+
+This starts a server at http://localhost:8000 for installing extension locally.
+
+Then, copy the policy file in the correspondent system path:
+
+On Linux:
 
 ```shell
 mkdir -p /etc/opt/chrome/policies/managed
-cp config/chromium/policy.json /etc/opt/chrome/policies/managed/policy.json
+cp policy/policy.json /etc/opt/chrome/policies/managed/policy.json
 ```
 
-On macOS
+On MacOS:
 
 ```shell
 mkdir -p /Library/Managed\ Preferences/
-cp config/chromium/com.google.Chrome.managed.plist /Library/Managed\ Preferences/
+cp policy/com.google.Chrome.managed.plist /Library/Managed\ Preferences/
 ```
 
-You can confirm the policy is installed by navigating to `chrome://policy/`.
-
-> You might have to change the forced_install ID. To find the ID of your extension, drag and drop it in Chrome, look at the ID, then replace instances of `fkgomfknhcfpepcgkimebggnfgkbghii`
+You can confirm the policy is installed by navigating to [chrome://policy/](chrome://policy/) and make sure to reload the policies.
 
 ## Security Considerations
 

examples/browser-extension/package.json

@@ -1,13 +1,13 @@
 {
   "name": "http-message-signatures-extension",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Enterprise browser extension adding an HTTP Message signature to all requests",
   "scripts": {
-    "build:chrome": "tsup src/background.ts --format esm --platform browser --target chrome100 --publicDir platform/mv3/chromium --clean --out-dir dist/mv3/chromium --external node:crypto",
-    "bundle:chrome": "npm run build:chrome && mkdir -p dist/web-ext-artifacts && crx pack --private-key signing-key.pem --output dist/web-ext-artifacts/http-message-signatures-extension.crx dist/mv3/chromium",
-    "generate-signing-key": "openssl genrsa -out signing-key.pem 2048",
-    "start:config": "cp ./config/chromium/update.xml dist/web-ext-artifacts && http-server ./dist/web-ext-artifacts -p 8000",
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "build:chrome": "tsup src/background.ts --format esm --platform browser --target chrome100 --clean --out-dir dist/mv3/chromium --external node:crypto",
+    "bundle:chrome": "npm run build:chrome && node ./scripts/build_web_artifacts.mjs",
+    "start:config": "http-server ./dist/web-ext-artifacts -p 8000",
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "clean": "rimraf dist"
   },
   "repository": {
     "type": "git",
@@ -28,10 +28,10 @@
   },
   "homepage": "https://github.com/cloudflareresearch/web-bot-auth#readme",
   "devDependencies": {
-    "@types/chrome": "^0.0.313",
-    "@types/libsodium-wrappers": "^0.7.14",
-    "crx": "^5.0.1",
-    "http-server": "^14.1.1",
-    "libsodium-wrappers": "^0.7.15"
+    "@types/chrome": "0.0.326",
+    "@types/libsodium-wrappers": "0.7.14",
+    "crx": "5.0.1",
+    "http-server": "14.1.1",
+    "libsodium-wrappers": "0.7.15"
   }
 }

examples/browser-extension/platform/mv3/chromium/manifest.json

@@ -1,7 +1,6 @@
 {
   "manifest_version": 3,
   "name": "HTTP Message Signatures User Agent",
-  "version": "0.1.9",
   "permissions": ["webRequest", "webRequestBlocking"],
   "host_permissions": ["<all_urls>"],
   "background": {

examples/browser-extension/config/chromium/com.google.Chrome.managed.plist → examples/browser-extension/policy/com.google.Chrome.managed.plist.templ

@@ -9,7 +9,7 @@
             <key>installation_mode</key>
             <string>blocked</string>
         </dict>
-        <key>fkgomfknhcfpepcgkimebggnfgkbghii</key>
+        <key>EXTENSION_ID_REPLACED_BY_NPM_RUN_BUNDLE_CHROME</key>
         <dict>
             <key>installation_mode</key>
             <string>force_installed</string>

examples/browser-extension/config/chromium/policy.json → examples/browser-extension/policy/policy.json.templ

@@ -1,6 +1,6 @@
 {
   "ExtensionSettings": {
-    "fkgomfknhcfpepcgkimebggnfgkbghii": {
+    "EXTENSION_ID_REPLACED_BY_NPM_RUN_BUNDLE_CHROME": {
       "installation_mode": "force_installed",
       "update_url": "http://localhost:8000/update.xml"
     }

examples/browser-extension/scripts/build_web_artifacts.mjs

@@ -0,0 +1,93 @@
+// Copyright 2025 Cloudflare, Inc.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import ChromeExtension from "crx";
+import * as fs from "node:fs";
+import path from "node:path";
+const { KeyObject } = await import("node:crypto");
+const { subtle } = globalThis.crypto;
+import pkg from '../package.json' with { type: "json" };
+
+function makePolicy(extensionID) {
+  const MarkerString = "EXTENSION_ID_REPLACED_BY_NPM_RUN_BUNDLE_CHROME"
+  const policyPath = path.join(path.dirname("."), "policy");
+  if (!fs.existsSync(policyPath)) {
+    fs.mkdirSync(policyPath, { recursive: true });
+  }
+
+  for (let fileName of ["com.google.Chrome.managed.plist", "policy.json"]) {
+    const template = fs.readFileSync(
+      path.join(policyPath, fileName + ".templ"),
+      "utf8"
+    );
+    const fileContent = template.split(MarkerString).join(extensionID);
+    fs.writeFileSync(path.join(policyPath, fileName), fileContent);
+  }
+}
+
+function setManifestVersion(version) {
+  const manifestInputPath = path.join(path.dirname("."), "platform", "mv3", "chromium", 'manifest.json');
+  const manifestOutputPath = path.join(path.dirname("."), "dist", "mv3", "chromium", 'manifest.json');
+  const manifestStr = fs.readFileSync(manifestInputPath, "utf8");
+  const manifest = JSON.parse(manifestStr);
+  manifest.version = version;
+  fs.writeFileSync(manifestOutputPath, JSON.stringify(manifest, null, 2));
+}
+
+async function main() {
+  const distPath = path.join(path.dirname("."), "dist", "web-ext-artifacts");
+  if (!fs.existsSync(distPath)) {
+    fs.mkdirSync(distPath, { recursive: true });
+  }
+
+  const { privateKey, publicKey } = await subtle.generateKey(
+    {
+      name: "RSASSA-PKCS1-v1_5",
+      modulusLength: 2048,
+      publicExponent: Uint8Array.from([1, 0, 1]),
+      hash: "SHA-256",
+    },
+    true,
+    ["sign", "verify"]
+  );
+
+  const skPEM = KeyObject.from(privateKey).export({
+    type: "pkcs8",
+    format: "pem",
+  });
+  const pkBytes = KeyObject.from(publicKey).export({
+    type: "pkcs1",
+    format: "der",
+  });
+
+  const crx = new ChromeExtension({
+    codebase: "http://localhost:8000/" + pkg.name + '.crx',
+    privateKey: skPEM,
+    publicKey: pkBytes,
+  });
+
+  setManifestVersion(pkg.version);
+  await crx.load(path.join(path.dirname("."), "dist", "mv3", "chromium"))
+  const extensionBytes = await crx.pack();
+  const extensionID = crx.generateAppId();
+
+  fs.writeFileSync("private_key.pem", skPEM);
+  fs.writeFileSync(path.join(distPath, pkg.name + '.crx'), extensionBytes);
+  fs.writeFileSync(path.join(distPath, "update.xml"), crx.generateUpdateXML());
+  makePolicy(extensionID);
+
+  console.log(`Build Extension with ID: ${extensionID}`)
+};
+
+await main();

examples/browser-extension/src/background.ts

@@ -52,9 +52,9 @@ class Ed25519Signer {
 
 chrome.webRequest.onBeforeSendHeaders.addListener(
   function (details) {
-    // eslint-disable-next-line @typescript-eslint/no-non-null-asserted-optional-chain
     const request = new Request(details.url, {
       method: details.method,
+      // eslint-disable-next-line @typescript-eslint/no-non-null-asserted-optional-chain
       headers: details.requestHeaders?.map((h) => [h.name, h.value!])!,
     });
     const now = new Date();