Skip to content

Commit ef2adcc

Browse files
ikreymerikreymer
authored
Convert to Manifest V3 (#136)
- 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
1 parent 39f5a50 commit ef2adcc

20 files changed

+1424
-1647
lines changed

‎README.md

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -26,24 +26,24 @@ To develop ArchiveWeb.page, Node 12+ and Yarn are needed.
2626

2727
The production version of the extension is published to the [Chrome Web Store](https://chrome.google.com/webstore/detail/webrecorder/fpeoodllldobpkbkabpblcfaogecpndd)
2828

29-
For development, the extension can be installed from the `wr-ext` directory as an unpacked extension.
30-
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.
29+
For development, the extension can be built locally and loaded as an unpacked extension.
30+
If you want to make changes to the extension, it should be installed in this way.
3131

32-
1. Clone this repo
32+
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).
3333

34-
2. Open the Chrome Extensions page (chrome://extensions).
34+
3. Open the Chrome Extensions page (chrome://extensions).
3535

36-
3. Choose 'Load Unpacked Extension' and point to the `./wr-ext` directory in your local copy of this repo.
36+
4. Choose 'Load Unpacked Extension' and point to the `./dist/ext` directory in your local copy of this repo.
3737

38-
4. Click the extension icon to show the extension popup, start recording, etc...
38+
5. Click the extension icon to show the extension popup, start archiving, etc...
3939

4040
### Development Workflow
4141

4242
For development, it is recommended to use the dev build of the extension:
4343

4444
1. Run ``yarn install`` and then ``yarn run build-dev``
4545

46-
2. Run ``yarn run start-ext`` -- this will ensure the `wr-ext` directory is rebuilt after any changes to the source.
46+
2. Run ``yarn run start-ext`` -- this will ensure the `dist/ext` directory is rebuilt after any changes to the source.
4747

4848
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.
4949

‎dist/.gitignore

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
*
2+
!.gitignore

‎dist/embed/index.html

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,18 @@
33
<head>
44
<script src="ui.js"></script>
55
<style>
6+
html {
7+
width: 100%;
8+
height: 100%;
9+
display: flex;
10+
}
11+
body {
12+
width: 100%;
13+
}
614
record-web-page {
715
border: 1px solid black;
816
display: flex;
17+
height: 100%;
918
}
1019
</style>
1120
<head>

‎dist/embed/replay/sw.js

Lines changed: 0 additions & 122 deletions
This file was deleted.

‎dist/embed/ui.js

Lines changed: 380 additions & 380 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,16 @@
11
{
22
"name": "@webrecorder/archivewebpage",
33
"productName": "ArchiveWeb.page",
4-
"version": "0.11.4",
4+
"version": "0.12.0",
55
"main": "index.js",
66
"description": "Create Web Archives directly in your browser",
77
"repository": "https://github.com/webrecorder/archiveweb.page",
88
"author": "Webrecorder Software",
99
"license": "AGPL-3.0-or-later",
1010
"dependencies": {
1111
"@fortawesome/fontawesome-free": "^5.13.0",
12-
"@webrecorder/awp-sw": "^0.4.3",
12+
"@ipld/car": "^5.3.1",
13+
"@webrecorder/awp-sw": "^0.4.4",
1314
"@webrecorder/wabac": "^2.18.1",
1415
"auto-js-ipfs": "^2.3.0",
1516
"browsertrix-behaviors": "^0.5.3",
@@ -19,7 +20,6 @@
1920
"hash-wasm": "^4.9.0",
2021
"http-status-codes": "^2.1.4",
2122
"keyword-mark-element": "^0.1.2",
22-
"multiformats": "^10.0.2",
2323
"node-fetch": "2.6.7",
2424
"pretty-bytes": "^5.6.0",
2525
"replaywebpage": "1.8.17",
@@ -56,7 +56,7 @@
5656
"build-dev": "webpack --mode development",
5757
"start-electron": "NODE_ENV=development electron ./dist/electron/electron.js",
5858
"start-ext": "NODE_ENV=development webpack --mode=development --watch",
59-
"start-embed": "webpack serve --mode development",
59+
"start-embed": "yarn run build-dev && cd dist/embed/ && http-server -p 10001",
6060
"pack": "CSC_IDENTITY_AUTO_DISCOVERY=false electron-builder --publish never",
6161
"pack-signed": "electron-builder",
6262
"dist": "yarn run build && yarn run pack",

‎src/electron/app-popup.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -75,12 +75,12 @@ class AppRecPopup extends RecPopup
7575
}
7676

7777
getHomePage() {
78-
return "replay/index.html";
78+
return "index.html";
7979
}
8080

8181
get extRoot() {
8282
return "";
8383
}
8484
}
8585

86-
customElements.define("wr-app-popup", AppRecPopup);
86+
customElements.define("wr-app-popup", AppRecPopup);

‎src/electron/electron-recorder-app.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -92,7 +92,7 @@ class ElectronRecorderApp extends ElectronReplayApp
9292
}
9393

9494
get mainWindowUrl() {
95-
return "replay/index.html";
95+
return "index.html";
9696
}
9797

9898
createMainWindow(argv) {

‎src/embed.html

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,18 @@
33
<head>
44
<script src="ui.js"></script>
55
<style>
6+
html {
7+
width: 100%;
8+
height: 100%;
9+
display: flex;
10+
}
11+
body {
12+
width: 100%;
13+
}
614
record-web-page {
715
border: 1px solid black;
816
display: flex;
17+
height: 100%;
918
}
1019
</style>
1120
<head>

‎src/ext/bg.js

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ const disabledCSPTabs = new Set();
2727
// ===========================================================================
2828

2929
function main() {
30-
chrome.browserAction.setBadgeBackgroundColor({color: "#64e986"});
30+
chrome.action.setBadgeBackgroundColor({color: "#64e986"});
3131

3232
chrome.contextMenus.create({"id": "toggle-rec", "title": "Start Recording", "contexts": ["browser_action"]});
3333
chrome.contextMenus.create({"id": "view-rec", "title": "View Web Archives", "contexts": ["all"]});
@@ -178,7 +178,7 @@ chrome.tabs.onRemoved.addListener((tabId) => {
178178
chrome.contextMenus.onClicked.addListener((info, tab) => {
179179
switch (info.menuItemId) {
180180
case "view-rec":
181-
chrome.tabs.create({ url: chrome.runtime.getURL("replay/index.html") });
181+
chrome.tabs.create({ url: chrome.runtime.getURL("index.html") });
182182
break;
183183

184184
case "toggle-rec":
@@ -296,3 +296,7 @@ async function disableCSPForTab(tabId) {
296296

297297
// ===========================================================================
298298
chrome.runtime.onInstalled.addListener(main);
299+
300+
if (self.importScripts) {
301+
self.importScripts("sw.js");
302+
}

‎src/ext/browser-recorder.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -209,9 +209,9 @@ class BrowserRecorder extends Recorder {
209209
color = "#64e986";
210210
}
211211

212-
chrome.browserAction.setTitle({title, tabId});
213-
chrome.browserAction.setBadgeBackgroundColor({color, tabId});
214-
chrome.browserAction.setBadgeText({text, tabId});
212+
chrome.action.setTitle({title, tabId});
213+
chrome.action.setBadgeBackgroundColor({color, tabId});
214+
chrome.action.setBadgeText({text, tabId});
215215

216216
if (this.port) {
217217
const status = this.getStatusMsg();

‎src/ext/manifest.json

Lines changed: 15 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -2,27 +2,32 @@
22
"name": "Webrecorder ArchiveWeb.page",
33
"description": "Create high-fidelity web archives directly in your browser",
44
"version": "$VERSION",
5+
"permissions": ["debugger", "contextMenus", "tabs", "activeTab", "storage", "unlimitedStorage", "webRequest"],
56
"content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'",
6-
"permissions": ["debugger", "contextMenus", "tabs", "activeTab", "storage", "unlimitedStorage", "webRequest", "webRequestBlocking", "<all_urls>"],
77
"background": {
8-
"scripts": ["bg.js"],
9-
"persistent": true
8+
"service_worker": "bg.js"
109
},
1110
"icons": {
1211
"32": "$ICON",
1312
"128": "$ICON"
1413
},
15-
"browser_action": {
14+
"action": {
1615
"default_icon": {
1716
"32": "$ICON"
1817
},
1918
"default_title": "Webrecorder ArchiveWeb.page",
2019
"default_popup": "popup.html"
2120
},
22-
"web_accessible_resources": [
23-
"pdf/*",
24-
"replay/*",
25-
"ruffle/*"
26-
],
27-
"manifest_version": 2
21+
"web_accessible_resources": [{
22+
"resources": [
23+
"pdf/*",
24+
"ruffle/*"
25+
],
26+
"matches": ["*://*/*"]
27+
}],
28+
"host_permissions": ["*://*/*"],
29+
"content_security_policy": {
30+
"extension_pages": "script-src 'self' 'wasm-unsafe-eval'; object-src 'self'"
31+
},
32+
"manifest_version": 3
2833
}

‎src/popup.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -108,7 +108,7 @@ class RecPopup extends LitElement
108108
if (tabs.length) {
109109
this.tabId = tabs[0].id;
110110
this.pageUrl = tabs[0].url;
111-
chrome.browserAction.getTitle({tabId: this.tabId}, (result) => {
111+
chrome.action.getTitle({tabId: this.tabId}, (result) => {
112112
this.recording = (result.indexOf("Recording:") >= 0);
113113
});
114114

@@ -205,7 +205,7 @@ class RecPopup extends LitElement
205205
}
206206

207207
getHomePage() {
208-
return chrome.runtime.getURL("replay/index.html");
208+
return chrome.runtime.getURL("index.html");
209209
}
210210

211211
get extRoot() {

‎src/static/brave-ipfs.json

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
[
2+
{
3+
"id": 10,
4+
"priority": 2,
5+
"action": {
6+
"type": "modifyHeaders",
7+
"requestHeaders": [
8+
{ "header": "Origin", "operation": "set", "value": "http://localhost:5001" }
9+
]
10+
},
11+
"condition": { "urlFilter": "localhost:5001", "resourceTypes": ["xmlhttprequest"] }
12+
},
13+
{
14+
"id": 1,
15+
"priority": 2,
16+
"action": {
17+
"type": "modifyHeaders",
18+
"requestHeaders": [
19+
{ "header": "Origin", "operation": "set", "value": "http://localhost:45001" }
20+
]
21+
},
22+
"condition": { "urlFilter": "localhost:45001", "resourceTypes": ["xmlhttprequest"] }
23+
},
24+
{
25+
"id": 2,
26+
"priority": 2,
27+
"action": {
28+
"type": "modifyHeaders",
29+
"requestHeaders": [
30+
{ "header": "Origin", "operation": "set", "value": "http://localhost:45002" }
31+
]
32+
},
33+
"condition": { "urlFilter": "localhost:45002", "resourceTypes": ["xmlhttprequest"] }
34+
},
35+
{
36+
"id": 3,
37+
"priority": 2,
38+
"action": {
39+
"type": "modifyHeaders",
40+
"requestHeaders": [
41+
{ "header": "Origin", "operation": "set", "value": "http://localhost:45003" }
42+
]
43+
},
44+
"condition": { "urlFilter": "localhost:45003", "resourceTypes": ["xmlhttprequest"] }
45+
},
46+
{
47+
"id": 4,
48+
"priority": 2,
49+
"action": {
50+
"type": "modifyHeaders",
51+
"requestHeaders": [
52+
{ "header": "Origin", "operation": "set", "value": "http://localhost:45004" }
53+
]
54+
},
55+
"condition": { "urlFilter": "localhost:45004", "resourceTypes": ["xmlhttprequest"] }
56+
},
57+
{
58+
"id": 5,
59+
"priority": 2,
60+
"action": {
61+
"type": "modifyHeaders",
62+
"requestHeaders": [
63+
{ "header": "Origin", "operation": "set", "value": "http://localhost:45005" }
64+
]
65+
},
66+
"condition": { "urlFilter": "localhost:45005", "resourceTypes": ["xmlhttprequest"] }
67+
}
68+
]

‎src/static/replay/index.html renamed to ‎src/static/index.html

File renamed without changes.

‎src/static/replay/icon.png renamed to ‎src/static/replayIcon.png

File renamed without changes.

‎src/sw/main.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { SWReplay } from "@webrecorder/wabac/src/swmain";
22

33
import { ExtAPI, RecordingCollections } from "@webrecorder/awp-sw";
44

5-
import REC_INDEX_HTML from "../static/replay/index.html";
5+
import REC_INDEX_HTML from "../static/index.html";
66
import RWP_INDEX_HTML from "replaywebpage/index.html";
77

88
import { WorkerLoader } from "@webrecorder/wabac/src/loaders";

‎src/ui/app.js

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -141,6 +141,33 @@ class ArchiveWebApp extends ReplayWebApp
141141
}
142142
}
143143

144+
async checkDoubleSW() {
145+
const regs = await navigator.serviceWorker.getRegistrations();
146+
for (const reg of regs) {
147+
if (reg.active && reg.active.scriptURL.endsWith("/replay/sw.js")) {
148+
if (await reg.unregister()) {
149+
self.location.reload();
150+
}
151+
}
152+
}
153+
}
154+
155+
firstUpdated() {
156+
this.embed = this.pageParams.get("embed") || "";
157+
158+
if (this.embed) {
159+
return super.firstUpdated();
160+
}
161+
162+
this.checkDoubleSW();
163+
164+
this.initRoute();
165+
166+
window.addEventListener("popstate", () => {
167+
this.initRoute();
168+
});
169+
}
170+
144171
handleMessages() {
145172
// support upload
146173
window.addEventListener("message", async (event) => {

0 commit comments

Comments
 (0)