feat: add default plugins to extension bundle (#93)

package.json

@@ -39,7 +39,7 @@
     "redux-thunk": "^2.4.2",
     "tailwindcss": "^3.3.3",
     "tlsn-js": "0.1.0-alpha.6.2",
-    "tlsn-jsV5.3": "npm:[email protected].3"
+    "tlsn-js-v5": "npm:[email protected].4"
   },
   "devDependencies": {
     "@babel/core": "^7.20.12",

src/components/PluginInfo/index.tsx

@@ -24,6 +24,7 @@ import {
 } from '../../utils/plugins';
 import { ErrorModal } from '../ErrorModal';
 import classNames from 'classnames';
+import DefaultPluginIcon from '../../assets/img/default-plugin-icon.png';
 
 export default function PluginUploadInfo(): ReactElement {
   const [error, showError] = useState('');
@@ -122,7 +123,7 @@ export function PluginInfoModal(props: {
       <ModalHeader className="w-full p-2 border-gray-200 text-gray-500">
         {header || (
           <div className="flex flex-row items-end justify-start gap-2">
-            <img className="h-5" src={logo} alt="logo" />
+            <img className="h-5" src={logo || DefaultPluginIcon} alt="logo" />
             <span className="font-semibold">{`Installing ${pluginContent.title}`}</span>
           </div>
         )}
@@ -132,7 +133,7 @@ export function PluginInfoModal(props: {
           <>
             <img
               className="w-12 h-12"
-              src={pluginContent.icon}
+              src={pluginContent.icon || DefaultPluginIcon}
               alt="Plugin Icon"
             />
             <span className="text-3xl text-center">

src/components/PluginList/index.tsx

@@ -169,7 +169,7 @@ export function Plugin(props: {
           <PluginInfoModalContent className="flex flex-col items-center cursor-default">
             <img
               className="w-12 h-12 mb-2"
-              src={config.icon}
+              src={config.icon || DefaultPluginIcon}
               alt="Plugin Icon"
             />
             <span className="text-3xl text-blue-600 font-semibold">

src/entries/Background/db.ts

@@ -28,6 +28,12 @@ const cookiesDb = db.sublevel<string, boolean>('cookies', {
 const headersDb = db.sublevel<string, boolean>('headers', {
   valueEncoding: 'json',
 });
+const appDb = db.sublevel<string, any>('app', {
+  valueEncoding: 'json',
+});
+enum AppDatabaseKey {
+  DefaultPluginsInstalled = 'DefaultPluginsInstalled',
+}
 
 export async function addNotaryRequest(
   now = Date.now(),
@@ -372,3 +378,19 @@ export async function getHeadersByHost(host: string) {
   }
   return ret;
 }
+
+async function getDefaultPluginsInstalled(): Promise<boolean> {
+  return appDb.get(AppDatabaseKey.DefaultPluginsInstalled).catch(() => false);
+}
+
+export async function setDefaultPluginsInstalled(installed = false) {
+  return mutex.runExclusive(async () => {
+    await appDb.put(AppDatabaseKey.DefaultPluginsInstalled, installed);
+  });
+}
+
+export async function getAppState() {
+  return {
+    defaultPluginsInstalled: await getDefaultPluginsInstalled(),
+  };
+}

src/entries/Background/index.ts

@@ -1,6 +1,8 @@
 import { onBeforeRequest, onResponseStarted, onSendHeaders } from './handlers';
 import { deleteCacheByTabId } from './cache';
 import browser from 'webextension-polyfill';
+import { getAppState, setDefaultPluginsInstalled } from './db';
+import { installPlugin } from './plugins/utils';
 
 (async () => {
   browser.webRequest.onSendHeaders.addListener(
@@ -31,6 +33,19 @@ import browser from 'webextension-polyfill';
     deleteCacheByTabId(tabId);
   });
 
+  const { defaultPluginsInstalled } = await getAppState();
+
+  if (!defaultPluginsInstalled) {
+    try {
+      const twitterProfileUrl = browser.runtime.getURL('twitter_profile.wasm');
+      const discordDmUrl = browser.runtime.getURL('discord_dm.wasm');
+      await installPlugin(twitterProfileUrl);
+      await installPlugin(discordDmUrl);
+    } finally {
+      await setDefaultPluginsInstalled(true);
+    }
+  }
+
   const { initRPC } = await import('./rpc');
   await createOffscreenDocument();
   initRPC();

src/entries/Background/plugins/utils.ts

@@ -0,0 +1,29 @@
+import { addPlugin, addPluginConfig, addPluginMetadata } from '../db';
+import { getPluginConfig } from '../../../utils/misc';
+
+export async function installPlugin(
+  urlOrBuffer: ArrayBuffer | string,
+  origin = '',
+  filePath = '',
+  metadata: {[key: string]: string} = {},
+) {
+  let arrayBuffer;
+
+  if (typeof urlOrBuffer === 'string') {
+    const resp = await fetch(urlOrBuffer);
+    arrayBuffer = await resp.arrayBuffer();
+  } else {
+    arrayBuffer = urlOrBuffer;
+  }
+
+  const config = await getPluginConfig(arrayBuffer);
+  const hex = Buffer.from(arrayBuffer).toString('hex');
+  const hash = await addPlugin(hex);
+  await addPluginConfig(hash!, config);
+  await addPluginMetadata(hash!, {
+    ...metadata,
+    origin,
+    filePath,
+  });
+  return hash;
+}

src/entries/Background/rpc.ts

@@ -24,6 +24,8 @@ import {
   getPlugins,
   getCookiesByHost,
   getHeadersByHost,
+  getAppState,
+  setDefaultPluginsInstalled,
 } from './db';
 import { addOnePlugin, removeOnePlugin } from '../../reducers/plugins';
 import {
@@ -85,6 +87,8 @@ export enum BackgroundActiontype {
   run_plugin_request = 'run_plugin_request',
   run_plugin_response = 'run_plugin_response',
   get_logging_level = 'get_logging_level',
+  get_app_state = 'get_app_state',
+  set_default_plugins_installed = 'set_default_plugins_installed',
 }
 
 export type BackgroundAction = {
@@ -192,6 +196,12 @@ export const initRPC = () => {
         case BackgroundActiontype.get_logging_level:
           getLoggingFilter().then(sendResponse);
           return true;
+        case BackgroundActiontype.get_app_state:
+          getAppState().then(sendResponse);
+          return true;
+        case BackgroundActiontype.set_default_plugins_installed:
+          setDefaultPluginsInstalled(request.data).then(sendResponse);
+          return true;
         default:
           break;
       }

src/entries/Offscreen/Offscreen.tsx

@@ -7,7 +7,7 @@ import {
   NotarizedSession as _NotarizedSession,
   TlsProof as _TlsProof,
 } from 'tlsn-js';
-import { verify } from 'tlsn-jsV5.3';
+import { verify } from 'tlsn-js-v5';
 
 import { urlify } from '../../utils/misc';
 import { BackgroundActiontype } from '../Background/rpc';

src/manifest.json

@@ -28,7 +28,7 @@
   ],
   "web_accessible_resources": [
     {
-      "resources": ["content.styles.css", "icon-128.png", "icon-34.png", "content.bundle.js"],
+      "resources": ["content.styles.css", "icon-128.png", "icon-34.png", "content.bundle.js", "discord_dm.wasm", "twitter_profile.wasm"],
       "matches": ["http://*/*", "https://*/*", "<all_urls>"]
     }
   ],

webpack.config.js

@@ -40,7 +40,8 @@ var options = {
   mode: process.env.NODE_ENV || "development",
   ignoreWarnings: [
     /Circular dependency between chunks with runtime/,
-    /ResizeObserver loop completed with undelivered notifications/
+    /ResizeObserver loop completed with undelivered notifications/,
+    /Should not import the named export/,
   ],
 
   entry: {
@@ -199,31 +200,21 @@ var options = {
     }),
     new CopyWebpackPlugin({
       patterns: [
-        // {
-        //   from: "node_modules/tlsn-js/build/7.js",
-        //   to: path.join(__dirname, "build"),
-        //   force: true,
-        // },
-        // {
-        //   from: "node_modules/tlsn-js/build/250.js",
-        //   to: path.join(__dirname, "build"),
-        //   force: true,
-        // },
-        // {
-        //   from: "node_modules/tlsn-js/build/278.js",
-        //   to: path.join(__dirname, "build"),
-        //   force: true,
-        // },
-        // {
-        //   from: "node_modules/tlsn-js/build/349.js",
-        //   to: path.join(__dirname, "build"),
-        //   force: true,
-        // },
         {
           from: "node_modules/tlsn-js/build",
           to: path.join(__dirname, "build"),
           force: true,
         },
+        {
+          from: "src/assets/plugins/discord_dm.wasm",
+          to: path.join(__dirname, "build"),
+          force: true,
+        },
+        {
+          from: "src/assets/plugins/twitter_profile.wasm",
+          to: path.join(__dirname, "build"),
+          force: true,
+        },
       ],
     }),
     new HtmlWebpackPlugin({