deps: update to latest wabac.js, fixes instagram / facebook (via wabac.js 2.22.16)

deps: update to latest RWP, browsertrix-behaviors, fixes Instagram behavior
better non-detectability features:
- don't use Runtime.enable, not needed!
- Make ruffle injection optional, enable via settings

Author: ikreymer

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@webrecorder/archivewebpage",
   "productName": "ArchiveWeb.page",
-  "version": "0.14.2",
+  "version": "0.14.3",
   "main": "index.js",
   "description": "Create Web Archives directly in your browser",
   "repository": {
@@ -14,9 +14,9 @@
     "@fortawesome/fontawesome-free": "^5.13.0",
     "@ipld/car": "^5.3.1",
     "@webrecorder/awp-sw": "^0.5.3",
-    "@webrecorder/wabac": "^2.20.8",
+    "@webrecorder/wabac": "github:webrecorder/wabac.js#rewrite-pad",
     "auto-js-ipfs": "^2.3.0",
-    "browsertrix-behaviors": "^0.6.4",
+    "browsertrix-behaviors": "^0.8.4",
     "btoa": "^1.2.1",
     "bulma": "^0.9.3",
     "client-zip": "^2.2.2",
@@ -26,12 +26,12 @@
     "node-fetch": "2.6.7",
     "pdfjs-dist": "2.2.228",
     "pretty-bytes": "^5.6.0",
-    "replaywebpage": "^2.2.5",
+    "replaywebpage": "^2.3.6",
     "stream-browserify": "^3.0.0",
     "tsconfig-paths-webpack-plugin": "^4.1.0",
     "unused-filename": "^4.0.1",
     "uuid": "^8.3.2",
-    "warcio": "^2.4.2"
+    "warcio": "^2.4.4"
   },
   "devDependencies": {
     "@typescript-eslint/eslint-plugin": "^6.15.0",
@@ -58,13 +58,13 @@
     "ts-loader": "^9.5.1",
     "ts-migrate": "^0.1.35",
     "typescript": "^5.3.3",
-    "webpack": "^5.91.0",
+    "webpack": "^5.99.7",
     "webpack-cli": "^5.1.4",
     "webpack-dev-server": "^5.0.4",
     "webpack-extension-reloader": "^1.1.4"
   },
   "resolutions": {
-    "@webrecorder/wabac": "^2.20.8"
+    "@webrecorder/wabac": "^2.22.15"
   },
   "files": [
     "src/",

src/localstorage.ts

@@ -19,7 +19,7 @@ export function setLocalOption(name, value) {
 }
 
 // ===========================================================================
-export function getLocalOption(name: string) : Promise<string | null> {
+export function getLocalOption(name: string): Promise<string | null> {
   // @ts-expect-error - TS2339 - Property 'chrome' does not exist on type 'Window & typeof globalThis'. | TS2339 - Property 'chrome' does not exist on type 'Window & typeof globalThis'.
   if (self.chrome?.storage) {
     return new Promise<string>((resolve) => {

src/recorder.ts

@@ -22,8 +22,7 @@ import {
 } from "./consts";
 import { getLocalOption } from "./localstorage";
 
-// @ts-expect-error - TS2554 - Expected 0 arguments, but got 1.
-const encoder = new TextEncoder("utf-8");
+const encoder = new TextEncoder();
 
 const MAX_CONCURRENT_FETCH = 6;
 
@@ -58,6 +57,7 @@ type FetchEntry = {
 class Recorder {
   archiveStorage = false;
   archiveCookies = false;
+  archiveFlash = false;
 
   _fetchQueue: FetchEntry[] = [];
 
@@ -155,8 +155,9 @@ class Recorder {
   }
 
   async initOpts() {
-    this.archiveCookies = (await getLocalOption("archiveCookies") === "1");
-    this.archiveStorage = (await getLocalOption("archiveStorage") === "1");
+    this.archiveCookies = (await getLocalOption("archiveCookies")) === "1";
+    this.archiveStorage = (await getLocalOption("archiveStorage")) === "1";
+    this.archiveFlash = (await getLocalOption("archiveFlash")) === "1";
   }
 
   // @ts-expect-error - TS7006 - Parameter 'autorun' implicitly has an 'any' type.
@@ -190,8 +191,8 @@ class Recorder {
       this.behaviorInitStr
     });
 
-    window.addEventListener("beforeunload", () => {});` +
-      this.getFlashInjectScript()
+    window.addEventListener("beforeunload", () => {});\n` +
+      (this.archiveFlash ? this.getFlashInjectScript() : "")
     );
   }
 
@@ -550,8 +551,6 @@ class Recorder {
 
     await this.send("Page.enable");
 
-    await this.send("Runtime.enable");
-
     await this.send("DOMSnapshot.enable");
 
     await this.initPixRatio();
@@ -632,7 +631,6 @@ class Recorder {
 
   async sessionClose(sessions = []) {
     await this.send("Page.disable");
-    await this.send("Runtime.disable");
     await this.send("DOMSnapshot.disable");
 
     await this.send("Debugger.disable");

src/ui/app.ts

@@ -58,6 +58,9 @@ class ArchiveWebApp extends ReplayWebApp {
 
   archiveCookies: boolean | null = null;
   archiveStorage: boolean | null = null;
+  archiveFlash: boolean | null = null;
+
+  showIpfsShareFailed = false;
 
   constructor() {
     super();
@@ -106,7 +109,7 @@ class ArchiveWebApp extends ReplayWebApp {
   }
 
   async initOpts() {
-    this.autorun = (await getLocalOption("autorunBehaviors") === "1");
+    this.autorun = (await getLocalOption("autorunBehaviors")) === "1";
 
     const archiveCookies = await getLocalOption("archiveCookies");
 
@@ -118,7 +121,9 @@ class ArchiveWebApp extends ReplayWebApp {
       this.archiveCookies = archiveCookies === "1";
     }
 
-    this.archiveStorage = await getLocalOption("archiveStorage") === "1";
+    this.archiveStorage = (await getLocalOption("archiveStorage")) === "1";
+
+    this.archiveFlash = (await getLocalOption("archiveFlash")) === "1";
   }
 
   async doBtrixLogin() {
@@ -526,10 +531,7 @@ class ArchiveWebApp extends ReplayWebApp {
         @show-start=${this.onShowStart}
         @show-import=${this.onShowImport}
         @colls-updated=${this.onCollsLoaded}
-        @ipfs-share-failed=${
-          // @ts-expect-error - TS2339 - Property 'showIpfsShareFailed' does not exist on type 'ArchiveWebApp'.
-          () => (this.showIpfsShareFailed = true)
-        }
+        @ipfs-share-failed=${() => (this.showIpfsShareFailed = true)}
         @do-upload=${
           // @ts-expect-error - TS2339 - Property 'uploadCollOpts' does not exist on type 'ArchiveWebApp'.
           (e) => (this.uploadCollOpts = e.detail)
@@ -558,10 +560,7 @@ class ArchiveWebApp extends ReplayWebApp {
       // @ts-expect-error - TS2339 - Property 'showSettings' does not exist on type 'ArchiveWebApp'.
       this.showSettings ? this.renderSettingsModal() : ""
     }
-    ${
-      // @ts-expect-error - TS2339 - Property 'showIpfsShareFailed' does not exist on type 'ArchiveWebApp'.
-      this.showIpfsShareFailed ? this.renderIPFSShareFailedModal() : ""
-    }
+    ${this.showIpfsShareFailed ? this.renderIPFSShareFailedModal() : ""}
     ${
       // @ts-expect-error - TS2339 - Property 'uploadCollOpts' does not exist on type 'ArchiveWebApp'. | TS2339 - Property 'btrixOpts' does not exist on type 'ArchiveWebApp'.
       this.uploadCollOpts && this.btrixOpts ? this.renderBtrixUploadModal() : ""
@@ -778,11 +777,8 @@ class ArchiveWebApp extends ReplayWebApp {
   }
 
   renderIPFSShareFailedModal() {
-    return html` <wr-modal
-      @modal-closed="${
-        // @ts-expect-error - TS2339 - Property 'showIpfsShareFailed' does not exist on type 'ArchiveWebApp'.
-        () => (this.showIpfsShareFailed = false)
-      }"
+    return html`<wr-modal
+      @modal-closed="${() => (this.showIpfsShareFailed = false)}"
       title="IPFS Connection Failed"
     >
       <div>
@@ -1011,7 +1007,7 @@ class ArchiveWebApp extends ReplayWebApp {
           <ul>
             <li class="${this.settingsTab === "prefs" ? "is-active" : ""}">
               <a @click=${() => (this.settingsTab = "prefs")}
-                >Archiving Privacy</a
+                >Archiving Settings</a
               >
             </li>
             <li
@@ -1032,9 +1028,24 @@ class ArchiveWebApp extends ReplayWebApp {
           @submit="${this.onSaveSettings}"
         >
           ${this.settingsTab === "prefs"
-            ? html` <fieldset>
+            ? html`<fieldset>
                 <div class="is-size-6">
-                  Control archiving of sensitive browser data.
+                  Control archiving of optional extensions and sensitive browser
+                  data.
+                </div>
+                <div class="field is-size-6 mt-4">
+                  <input
+                    name="prefArchiveFlash"
+                    id="archiveFlash"
+                    class="checkbox"
+                    type="checkbox"
+                    ?checked="${this.archiveFlash}"
+                  /><span class="ml-1">Enable Ruffle for Flash</span>
+                  <p class="is-size-7 mt-1">
+                    Enables archiving Flash content via injecting the Ruffle
+                    emulator into the page. May cause issues with some pages,
+                    enable only when archiving websites that contain Flash.
+                  </p>
                 </div>
                 <div class="field is-size-6 mt-4">
                   <input
@@ -1432,21 +1443,21 @@ class ArchiveWebApp extends ReplayWebApp {
 
     const archiveCookies = this.renderRoot.querySelector("#archiveCookies");
     const archiveStorage = this.renderRoot.querySelector("#archiveStorage");
+    const archiveFlash = this.renderRoot.querySelector("#archiveFlash");
 
     if (archiveCookies) {
       this.archiveCookies = (archiveCookies as HTMLInputElement).checked;
-      await setLocalOption(
-        "archiveCookies",
-        this.archiveCookies ? "1" : "0",
-      );
+      await setLocalOption("archiveCookies", this.archiveCookies ? "1" : "0");
     }
 
     if (archiveStorage) {
       this.archiveStorage = (archiveStorage as HTMLInputElement).checked;
-      await setLocalOption(
-        "archiveStorage",
-        this.archiveStorage ? "1" : "0",
-      );
+      await setLocalOption("archiveStorage", this.archiveStorage ? "1" : "0");
+    }
+
+    if (archiveFlash) {
+      this.archiveFlash = (archiveFlash as HTMLInputElement).checked;
+      await setLocalOption("archiveFlash", this.archiveFlash ? "1" : "0");
     }
 
     localStorage.setItem("settingsTab", this.settingsTab);

src/ui/coll.ts

@@ -205,7 +205,7 @@ class WrRecColl extends Item {
                 class="button is-primary-new"
                 role="button"
                 download="my-archive.wacz"
-                href="${this.downloadUrl}"
+                href="${this.getDownloadUrl()}"
                 target="_blank"
                 >Download</a
               >
@@ -251,7 +251,7 @@ class WrRecColl extends Item {
     if (window.parent !== window) {
       window.parent.postMessage({
         type: "awp-finish",
-        downloadUrl: this.downloadUrl,
+        downloadUrl: this.getDownloadUrl(),
       });
     }
   }
@@ -280,7 +280,7 @@ class WrRecColl extends Item {
     super.navigateTo(value);
   }
 
-  get downloadUrl() {
+  getDownloadUrl() {
     return new URL(
       `${apiPrefix}/c/${this.item}/dl?format=wacz&pages=all`,
       window.location.href,