Revamp extensions engine, adblock, and update to electron v13

package.json

@@ -1,6 +1,6 @@
 {
   "name": "skye",
-  "version": "6.0.1-nightly.1",
+  "version": "6.0.2-nightly.1",
   "sideEffects": false,
   "description": "Extensible, fast and innovative web browser with material UI.",
   "keywords": [
@@ -39,7 +39,7 @@
   },
   "devDependencies": {
     "@babel/core": "^7.13.15",
-    "@cliqz/adblocker-electron": "1.20.4",
+    "@cliqz/adblocker-electron": "1.22.2",
     "@electron/remote": "^1.1.0",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.4.3",
     "@types/animejs": "^3.1.3",
@@ -63,7 +63,7 @@
     "concurrently": "^6.0.2",
     "copy-webpack-plugin": "^8.1.1",
     "cross-env": "7.0.3",
-    "electron": "12.0.4",
+    "electron": "13.1.6",
     "electron-builder": "22.10.5",
     "electron-extensions": "^7.0.0-beta.3",
     "electron-updater": "4.3.8",
@@ -104,6 +104,7 @@
     "webpack-merge": "^5.7.3"
   },
   "dependencies": {
+    "electron-chrome-extensions": "^3.8.0",
     "jwt-decode": "^3.1.2"
   }
 }

src/main/application.ts

