electron app:

- switch back to <webview> instead of browser window for recording window to avoid crash on pages with iframes
- rename locationbar.js -> rec-window.js, load app-popup in same window
- rec-window uses context isolation for messaging
- always leave space for icon, to avoid weird resize
- move popup.js to base src from ext
general:
- ui: start recording modal: dropdown uses native select, show current URL as default if starting from replay
- recorder: send request headers, not response headers for async fetch!
bump to 0.5.8

Author: ikreymer

package.json

@@ -1,13 +1,12 @@
 {
   "name": "ArchiveWeb.page",
-  "version": "0.5.7",
+  "version": "0.5.8",
   "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": {
-    "@electron/remote": "^1.0.2",
     "@fortawesome/fontawesome-free": "^5.13.0",
     "@webrecorder/wabac": "github:webrecorder/wabac.js",
     "bulma": "^0.9.1",

src/electron/app-popup.html

@@ -1,5 +1,5 @@
-import { ipcRenderer } from "electron";
-import { RecPopup } from "../ext/popup";
+//import { ipcRenderer } from "electron";
+import { RecPopup } from "../popup";
 
 import { CollectionLoader } from '@webrecorder/wabac/src/loaders';
 import { listAllMsg } from "../utils";
@@ -13,14 +13,17 @@ class AppRecPopup extends RecPopup
 
     this.collLoader = new CollectionLoader();
 
-    this.tabId = window.location.hash && Number(window.location.hash.slice(1));
+    //this.tabId = 0;//window.location.hash && Number(window.location.hash.slice(1));
 
     this.allowCreate = false;
+
+    this.msg = null;
   }
 
   static get properties() {
     return {
-      ...RecPopup.properties
+      ...RecPopup.properties,
+      msg: { type: Object },
     }
   }
 
@@ -32,10 +35,18 @@ class AppRecPopup extends RecPopup
     });
   }
 
+  updated(changedProperties) {
+    super.updated(changedProperties);
+
+    if (changedProperties.has("msg")) {
+      this.onMessage(this.msg);
+    }
+  }
+
   registerMessages() {
-    ipcRenderer.on("popup", (event, message) => {
-      this.onMessage(message);
-    });
+    // ipcRenderer.on("popup", (event, message) => {
+    //   this.onMessage(message);
+    // });
   }
 
   sendMessage(message) {
@@ -44,7 +55,8 @@ class AppRecPopup extends RecPopup
       return;
     }
 
-    ipcRenderer.send("popup-msg-" + this.tabId, message);
+    //ipcRenderer.send("popup-msg-" + this.tabId, message);
+    this.dispatchEvent(new CustomEvent("send-msg", {detail: message}));
   }
 
   async makeNewColl(message) {

src/electron/app-popup.js

@@ -1,4 +1,4 @@
-import {app, session, BrowserWindow, BrowserView, ipcMain, dialog} from 'electron';
+import {app, session, BrowserWindow, BrowserView, ipcMain, dialog, autoUpdater} from 'electron';
 import { ElectronRecorder } from './electron-recorder';
 
 import { ElectronReplayApp, STATIC_PREFIX } from 'replaywebpage/src/electron-replay-app';
@@ -9,9 +9,13 @@ import { PassThrough } from 'stream';
 import fs from 'fs';
 import util from 'util';
 
+
 import { checkPins, ipfsAddWithReplay, ipfsUnpinAll } from '../utils';
 
 
+app.commandLine.appendSwitch('disable-features', 'CrossOriginOpenerPolicy');
+
+
 // ===========================================================================
 class ElectronRecorderApp extends ElectronReplayApp
 {
@@ -55,7 +59,7 @@ class ElectronRecorderApp extends ElectronReplayApp
       this.ipfsUnpin(event, reqId, pinList);
     });
 
-    require('@electron/remote/main').initialize();
+    //require('@electron/remote/main').initialize();
 
     super.onAppReady();
   }
@@ -112,73 +116,35 @@ class ElectronRecorderApp extends ElectronReplayApp
 
     const recWindow = new BrowserWindow({
       width: this.screenSize.width,
-      height: this.screenSize.height - 1,
+      height: this.screenSize.height,
       isMaximized: true,
       show: true,
       webPreferences: {
-        enableRemoteModule: true,
-        nodeIntegration: true,
-        contextIsolation: false
-      }
-    });
-
-    const view = new BrowserView({webPreferences: {
-        partition: "persist:wr",
-        plugins: false,
         contextIsolation: true,
+        webviewTag: true,
+        preload: path.join(__dirname, "rec-preload.js")
       }
     });
 
-    const id = view.webContents.id;
-
-    recWindow.loadURL(STATIC_PREFIX + "locbar.html#" + id);
-
-    const HEADER_HEIGHT = 73;
-    recWindow.addBrowserView(view);
-    view.setBounds({ x: 0, y: HEADER_HEIGHT, width: this.screenSize.width, height: this.screenSize.height - HEADER_HEIGHT });
-    view.setAutoResize({width: true, height: true});
-    recWindow.setSize(this.screenSize.width, this.screenSize.height);
-    
-    recWindow.maximize();
-
-    const popupView = new BrowserView({webPreferences: {
-      nodeIntegration: true,
-      contextIsolation: false
-    }});
+    recWindow.webContents.on("did-attach-webview", (event, contents) => {
+      this.initRecorder(recWindow, contents, url, collId, startRec);
+    });
 
