webrecorder · ikreymer · Jun 4, 2024 · Jan 19, 2023 · Jun 17, 2023 · Jun 17, 2023
diff --git a/README.md b/README.md
@@ -26,24 +26,24 @@ To develop ArchiveWeb.page, Node 12+ and Yarn are needed.
 
 The production version of the extension is published to the [Chrome Web Store](https://chrome.google.com/webstore/detail/webrecorder/fpeoodllldobpkbkabpblcfaogecpndd)
 
-For development, the extension can be installed from the `wr-ext` directory as an unpacked extension.
-If you want to make changes to the extension, it should be installed in this way. This will be a different version than the production version of the extension.
+For development, the extension can be built locally and loaded as an unpacked extension.
+If you want to make changes to the extension, it should be installed in this way.
 
-1. Clone this repo
+1. Clone this repo. Run `yarn install; yarn build-dev`. (You can also run `yarn build` to build the production version but it may be harder to debug).
 
-2. Open the Chrome Extensions page (chrome://extensions).
+3. Open the Chrome Extensions page (chrome://extensions).
 
-3. Choose 'Load Unpacked Extension' and point to the `./wr-ext` directory in your local copy of this repo.
+4. Choose 'Load Unpacked Extension' and point to the `./dist/ext` directory in your local copy of this repo.
 
-4. Click the extension icon to show the extension popup, start recording, etc...
+5. Click the extension icon to show the extension popup, start archiving, etc...
 
 ### Development Workflow
 
 For development, it is recommended to use the dev build of the extension:
 
 1. Run ``yarn install`` and then ``yarn run build-dev``
 
-2. Run ``yarn run start-ext`` -- this will ensure the `wr-ext` directory is rebuilt after any changes to the source.
+2. Run ``yarn run start-ext`` -- this will ensure the `dist/ext` directory is rebuilt after any changes to the source.
 
 3. After making changes, the extension still needs to be reloaded in the browser. From the Chrome extensions page, click the reload button to load the latest version.
 

diff --git a/dist/.gitignore b/dist/.gitignore
@@ -0,0 +1,2 @@
+*
+!.gitignore
diff --git a/dist/embed/index.html b/dist/embed/index.html
@@ -3,9 +3,18 @@
 <head>
 <script src="ui.js"></script>
 <style>
+html {
+  width: 100%;
+  height: 100%;
+  display: flex;
+}
+body {
+  width: 100%;
+}
 record-web-page {
   border: 1px solid black;
   display: flex;
+  height: 100%;
 }
 </style>
 <head>

diff --git a/dist/embed/replay/sw.js b/dist/embed/replay/sw.js
diff --git a/dist/embed/ui.js b/dist/embed/ui.js
diff --git a/package.json b/package.json
@@ -1,15 +1,16 @@
 {
   "name": "@webrecorder/archivewebpage",
   "productName": "ArchiveWeb.page",
-  "version": "0.11.4",
+  "version": "0.12.0",
   "main": "index.js",
   "description": "Create Web Archives directly in your browser",
   "repository": "https://github.com/webrecorder/archiveweb.page",
   "author": "Webrecorder Software",
   "license": "AGPL-3.0-or-later",
   "dependencies": {
     "@fortawesome/fontawesome-free": "^5.13.0",
-    "@webrecorder/awp-sw": "^0.4.3",
+    "@ipld/car": "^5.3.1",
+    "@webrecorder/awp-sw": "^0.4.4",
     "@webrecorder/wabac": "^2.18.1",
     "auto-js-ipfs": "^2.3.0",
     "browsertrix-behaviors": "^0.5.3",
@@ -19,7 +20,6 @@
     "hash-wasm": "^4.9.0",
     "http-status-codes": "^2.1.4",
     "keyword-mark-element": "^0.1.2",
-    "multiformats": "^10.0.2",
     "node-fetch": "2.6.7",
     "pretty-bytes": "^5.6.0",
     "replaywebpage": "1.8.17",
@@ -56,7 +56,7 @@
     "build-dev": "webpack --mode development",
     "start-electron": "NODE_ENV=development electron ./dist/electron/electron.js",
     "start-ext": "NODE_ENV=development webpack --mode=development --watch",
-    "start-embed": "webpack serve --mode development",
+    "start-embed": "yarn run build-dev && cd dist/embed/ && http-server -p 10001",
     "pack": "CSC_IDENTITY_AUTO_DISCOVERY=false electron-builder --publish never",
     "pack-signed": "electron-builder",
     "dist": "yarn run build && yarn run pack",

diff --git a/src/electron/app-popup.js b/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);
diff --git a/src/electron/electron-recorder-app.js b/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) {

diff --git a/src/embed.html b/src/embed.html
@@ -3,9 +3,18 @@
 <head>
 <script src="ui.js"></script>
 <style>
+html {
+  width: 100%;
+  height: 100%;
+  display: flex;
+}
+body {
+  width: 100%;
+}
 record-web-page {
   border: 1px solid black;
   display: flex;
+  height: 100%;
 }
 </style>
 <head>

diff --git a/src/ext/bg.js b/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");
+}
diff --git a/src/ext/browser-recorder.js b/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();

diff --git a/src/ext/manifest.json b/src/ext/manifest.json
@@ -2,27 +2,32 @@
   "name": "Webrecorder ArchiveWeb.page",
   "description": "Create high-fidelity web archives directly in your browser",
   "version": "$VERSION",
+  "permissions": ["debugger", "contextMenus", "tabs", "activeTab", "storage", "unlimitedStorage", "webRequest"],
   "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'",
-  "permissions": ["debugger", "contextMenus", "tabs", "activeTab", "storage", "unlimitedStorage", "webRequest", "webRequestBlocking", "<all_urls>"],
   "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
+  "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
 }
diff --git a/src/popup.js b/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() {

diff --git a/src/static/brave-ipfs.json b/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"] }
+  }
+]
diff --git a/src/static/replay/index.html → src/static/index.html b/src/static/replay/index.html → src/static/index.html
diff --git a/src/static/replay/icon.png → src/static/replayIcon.png b/src/static/replay/icon.png → src/static/replayIcon.png
diff --git a/src/sw/main.js b/src/sw/main.js
@@ -2,7 +2,7 @@ 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";

diff --git a/src/ui/app.js b/src/ui/app.js
@@ -141,6 +141,33 @@ class ArchiveWebApp extends ReplayWebApp
     }
   }
 
+  async checkDoubleSW() {
+    const regs = await navigator.serviceWorker.getRegistrations();
+    for (const reg of regs) {
+      if (reg.active && reg.active.scriptURL.endsWith("/replay/sw.js")) {
+        if (await reg.unregister()) {
+          self.location.reload();
+        }
+      }
+    }
+  }
+
+  firstUpdated() {
+    this.embed = this.pageParams.get("embed") || "";
+
+    if (this.embed) {
+      return super.firstUpdated();
+    }
+
+    this.checkDoubleSW();
+
+    this.initRoute();
+
+    window.addEventListener("popstate", () => {
+      this.initRoute();
+    });
+  } 
+
   handleMessages() {
     // support upload
     window.addEventListener("message", async (event) => {