feat: add default plugins to extension bundle

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,18 +24,19 @@
 } 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('');
  const [pluginBuffer, setPluginBuffer] = useState<ArrayBuffer | any>(null);
  const [pluginContent, setPluginContent] = useState<PluginConfig | null>(null);
 
  const onAddPlugin = useCallback(
  async (evt: React.MouseEvent<HTMLButtonElement>) => {
  try {
  await addPlugin(Buffer.from(pluginBuffer).toString('hex'));
  setPluginContent(null);
  } catch (e: any) {
  showError(e?.message || 'Invalid Plugin');
  }
  },
@@ -51,7 +52,7 @@
  const plugin = await makePlugin(arrayBuffer);
  setPluginContent(await getPluginConfig(plugin));
  setPluginBuffer(arrayBuffer);
  } catch (e: any) {
  showError(e?.message || 'Invalid Plugin');
  } finally {
  evt.target.value = '';
@@ -107,11 +108,11 @@
  const { pluginContent, onClose, onAddPlugin, children } = props;
 
  const header = Children.toArray(children).filter(
  (c: any) => c.type.name === 'PluginInfoModalHeader',
  )[0];
 
  const content = Children.toArray(children).filter(
  (c: any) => c.type.name === 'PluginInfoModalContent',
  )[0];
 
  return (
@@ -122,7 +123,7 @@
  <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 @@
  <>
  <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

@@ -8,7 +8,7 @@
 import {
  fetchPluginHashes,
  removePlugin,
  fetchPluginConfigByHash,
  runPlugin,
 } from '../../utils/rpc';
 import { usePluginHashes } from '../../reducers/plugins';
@@ -75,7 +75,7 @@
  if (chrome.sidePanel) await chrome.sidePanel.open({ tabId: tab.id });
 
  window.close();
  } catch (e: any) {
  showError(e.message);
  }
  }, [props.hash, config, remove]);
@@ -169,7 +169,7 @@
  <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({