-    let popupShown = false;
+    recWindow.loadURL(STATIC_PREFIX + "rec-window.html");
 
-    function setPopupBounds() {
-      const bounds = recWindow.getBounds();
-      popupView.setBounds({ x: bounds.width - 400, y: HEADER_HEIGHT - 22, width: 400, height: 300 });
-      //popupView.webContents.openDevTools();
-    }
+    return recWindow;
+  }
 
-    ipcMain.on("popup-toggle-" + id, (event) => {
-      if (!popupShown) {
-        recWindow.addBrowserView(popupView);
-        setPopupBounds();
-        popupView.webContents.loadURL(STATIC_PREFIX + "app-popup.html#" + id).then(() => {
-          popupView.webContents.send("popup", {
-            type: "status",
-            recording: false,
-            collId,
-            pageUrl: url});
-        });
-      } else {
-        recWindow.removeBrowserView(popupView);
-      }
-      popupShown = !popupShown;
-    });
+  checkUpdates() {
+    autoUpdater.allowPrerelease = true;
+    super.checkUpdates();
+  }
 
-    recWindow.on('resize', (event) => {
-      if (popupShown) {
-        setPopupBounds();
-      }
-    });
+  async initRecorder(recWindow, recWebContents, url, collId, startRec, popupView = null) {
+    const id = recWebContents.id;
 
     const recorder = new ElectronRecorder({
-      recWC: view.webContents,
+      recWC: recWebContents,
       appWC: this.mainWindow.webContents,
       recWindow,
       collId,
@@ -194,7 +160,9 @@ class ElectronRecorderApp extends ElectronReplayApp
       });
     });
 
-    popupView.webContents.on("new-window", (event, url, frameName, disposition, options, additionalFeatures, referrer) => {
+    const newWinContents = popupView ? popupView.webContents : recWindow.webContents;
+
+    newWinContents.on("new-window", (event, url) => {
       event.preventDefault();
       if (url.startsWith(STATIC_PREFIX)) {
         this.mainWindow.loadURL(url);
@@ -206,7 +174,7 @@ class ElectronRecorderApp extends ElectronReplayApp
       switch (msg.type) {
         case "startRecording":
           await recorder.attach();
-          view.webContents.reload();
+          recWebContents.reload();
           break;
 
         case "stopRecording":
@@ -215,37 +183,41 @@ class ElectronRecorderApp extends ElectronReplayApp
       }
     });
 
-    view.webContents.on("new-window", (event, url, frameName, disposition, options, additionalFeatures, referrer) => {
+    recWebContents.on("new-window", (event, url, frameName, disposition, options, additionalFeatures, referrer) => {
       event.preventDefault();
       event.newGuest = this.createRecordWindow(url, collId, startRec);
       console.log("new-window", url, frameName, disposition, options, additionalFeatures, referrer);
     });
 
-    view.webContents.on("destroyed", () => {
+    recWebContents.on("destroyed", () => {
       this.recorders.delete(id);
     });
 
-    (async () => {
-      await view.webContents.loadURL("about:blank");
+    //await recWebContents.loadURL("about:blank");
 
-      view.webContents.clearHistory();
-      this.recorders.set(id, recorder);
-      if (startRec) {
-        await recorder.attach();
-      }
+    recWebContents.clearHistory();
 
-      if (process.env.NODE_ENV === "development") {
-        view.webContents.openDevTools();
-      }
+    this.recorders.set(id, recorder);
+    if (startRec) {
+      await recorder.attach();
+    } else {
+      newWinContents.send("stats", {
+        type: "status",
+        recording: false,
+        collId,
+        pageUrl: url
+      });
+    }
 
-      try {
-        view.webContents.loadURL(url);
-      } catch (e) {
-        console.warn("Load Failed", e);
-      }
-    })();
+    if (process.env.NODE_ENV === "development") {
+      //recWebContents.openDevTools();
+    }
 
-    return recWindow;
+    try {
+      recWebContents.loadURL(url);
+    } catch (e) {
+      console.warn("Load Failed", e);
+    }
   }
 
   async ipfsStart(validPins) {

src/electron/electron-recorder-app.js

@@ -0,0 +1,12 @@
+const { ipcRenderer, contextBridge } = require('electron');
+
+ipcRenderer.on("stats", (event, stats) => {
+  window.postMessage({stats}, window.location.origin);
+});
+
+contextBridge.exposeInMainWorld('archivewebpage', {
+  sendMsg: (id, msg) => {
+    ipcRenderer.send("popup-msg-" + id, msg);
+  }
+});
+

src/electron/rec-preload.js

@@ -3,16 +3,17 @@
 <head>
   <style>
     html, body {
-      width: 100%;
-      height: 73px;
+      width: 100vw;
+      height: 100vh;
       overflow-y: hidden;
       padding: 0px;
       margin: 0px;
+      background-color: white;
     }
   </style>
-  <script src="./locationbar.js"></script>
+  <script src="./rec-window.js"></script>
 </head>
 <body>
-  <wr-rec-location></wr-rec-location>
+  <wr-rec-ui></wr-rec-ui>
 </body>
 </html>