feat: add a way to uninstall extensions (#561)

Author: sentialx

package.json

@@ -50,6 +50,7 @@
     "@types/node-fetch": "^2.5.8",
     "@types/react": "17.0.2",
     "@types/react-dom": "17.0.1",
+    "@types/rimraf": "^3.0.0",
     "@types/styled-components": "5.1.7",
     "@typescript-eslint/eslint-plugin": "^4.15.1",
     "@typescript-eslint/parser": "^4.15.1",

src/common/rpc/extensions.ts

@@ -0,0 +1,9 @@
+import { RendererToMainChannel } from '@wexond/rpc-electron';
+
+export interface ExtensionMainService {
+  uninstall(id: string): void;
+}
+
+export const extensionMainChannel = new RendererToMainChannel<ExtensionMainService>(
+  'ExtensionMainService',
+);

src/main/application.ts

@@ -12,6 +12,7 @@ import { runAutoUpdaterService } from './services';
 import { DialogsService } from './services/dialogs-service';
 import { requestAuth } from './dialogs/auth';
 import { NetworkServiceHandler } from './network/network-service-handler';
+import { ExtensionServiceHandler } from './extension-service-handler';
 
 export class Application {
   public static instance = new Application();
@@ -88,6 +89,8 @@ export class Application {
   private async onReady() {
     await app.whenReady();
 
+    new ExtensionServiceHandler();
+
     NetworkServiceHandler.get();
 
     checkFiles();

src/main/extension-service-handler.ts

@@ -0,0 +1,17 @@
+import { RpcMainEvent, RpcMainHandler } from '@wexond/rpc-electron';
+import {
+  extensionMainChannel,
+  ExtensionMainService,
+} from '~/common/rpc/extensions';
+import { Application } from './application';
+
+export class ExtensionServiceHandler
+  implements RpcMainHandler<ExtensionMainService> {
+  constructor() {
+    extensionMainChannel.getReceiver().handler = this;
+  }
+
+  uninstall(e: RpcMainEvent, id: string): void {
+    Application.instance.sessions.uninstallExtension(id);
+  }
+}

src/main/sessions-service.ts

@@ -11,6 +11,10 @@ import { pathExists } from '~/utils/files';
 import { extractZip } from '~/utils/zip';
 import { extensions, _setFallbackSession } from 'electron-extensions';
 import { requestPermission } from './dialogs/permissions';
+import * as rimraf from 'rimraf';
+import { promisify } from 'util';
+
+const rf = promisify(rimraf);
 
 // TODO: sessions should be separate.  This structure actually doesn't make sense.
 export class SessionsService {
@@ -29,9 +33,6 @@ export class SessionsService {
     this.clearCache('incognito');
 
     if (process.env.ENABLE_EXTENSIONS) {
-      // TODO: remove this after fix for e.sender.session
-      _setFallbackSession(this.view);
-
       extensions.initializeSession(
         this.view,
         `${app.getAppPath()}/build/extensions-preload.bundle.js`,
@@ -331,6 +332,17 @@ export class SessionsService {
     this.extensionsLoaded = true;
   }
 
+  async uninstallExtension(id: string) {
+    if (!process.env.ENABLE_EXTENSIONS) return;
+
+    const extension = this.view.getExtension(id);
+    if (!extension) return;
+
+    await this.view.removeExtension(id);
+
+    await rf(extension.path);
+  }
+
   public onCreateTab = async (details: chrome.tabs.CreateProperties) => {
     const view = Application.instance.windows.list
       .find((x) => x.win.id === details.windowId)

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

@@ -46,6 +46,12 @@ const onContextMenu = (data: IBrowserAction) => (
 ) => {
   const { target } = e;
   const menu = remote.Menu.buildFromTemplate([
+    {
+      label: 'Uninstall',
+      click: () => {
+        store.extensions.uninstallExtension(data.extensionId);
+      },
+    },
     {
       label: 'Inspect popup',
       click: () => {

src/renderer/views/app/store/extensions.ts

@@ -1,12 +1,13 @@
 /* eslint @typescript-eslint/camelcase: 0 */
 
-import { makeObservable, observable } from 'mobx';
+import { action, makeObservable, observable } from 'mobx';
 import { join } from 'path';
 
 import { IBrowserAction } from '../models';
 import { promises } from 'fs';
 import { ipcRenderer } from 'electron';
 import store from '.';
+import { extensionMainChannel } from '~/common/rpc/extensions';
 
 export class ExtensionsStore {
   public browserActions: IBrowserAction[] = [];
@@ -20,6 +21,7 @@ export class ExtensionsStore {
       browserActions: observable,
       defaultBrowserActions: observable,
       currentlyToggledPopup: observable,
+      uninstallExtension: action,
     });
 
     this.load();
@@ -87,4 +89,15 @@ export class ExtensionsStore {
 
     await Promise.all(extensions.map((x) => this.loadExtension(x)));
   }
+
+  uninstallExtension(id: string) {
+    this.browserActions = this.browserActions.filter(
+      (x) => x.extensionId !== id,
+    );
+    this.defaultBrowserActions = this.defaultBrowserActions.filter(
+      (x) => x.extensionId !== id,
+    );
+
+    extensionMainChannel.getInvoker().uninstall(id);
+  }
 }

yarn.lock

@@ -592,6 +592,14 @@
   dependencies:
     "@types/node" "*"
 
+"@types/glob@*":
+  version "7.1.3"
+  resolved "https://registry.yarnpkg.com/@types/glob/-/glob-7.1.3.tgz#e6ba80f36b7daad2c685acd9266382e68985c183"
+  integrity sha512-SEYeGAIQIQX8NN6LDKprLjbrd5dARM5EXsd8GI/A5l0apYI1fGMWgPHSe4ZKL4eozlAyI+doUE9XbYS4xCkQ1w==
+  dependencies:
+    "@types/minimatch" "*"
+    "@types/node" "*"
+
 "@types/glob@^7.1.1":
   version "7.1.2"
   resolved "https://registry.yarnpkg.com/@types/glob/-/glob-7.1.2.tgz#06ca26521353a545d94a0adc74f38a59d232c987"
@@ -716,6 +724,14 @@
     "@types/node" "*"
     safe-buffer "*"
 
+"@types/rimraf@^3.0.0":
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/@types/rimraf/-/rimraf-3.0.0.tgz#b9d03f090ece263671898d57bb7bb007023ac19f"
+  integrity sha512-7WhJ0MdpFgYQPXlF4Dx+DhgvlPCfz/x5mHaeDQAKhcenvQP1KCpLQ18JklAqeGMYSAT2PxLpzd0g2/HE7fj7hQ==
+  dependencies:
+    "@types/glob" "*"
+    "@types/node" "*"
+
 "@types/semver@^7.3.1":
   version "7.3.4"
   resolved "https://registry.yarnpkg.com/@types/semver/-/semver-7.3.4.tgz#43d7168fec6fa0988bb1a513a697b29296721afb"