Convert to Manifest V3 (#136)

ikreymer · web-flow · commit ef2adcc647c0 · 2024-06-03T18:13:02.000-07:00
- the extension is now served from chrome-extension://<id>/index.html instead of chrome-extension://<id>/replay/index.html as the service worker registration is no longer needed. - Added check to uninstall old service worker from ./replay/sw.js as new service worker is served from ./bg.js - sw registration removed (unless in embed mode), now registered automatically - CSP disabling allows for PDF text extraction + ruffle to work as before, and still needed for replay - remove brave IPFS support, regular IPFS support via auto-js-ipfs remains, including custom serialization via ipld/car - dependencies: update to latest awp-sw - embed fixes: fix window size, remove dist files from git, use http-server to serve embed page. Fixes #131
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/index.html b/src/static/index.html
diff --git a/src/static/replayIcon.png b/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) => {
diff --git a/webpack.config.js b/webpack.config.js
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -75,12 +75,12 @@ class AppRecPopup extends RecPopup`
`75`	`75`	`}`
`76`	`76`
`77`	`77`	`getHomePage() {`
`78`		`- return "replay/index.html";`
	`78`	`+ return "index.html";`
`79`	`79`	`}`
`80`	`80`
`81`	`81`	`get extRoot() {`
`82`	`82`	`return "";`
`83`	`83`	`}`
`84`	`84`	`}`
`85`	`85`
`86`		`-customElements.define("wr-app-popup", AppRecPopup);`
	`86`	`+customElements.define("wr-app-popup", AppRecPopup);`
Original file line number	Diff line number	Diff line change
`@@ -92,7 +92,7 @@ class ElectronRecorderApp extends ElectronReplayApp`
`92`	`92`	`}`
`93`	`93`
`94`	`94`	`get mainWindowUrl() {`
`95`		`- return "replay/index.html";`
	`95`	`+ return "index.html";`
`96`	`96`	`}`
`97`	`97`
`98`	`98`	`createMainWindow(argv) {`