@@ -19,11 +19,11 @@ export class Application {
 
   public sessions: SessionsService;
 
-  public settings = new Settings();
+  public settings: Settings;
 
-  public storage = new StorageService(this.settings);
+  public storage: StorageService;
 
-  public windows = new WindowsService();
+  public windows: WindowsService;
 
   public dialogs = new DialogsService();
 
@@ -95,13 +95,16 @@ export class Application {
 
     checkFiles();
 
+    this.sessions = new SessionsService();
+    this.windows = new WindowsService(this.sessions);
+    this.settings = new Settings();
+    this.storage = new StorageService(this.settings);
+
     this.storage.run();
     this.dialogs.run();
 
     this.windows.open();
 
-    this.sessions = new SessionsService();
-
     Menu.setApplicationMenu(getMainMenu());
     runAutoUpdaterService();
 

src/main/services/adblock.ts

@@ -1,4 +1,4 @@
-import { existsSync, promises as fs } from 'fs';
+import { promises as fs } from 'fs';
 import { resolve, join } from 'path';
 import fetch from 'node-fetch';
 
@@ -13,43 +13,11 @@ const PRELOAD_PATH = join(__dirname, './preload.js');
 
 const loadFilters = async () => {
   const path = resolve(getPath('adblock/cache.dat'));
-
-  const downloadFilters = async () => {
-    // Load lists to perform ads and tracking blocking:
-    //
-    //  - https://easylist.to/easylist/easylist.txt
-    //  - https://pgl.yoyo.org/adservers/serverlist.php?hostformat=adblockplus&showintro=1&mimetype=plaintext
-    //  - https://raw.githubusercontent.com/uBlockOrigin/uAssets/master/filters/resource-abuse.txt
-    //  - https://raw.githubusercontent.com/uBlockOrigin/uAssets/master/filters/badware.txt
-    //  - https://raw.githubusercontent.com/uBlockOrigin/uAssets/master/filters/filters.txt
-    //  - https://raw.githubusercontent.com/uBlockOrigin/uAssets/master/filters/unbreak.txt
-    //
-    //  - https://easylist.to/easylist/easyprivacy.txt
-    //  - https://raw.githubusercontent.com/uBlockOrigin/uAssets/master/filters/privacy.txt
-    engine = await ElectronBlocker.fromPrebuiltAdsAndTracking(fetch);
-
-    try {
-      await fs.writeFile(path, engine.serialize());
-    } catch (err) {
-      if (err) return console.error(err);
-    }
-  };
-
-  if (existsSync(path)) {
-    try {
-      const buffer = await fs.readFile(resolve(path));
-
-      try {
-        engine = ElectronBlocker.deserialize(buffer);
-      } catch (e) {
-        return downloadFilters();
-      }
-    } catch (err) {
-      return console.error(err);
-    }
-  } else {
-    return downloadFilters();
-  }
+  engine = await ElectronBlocker.fromPrebuiltAdsAndTracking(fetch, {
+    path: path,
+    read: fs.readFile,
+    write: fs.writeFile,
+  });
 };
 
 const emitBlockedEvent = (request: Request) => {
@@ -66,9 +34,7 @@ interface IAdblockInfo {
   beforeRequestId?: number;
 }
 
-const sessionAdblockInfoMap: Map<Electron.Session, IAdblockInfo> = new Map();
-
-export const runAdblockService = async (ses: any) => {
+export const runAdblockService = async (ses: Electron.session) => {
   if (!adblockInitialized) {
     adblockInitialized = true;
     await loadFilters();
@@ -82,27 +48,7 @@ export const runAdblockService = async (ses: any) => {
 
   adblockRunning = true;
 
-  const info = sessionAdblockInfoMap.get(ses) || {};
-
-  if (!info.headersReceivedId) {
-    info.headersReceivedId = ses.webRequest.addListener(
-      'onHeadersReceived',
-      { urls: ['<all_urls>'] },
-      (engine as any).onHeadersReceived,
-      { order: 0 },
-    ).id;
-  }
-
-  if (!info.beforeRequestId) {
-    info.beforeRequestId = ses.webRequest.addListener(
-      'onBeforeRequest',
-      { urls: ['<all_urls>'] },
-      (engine as any).onBeforeRequest,
-      { order: 0 },
-    ).id;
-  }
-
-  sessionAdblockInfoMap.set(ses, info);
+  engine.enableBlockingInSession(ses);
 
   ipcMain.on('get-cosmetic-filters', (engine as any).onGetCosmeticFilters);
   ipcMain.on(
@@ -115,23 +61,12 @@ export const runAdblockService = async (ses: any) => {
   engine.on('request-redirected', emitBlockedEvent);
 };
 
-export const stopAdblockService = (ses: any) => {
-  if (!ses.webRequest.removeListener) return;
+export const stopAdblockService = (ses: Electron.session) => {
   if (!adblockRunning) return;
 
   adblockRunning = false;
 
-  const info = sessionAdblockInfoMap.get(ses) || {};
-
-  if (info.beforeRequestId) {
-    ses.webRequest.removeListener('onBeforeRequest', info.beforeRequestId);
-    info.beforeRequestId = null;
-  }
-
-  if (info.headersReceivedId) {
-    ses.webRequest.removeListener('onHeadersReceived', info.headersReceivedId);
-    info.headersReceivedId = null;
-  }
+  engine.disableBlockingInSession(ses);
 
   ses.setPreloads(ses.getPreloads().filter((p: string) => p !== PRELOAD_PATH));
 };

src/main/sessions-service.ts

@@ -9,10 +9,11 @@ import { IDownloadItem, BrowserActionChangeType } from '~/interfaces';
 import { parseCrx } from '~/utils/crx';
 import { pathExists } from '~/utils/files';
 import { extractZip } from '~/utils/zip';
-import { extensions, _setFallbackSession } from 'electron-extensions';
+// import { extensions, _setFallbackSession } from 'electron-extensions';
 import { requestPermission } from './dialogs/permissions';
 import * as rimraf from 'rimraf';
 import { promisify } from 'util';
+import { ElectronChromeExtensions } from 'electron-chrome-extensions';
 
 const rf = promisify(rimraf);
 
@@ -21,6 +22,8 @@ export class SessionsService {
   public view = session.fromPartition('persist:view');
   public viewIncognito = session.fromPartition('view_incognito');
 
+  public chromeExtensions: ElectronChromeExtensions;
+
   public incognitoExtensionsLoaded = false;
   public extensionsLoaded = false;
 
@@ -33,11 +36,6 @@ export class SessionsService {
     this.clearCache('incognito');
 
     if (process.env.ENABLE_EXTENSIONS) {
-      extensions.initializeSession(
-        this.view,
-        `${app.getAppPath()}/build/extensions-preload.bundle.js`,
-      );
-
       ipcMain.on('load-extensions', () => {
         this.loadExtensions();
       });

src/main/view-manager.ts

@@ -9,7 +9,6 @@ import {
   ZOOM_FACTOR_MAX,
   ZOOM_FACTOR_INCREMENT,
 } from '~/constants/web-contents';
-import { extensions } from 'electron-extensions';
 import { EventEmitter } from 'events';
 import { Application } from './application';
 
@@ -58,7 +57,12 @@ export class ViewManager extends EventEmitter {
 
     ipcMain.handle(`view-select-${id}`, (e, id: number, focus: boolean) => {
       if (process.env.ENABLE_EXTENSIONS) {
-        extensions.tabs.activate(id, focus);
+        const view = this.views.get(id);
+        if (focus) {
+          Application.instance.sessions.chromeExtensions.selectTab(
+            view.webContents,
+          );
+        }
       } else {
         this.select(id, focus);
       }
@@ -139,7 +143,10 @@ export class ViewManager extends EventEmitter {
     this.views.set(id, view);
 
     if (process.env.ENABLE_EXTENSIONS) {
-      extensions.tabs.observe(webContents);
+      Application.instance.sessions.chromeExtensions.addTab(
+        webContents,
+        this.window.win,
+      );
     }
 
     webContents.once('destroyed', () => {

src/main/windows-service.ts

@@ -1,6 +1,8 @@
 import { AppWindow } from './windows/app';
 import { extensions } from 'electron-extensions';
-import { BrowserWindow, ipcMain } from 'electron';
+import { app, BrowserWindow, ipcMain } from 'electron';
+import { SessionsService } from './sessions-service';
+import { ElectronChromeExtensions } from 'electron-chrome-extensions';
 
 export class WindowsService {
   public list: AppWindow[] = [];
@@ -9,31 +11,38 @@ export class WindowsService {
 
   public lastFocused: AppWindow;
 
-  constructor() {
+  constructor(sessions: SessionsService) {
     if (process.env.ENABLE_EXTENSIONS) {
-      extensions.tabs.on('activated', (tabId, windowId, focus) => {
-        const win = this.list.find((x) => x.id === windowId);
-        win.viewManager.select(tabId, focus === undefined ? true : focus);
+      sessions.chromeExtensions = new ElectronChromeExtensions({
+        modulePath: `${app.getAppPath()}/node_modules/electron-chrome-extensions`,
+        session: sessions.view,
+        createTab: async (details) => {
+          const win =
+            this.list.find((x) => x.id === details.windowId) ||
+            this.lastFocused;
+
+          if (!win) throw new Error('Window not found');
+
+          const view = win.viewManager.create(details);
+          return [view.webContents, win.win];
+        },
+        selectTab: (tab, window) => {
+          const win = this.list.find((x) => x.id === window.id);
+          win.viewManager.select(tab.id, true);
+        },
+        removeTab: (tab, window) => {
+          const win = this.list.find((x) => x.id === window.id);
+          win.viewManager.destroy(tab.id);
+        },
+        createWindow: async (details) => {
+          return this.open(details.incognito).win;
+        },
+        removeWindow: (window) => {
+          const win = this.list.find((x) => x.id === window.id);
+          this.list = this.list.filter((w) => w !== win);
+          win.win.destroy();
+        },
       });
-
-      extensions.tabs.onCreateDetails = (tab, details) => {
-        const win = this.findByBrowserView(tab.id);
-        details.windowId = win.id;
-      };
-
-      extensions.windows.onCreate = async (details) => {
-        return this.open(details.incognito).id;
-      };
-
-      extensions.tabs.onCreate = async (details) => {
-        const win =
-          this.list.find((x) => x.id === details.windowId) || this.lastFocused;
-
-        if (!win) return -1;
-
-        const view = win.viewManager.create(details);
-        return view.id;
-      };
     }
 
     ipcMain.handle('get-tab-zoom', (e, tabId) => {

src/preloads/extensions-preload.ts

@@ -1 +0,0 @@
-require('electron-extensions/preload');

src/renderer/views/app/components/BrowserAction/index.tsx

@@ -26,20 +26,44 @@ const showPopup = (
   );
 };
 
-let canOpenPopup = true;
+// let canOpenPopup = true;
 
 const onClick = (data: IBrowserAction) => (
   e: React.MouseEvent<HTMLDivElement>,
 ) => {
   if (data.tabId) {
     // TODO:
     //extensionsRenderer.browserAction.onClicked(data.extensionId, data.tabId);
-  }
+    const {
+      left,
+      top,
+      width,
+      height,
+    } = e.currentTarget.getBoundingClientRect();
 
-  if (canOpenPopup) {
-    const { right, bottom } = e.currentTarget.getBoundingClientRect();
-    showPopup(data, right, bottom, false);
+    ipcRenderer.invoke(
+      'crx-msg-remote',
+      'persist:view',
+      'browserAction.activate',
+      {
+        eventType: 'click',
+        extensionId: data.extensionId,
+        tabId: data.tabId,
+        anchorRect: {
+          x: left,
+          y: top,
+          width: width,
+          height: height,
+        },
+      },
+    );
   }
+
+  // if (canOpenPopup) {
+  //   const { right, bottom } = e.currentTarget.getBoundingClientRect();
+
+  //   showPopup(data, right, bottom, false);
+  // }
 };
 
 const onContextMenu = (data: IBrowserAction) => (

src/renderer/views/app/components/RightButtons/index.tsx

@@ -47,6 +47,12 @@ const BrowserActions = observer(() => {
           }
           return null;
         })}
+      {/* {selectedTabId && (
+        <browser-action-list
+        // partition="persist:view"
+        // tab={String(selectedTabId)}
+        ></browser-action-list>
+      )} */}
     </>
   );
 });