MV3 support work:

rename chrome.browserAction -> chrome.action
include ext/bg.js in sw/main.js (addresses #131)

move replay root to ./ from ./replay/
dynamically import sw.js from bg.js, use bg.js as service-worker entrypoint
ipfs: add Origin header overrides via declarative-net-request rules, also add as permission
via brave-ipfs.json rules

bump version to 0.10.0

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@webrecorder/archivewebpage",
   "productName": "ArchiveWeb.page",
-  "version": "0.9.7",
+  "version": "0.10.0",
   "main": "index.js",
   "description": "Create Web Archives directly in your browser",
   "repository": "https://github.com/webrecorder/archiveweb.page",

src/electron/app-popup.js

@@ -75,12 +75,12 @@ class AppRecPopup extends RecPopup
   }
 
   getHomePage() {
-    return "replay/index.html";
+    return "index.html";
   }
 
   get extRoot() {
     return "";
   }
 }
 
-customElements.define("wr-app-popup", AppRecPopup);
+customElements.define("wr-app-popup", AppRecPopup);

src/electron/electron-recorder-app.js

@@ -92,7 +92,7 @@ class ElectronRecorderApp extends ElectronReplayApp
   }
 
   get mainWindowUrl() {
-    return "replay/index.html";
+    return "index.html";
   }
 
   createMainWindow(argv) {

src/ext/bg.js

@@ -27,7 +27,7 @@ const disabledCSPTabs = new Set();
 // ===========================================================================
 
 function main() {
-  chrome.browserAction.setBadgeBackgroundColor({color: "#64e986"});
+  chrome.action.setBadgeBackgroundColor({color: "#64e986"});
 
   chrome.contextMenus.create({"id": "toggle-rec", "title": "Start Recording", "contexts": ["browser_action"]});
   chrome.contextMenus.create({"id": "view-rec", "title": "View Web Archives", "contexts": ["all"]});
@@ -178,7 +178,7 @@ chrome.tabs.onRemoved.addListener((tabId) => {
 chrome.contextMenus.onClicked.addListener((info, tab) => {
   switch (info.menuItemId) {
   case "view-rec":
-    chrome.tabs.create({ url: chrome.runtime.getURL("replay/index.html") });
+    chrome.tabs.create({ url: chrome.runtime.getURL("index.html") });
     break;
 
   case "toggle-rec":
@@ -296,3 +296,7 @@ async function disableCSPForTab(tabId) {
 
 // ===========================================================================
 chrome.runtime.onInstalled.addListener(main);
+
+if (self.importScripts) {
+  self.importScripts("sw.js");
+}

src/ext/browser-recorder.js

@@ -209,9 +209,9 @@ class BrowserRecorder extends Recorder {
       color = "#64e986";
     }
 
-    chrome.browserAction.setTitle({title, tabId});
-    chrome.browserAction.setBadgeBackgroundColor({color, tabId});
-    chrome.browserAction.setBadgeText({text, tabId});
+    chrome.action.setTitle({title, tabId});
+    chrome.action.setBadgeBackgroundColor({color, tabId});
+    chrome.action.setBadgeText({text, tabId});
 
     if (this.port) {
       const status = this.getStatusMsg();

src/ext/manifest.json

@@ -2,27 +2,38 @@
   "name": "Webrecorder ArchiveWeb.page",
   "description": "Create high-fidelity web archives directly in your browser",
   "version": "$VERSION",
-  "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'",
-  "permissions": ["debugger", "contextMenus", "tabs", "activeTab", "storage", "unlimitedStorage", "webRequest", "webRequestBlocking", "ipfs", "<all_urls>"],
+  "permissions": ["debugger", "contextMenus", "tabs", "activeTab", "storage", "unlimitedStorage", "webRequest", "ipfs", "declarativeNetRequest"],
   "background": { 
-    "scripts": ["bg.js"],
-    "persistent": true
+    "service_worker": "bg.js"
   },
   "icons": {
     "32": "$ICON",
     "128": "$ICON"
   },
-  "browser_action": {
+  "action": {
     "default_icon": {
       "32": "$ICON"
     },
     "default_title": "Webrecorder ArchiveWeb.page",
     "default_popup": "popup.html"
   },
-  "web_accessible_resources": [
-    "pdf/*",
-    "replay/*",
-    "ruffle/*"
-  ],
-  "manifest_version": 2
+  "declarative_net_request": {
+    "rule_resources": [{
+      "id": "brave-ipfs",
+      "enabled": true,
+      "path": "brave-ipfs.json"
+    }]
+  },
+  "web_accessible_resources": [{
+    "resources": [
+      "pdf/*",
+      "ruffle/*"
+    ],
+    "matches": ["*://*/*"]
+  }],
+  "host_permissions": ["*://*/*"],
+  "content_security_policy": {
+    "extension_pages": "script-src 'self' 'wasm-unsafe-eval'; object-src 'self'"
+  },
+  "manifest_version": 3
 }

src/popup.js

@@ -108,7 +108,7 @@ class RecPopup extends LitElement
       if (tabs.length) {
         this.tabId = tabs[0].id;
         this.pageUrl = tabs[0].url;
-        chrome.browserAction.getTitle({tabId: this.tabId}, (result) => {
+        chrome.action.getTitle({tabId: this.tabId}, (result) => {
           this.recording = (result.indexOf("Recording:") >= 0);
         });
 
@@ -205,7 +205,7 @@ class RecPopup extends LitElement
   }
 
   getHomePage() {
-    return chrome.runtime.getURL("replay/index.html");
+    return chrome.runtime.getURL("index.html");
   }
 
   get extRoot() {

src/static/brave-ipfs.json

@@ -0,0 +1,68 @@
+[
+  {
+    "id": 10,
+    "priority": 2,
+    "action": {
+      "type": "modifyHeaders",
+      "requestHeaders": [
+        { "header": "Origin", "operation": "set", "value": "http://localhost:5001" }
+      ]
+    },
+    "condition": { "urlFilter": "localhost:5001", "resourceTypes": ["xmlhttprequest"] }
+  },
+  {
+    "id": 1,
+    "priority": 2,
+    "action": {
+      "type": "modifyHeaders",
+      "requestHeaders": [
+        { "header": "Origin", "operation": "set", "value": "http://localhost:45001" }
+      ]
+    },
+    "condition": { "urlFilter": "localhost:45001", "resourceTypes": ["xmlhttprequest"] }
+  },
+  {
+    "id": 2,
+    "priority": 2,
+    "action": {
+      "type": "modifyHeaders",
+      "requestHeaders": [
+        { "header": "Origin", "operation": "set", "value": "http://localhost:45002" }
+      ]
+    },
+    "condition": { "urlFilter": "localhost:45002", "resourceTypes": ["xmlhttprequest"] }
+  },
+  {
+    "id": 3,
+    "priority": 2,
+    "action": {
+      "type": "modifyHeaders",
+      "requestHeaders": [
+        { "header": "Origin", "operation": "set", "value": "http://localhost:45003" }
+      ]
+    },
+    "condition": { "urlFilter": "localhost:45003", "resourceTypes": ["xmlhttprequest"] }
+  },
+  {
+    "id": 4,
+    "priority": 2,
+    "action": {
+      "type": "modifyHeaders",
+      "requestHeaders": [
+        { "header": "Origin", "operation": "set", "value": "http://localhost:45004" }
+      ]
+    },
+    "condition": { "urlFilter": "localhost:45004", "resourceTypes": ["xmlhttprequest"] }
+  },
+  {
+    "id": 5,
+    "priority": 2,
+    "action": {
+      "type": "modifyHeaders",
+      "requestHeaders": [
+        { "header": "Origin", "operation": "set", "value": "http://localhost:45005" }
+      ]
+    },
+    "condition": { "urlFilter": "localhost:45005", "resourceTypes": ["xmlhttprequest"] }
+  }
+]

src/sw/main.js

@@ -2,15 +2,15 @@ import { SWReplay } from "@webrecorder/wabac/src/swmain";
 
 import { ExtAPI, RecordingCollections } from "@webrecorder/awp-sw";
 
-import REC_INDEX_HTML from "../static/replay/index.html";
+import REC_INDEX_HTML from "../static/index.html";
 import RWP_INDEX_HTML from "replaywebpage/index.html";
 
 import { WorkerLoader } from "@webrecorder/wabac/src/loaders";
 
 if (self.registration) {
   const defaultConfig = {
     injectScripts: ["/ruffle/ruffle.js"],
-    baseUrlSourcePrefix: "/replay/index.html",
+    baseUrlSourcePrefix: "/index.html",
     convertPostToGet: true
   };
 

webpack.config.js

@@ -108,7 +108,7 @@ const electronPreloadConfig = (/*env, argv*/) => {
 
 
 // ===========================================================================
-function sharedBuild(outputPath, {plugins = [], copy = [], entry = {}, extra = {}, flat = false} = {}) {
+function sharedBuild(outputPath, {plugins = [], copy = [], entry = {}, extra = {}} = {}) {
   if (copy.length) {
     plugins.push(new CopyPlugin({patterns: copy}));
   }
@@ -125,21 +125,7 @@ function sharedBuild(outputPath, {plugins = [], copy = [], entry = {}, extra = {
     //resolve: {fallback},
     output: {
       path: outputPath,
-      filename: (chunkData) => {
-        const name = "[name].js";
-        const replayName = "./replay/" + name;
-
-        switch (chunkData.chunk.name) {
-        case "ui":
-          return flat ? name : replayName;
-
-        case "sw":
-          return replayName;
-
-        default:
-          return name;
-        }
-      },
+      filename: "[name].js",
       libraryTarget: "global",
       globalObject: "self"
     },