feat: pass verifier and notary api urls to prover

* feat: added Error for RequestProgress

* feat: added logic to handle errors depending on progress

* chore: linting errors

* fix: linting build error

* Avoid magic numbers

* lint

* feat: alpha.8

* fix: package.json path

* chore: update lockfiles

* fix: notary url

* feat: notarization timeouts

* fix: notarization timeouts

* feat: fixed comments + errors are properly thrown and status changes

* fix: notarization timeouts work properly now

* fix: timeout error message fix

* fix: lint

* fix: lint

* fix: errors should keep state after being thrown now

* chore: lint

* fix: fixing metadata with new progress status

---------

Co-authored-by: Hendrik Eeckhaut <hendrik@eeckhaut.org>
Co-authored-by: tsukino <0xtsukino@gmail.com>

.github/workflows/build.yaml

@@ -1,46 +0,0 @@
-name: build
-
-on:
-  push:
-    branches: [ main ]
-  pull_request:
-    branches: [ main ]
-
-jobs:
-  build:
-
-    runs-on: ubuntu-latest
-
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v3
-
-      - name: Install Node.js
-        uses: actions/setup-node@v3
-        with:
-          node-version: 16
-
-      - uses: pnpm/action-setup@v2
-        name: Install pnpm
-        with:
-          version: 8
-          run_install: false
-
-      - name: Get pnpm store directory
-        shell: bash
-        run: |
-          echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
-
-      - uses: actions/cache@v3
-        name: Setup pnpm cache
-        with:
-          path: ${{ env.STORE_PATH }}
-          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
-          restore-keys: |
-            ${{ runner.os }}-pnpm-store-
-
-      - name: Install dependencies
-        run: pnpm install
-
-      - name: Build
-        run: npm run build

.github/workflows/ci.yaml

@@ -0,0 +1,72 @@
+name: ci
+
+on:
+  pull_request:
+  release:
+    types: [published]
+
+jobs:
+  build-lint-test:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 18
+          cache: 'npm'
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Build
+        run: npm run build
+
+      - name: Lint
+        run: npm run lint
+
+      - name: Test Webpack Build
+        run: npm run build:webpack
+
+      - name: Save extension zip file for releases
+        if: github.event_name == 'release'
+        uses: actions/upload-artifact@v4
+        with:
+          name: tlsn-extension-${{ github.ref_name }}.zip
+          path: ./zip/tlsn-extension-${{ github.ref_name }}.zip
+          if-no-files-found: error
+
+  release:
+    if: github.event_name == 'release'
+    runs-on: ubuntu-latest
+    needs: build-lint-test
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - name: Download extension from build-lint-test job
+        uses: actions/download-artifact@v4
+        with:
+          name: tlsn-extension-${{ github.ref_name }}.zip
+          path: ./tlsn-extension-${{ github.ref_name }}.zip
+
+      - name: 📦 Add extension zip file to release
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        run: |
+          gh release upload "${{ github.event.release.tag_name }}" \
+            ./tlsn-extension-${{ github.ref_name }}.zip \
+            --clobber
+
+      # Get tokens as documented on 
+      # * https://developer.chrome.com/docs/webstore/using-api#beforeyoubegin
+      # * https://github.com/fregante/chrome-webstore-upload-keys?tab=readme-ov-file
+      - name: 💨 Publish to chrome store
+        uses: browser-actions/release-chrome-extension@latest # https://github.com/browser-actions/release-chrome-extension/tree/latest/
+        with:
+          extension-id: "gcfkkledipjbgdbimfpijgbkhajiaaph"
+          extension-path: tlsn-extension-${{ github.ref_name }}.zip
+          oauth-client-id: ${{ secrets.OAUTH_CLIENT_ID }}
+          oauth-client-secret: ${{ secrets.OAUTH_CLIENT_SECRET }}
+          oauth-refresh-token: ${{ secrets.OAUTH_REFRESH_TOKEN }}

.github/workflows/lint.yaml

@@ -1,46 +0,0 @@
-name: lint
-
-on:
-  push:
-    branches: [ main ]
-  pull_request:
-    branches: [ main ]
-
-jobs:
-  build:
-
-    runs-on: ubuntu-latest
-
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v3
-
-      - name: Install Node.js
-        uses: actions/setup-node@v3
-        with:
-          node-version: 16
-
-      - uses: pnpm/action-setup@v2
-        name: Install pnpm
-        with:
-          version: 8
-          run_install: false
-
-      - name: Get pnpm store directory
-        shell: bash
-        run: |
-          echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
-
-      - uses: actions/cache@v3
-        name: Setup pnpm cache
-        with:
-          path: ${{ env.STORE_PATH }}
-          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
-          restore-keys: |
-            ${{ runner.os }}-pnpm-store-
-
-      - name: Install dependencies
-        run: pnpm install
-
-      - name: Lint
-        run: npm run lint

.gitignore

@@ -8,3 +8,4 @@ bin/
 build
 tlsn/
 zip
+.vscode

README.md

@@ -25,7 +25,11 @@ at your option.
 
 ## Installing and Running
 
-### Procedures:
+The easiest way to install the TLSN browser extension is to use the [Chrome Web Store](https://chromewebstore.google.com/detail/tlsn-extension/gcfkkledipjbgdbimfpijgbkhajiaaph).
+
+You can also build and run it locally as explained in the following steps.
+
+### Procedure:
 
 1. Check if your [Node.js](https://nodejs.org/) version is >= **18**.
 2. Clone this repository.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "tlsn-extension",
-  "version": "0.1.0.704",
+  "version": "0.1.0.1000",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -16,7 +16,7 @@
     "lint:fix": "eslint . --fix"
   },
   "dependencies": {
-    "@extism/extism": "^1.0.2",
+    "@extism/extism": "^2.0.0-rc11",
     "@fortawesome/fontawesome-free": "^6.4.2",
     "async-mutex": "^0.4.0",
     "buffer": "^6.0.3",
@@ -27,6 +27,7 @@
     "dayjs": "^1.11.13",
     "fast-deep-equal": "^3.1.3",
     "fuse.js": "^6.6.2",
+    "http-parser-js": "^0.5.9",
     "level": "^8.0.0",
     "minimatch": "^9.0.4",
     "node-cache": "^5.1.2",
@@ -39,8 +40,7 @@
     "redux-logger": "^3.0.6",
     "redux-thunk": "^2.4.2",
     "tailwindcss": "^3.3.3",
-    "tlsn-js": "0.1.0-alpha.7.1",
-    "tlsn-js-v5": "npm:tlsn-js@0.1.0-alpha.5.4"
+    "tlsn-js": "0.1.0-alpha.10.0"
   },
   "devDependencies": {
     "@babel/core": "^7.20.12",
@@ -94,4 +94,4 @@
     "webpack-ext-reloader": "^1.1.12",
     "zip-webpack-plugin": "^4.0.1"
   }
-}
+}

src/components/Menu/index.tsx

@@ -9,7 +9,6 @@ import Icon from '../Icon';
 import browser from 'webextension-polyfill';
 import classNames from 'classnames';
 import { useNavigate } from 'react-router';
-import PluginUploadInfo from '../PluginInfo';
 
 export function MenuIcon(): ReactElement {
   const [opened, setOpen] = useState(false);
@@ -54,24 +53,34 @@ export default function Menu(props: {
     <div className="absolute top-[100%] right-0 rounded-md z-20">
       <div className="flex flex-col bg-slate-200 w-40 shadow rounded-md py">
         <MenuRow
-          fa="fa-solid fa-plus"
+          fa="fa-solid fa-hammer"
+          className="relative"
+          onClick={() => {
+            navigate('/custom');
+            props.setOpen(false);
+          }}
+        >
+          <span>Custom</span>
+        </MenuRow>
+        <MenuRow
+          fa="fa-solid fa-certificate"
           className="relative"
           onClick={() => {
             props.setOpen(false);
+            navigate('/verify');
           }}
         >
-          <PluginUploadInfo onPluginInstalled={() => props.setOpen(false)} />
-          <span>Install Plugin</span>
+          Verify
         </MenuRow>
         <MenuRow
-          fa="fa-solid fa-toolbox"
+          fa="fa-solid fa-network-wired"
           className="border-b border-slate-300"
           onClick={() => {
             props.setOpen(false);
-            navigate('/plugins');
+            navigate('/p2p');
           }}
         >
-          Plugins
+          P2P
         </MenuRow>
         <MenuRow
           className="lg:hidden"

src/components/PluginInfo/index.tsx

@@ -1,14 +1,4 @@
-import React, {
-  ChangeEvent,
-  Children,
-  MouseEventHandler,
-  ReactElement,
-  ReactNode,
-  useCallback,
-  useState,
-} from 'react';
-import { makePlugin, getPluginConfig } from '../../utils/misc';
-import { addPlugin } from '../../utils/rpc';
+import React, { Children, MouseEventHandler, ReactNode } from 'react';
 import Modal, {
   ModalHeader,
   ModalContent,
@@ -22,77 +12,9 @@ import {
   MultipleParts,
   PermissionDescription,
 } from '../../utils/plugins';
-import { ErrorModal } from '../ErrorModal';
 import classNames from 'classnames';
 import DefaultPluginIcon from '../../assets/img/default-plugin-icon.png';
 
-export default function PluginUploadInfo({
-  onPluginInstalled,
-}: {
-  onPluginInstalled?: () => void;
-}): 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);
-        onPluginInstalled?.();
-      } catch (e: any) {
-        showError(e?.message || 'Invalid Plugin');
-      }
-    },
-    [pluginContent, pluginBuffer],
-  );
-
-  const onPluginInfo = useCallback(
-    async (evt: ChangeEvent<HTMLInputElement>) => {
-      if (!evt.target.files) return;
-      try {
-        const [file] = evt.target.files;
-        const arrayBuffer = await file.arrayBuffer();
-        const plugin = await makePlugin(arrayBuffer);
-        setPluginContent(await getPluginConfig(plugin));
-        setPluginBuffer(arrayBuffer);
-      } catch (e: any) {
-        showError(e?.message || 'Invalid Plugin');
-      } finally {
-        evt.target.value = '';
-      }
-    },
-    [setPluginContent, setPluginBuffer],
-  );
-
-  const onClose = useCallback(() => {
-    setPluginContent(null);
-    setPluginBuffer(null);
-  }, []);
-
-  return (
-    <>
-      <input
-        className="opacity-0 absolute top-0 right-0 h-full w-full cursor-pointer"
-        type="file"
-        onChange={onPluginInfo}
-        onClick={(e) => {
-          e.stopPropagation();
-        }}
-      />
-      {error && <ErrorModal onClose={() => showError('')} message={error} />}
-      {pluginContent && (
-        <PluginInfoModal
-          pluginContent={pluginContent}
-          onClose={onClose}
-          onAddPlugin={onAddPlugin}
-        />
-      )}
-    </>
-  );
-}
-
 export function PluginInfoModalHeader(props: {
   className?: string;
   children: ReactNode | ReactNode[];

src/components/PluginList/index.tsx

@@ -23,7 +23,7 @@ import {
   PluginInfoModalContent,
   PluginInfoModalHeader,
 } from '../PluginInfo';
-import { getPluginConfigByHash } from '../../entries/Background/db';
+import { getPluginConfigByUrl } from '../../entries/Background/db';
 import { SidePanelActionTypes } from '../../entries/SidePanel/types';
 import { openSidePanel } from '../../entries/utils';
 
@@ -110,7 +110,7 @@ export function Plugin({
       if (hex) {
         setConfig(await getPluginConfig(hexToArrayBuffer(hex)));
       } else {
-        setConfig(await getPluginConfigByHash(hash));
+        setConfig(await getPluginConfigByUrl(hash));
       }
     })();
   }, [hash, hex]);

src/entries/Background/db.ts

@@ -115,14 +115,15 @@ export async function setNotaryRequestError(
 export async function setNotaryRequestProgress(
   id: string,
   progress: RequestProgress,
+  errorMessage?: string,
 ): Promise<RequestHistory | null> {
   const existing = await historyDb.get(id);
-
   if (!existing) return null;
 
   const newReq: RequestHistory = {
     ...existing,
     progress,
+    errorMessage,
   };
 
   await historyDb.put(id, newReq);
@@ -132,7 +133,12 @@ export async function setNotaryRequestProgress(
 
 export async function setNotaryRequestVerification(
   id: string,
-  verification: { sent: string; recv: string },
+  verification: {
+    sent: string;
+    recv: string;
+    verifierKey: string;
+    notaryKey?: string;
+  },
 ): Promise<RequestHistory | null> {
   const existing = await historyDb.get(id);
 
@@ -182,41 +188,44 @@ export async function getPluginHashes(): Promise<string[]> {
   return retVal;
 }
 
-export async function getPluginByHash(hash: string): Promise<string | null> {
+export async function getPluginByUrl(url: string): Promise<string | null> {
   try {
-    const plugin = await pluginDb.get(hash);
+    const plugin = await pluginDb.get(url);
     return plugin;
   } catch (e) {
     return null;
   }
 }
 
-export async function addPlugin(hex: string): Promise<string | null> {
+export async function addPlugin(
+  hex: string,
+  url: string,
+): Promise<string | null> {
   const hash = await sha256(hex);
 
-  if (await getPluginByHash(hash)) {
-    return null;
+  if (await getPluginByUrl(url)) {
+    return url;
   }
 
-  await pluginDb.put(hash, hex);
+  await pluginDb.put(url, hex);
   return hash;
 }
 
-export async function removePlugin(hash: string): Promise<string | null> {
-  const existing = await pluginDb.get(hash);
+export async function removePlugin(url: string): Promise<string | null> {
+  const existing = await pluginDb.get(url);
 
   if (!existing) return null;
 
-  await pluginDb.del(hash);
+  await pluginDb.del(url);
 
-  return hash;
+  return url;
 }
 
-export async function getPluginConfigByHash(
-  hash: string,
+export async function getPluginConfigByUrl(
+  url: string,
 ): Promise<PluginConfig | null> {
   try {
-    const config = await pluginConfigDb.get(hash);
+    const config = await pluginConfigDb.get(url);
     return config;
   } catch (e) {
     return null;
@@ -224,25 +233,25 @@ export async function getPluginConfigByHash(
 }
 
 export async function addPluginConfig(
-  hash: string,
+  url: string,
   config: PluginConfig,
 ): Promise<PluginConfig | null> {
-  if (await getPluginConfigByHash(hash)) {
+  if (await getPluginConfigByUrl(url)) {
     return null;
   }
 
-  await pluginConfigDb.put(hash, config);
+  await pluginConfigDb.put(url, config);
   return config;
 }
 
 export async function removePluginConfig(
-  hash: string,
+  url: string,
 ): Promise<PluginConfig | null> {
-  const existing = await pluginConfigDb.get(hash);
+  const existing = await pluginConfigDb.get(url);
 
   if (!existing) return null;
 
-  await pluginConfigDb.del(hash);
+  await pluginConfigDb.del(url);
 
   return existing;
 }
@@ -253,8 +262,8 @@ export async function getPlugins(): Promise<
   const hashes = await getPluginHashes();
   const ret: (PluginConfig & { hash: string; metadata: PluginMetadata })[] = [];
   for (const hash of hashes) {
-    const config = await getPluginConfigByHash(hash);
-    const metadata = await getPluginMetadataByHash(hash);
+    const config = await getPluginConfigByUrl(hash);
+    const metadata = await getPluginMetadataByUrl(hash);
     if (config) {
       ret.push({
         ...config,
@@ -275,11 +284,11 @@ export async function getPlugins(): Promise<
   return ret;
 }
 
-export async function getPluginMetadataByHash(
-  hash: string,
+export async function getPluginMetadataByUrl(
+  url: string,
 ): Promise<PluginMetadata | null> {
   try {
-    const metadata = await pluginMetadataDb.get(hash);
+    const metadata = await pluginMetadataDb.get(url);
     return metadata;
   } catch (e) {
     return null;
@@ -287,21 +296,21 @@ export async function getPluginMetadataByHash(
 }
 
 export async function addPluginMetadata(
-  hash: string,
+  url: string,
   metadata: PluginMetadata,
 ): Promise<PluginMetadata | null> {
-  await pluginMetadataDb.put(hash, metadata);
+  await pluginMetadataDb.put(url, metadata);
   return metadata;
 }
 
 export async function removePluginMetadata(
-  hash: string,
+  url: string,
 ): Promise<PluginMetadata | null> {
-  const existing = await pluginMetadataDb.get(hash);
+  const existing = await pluginMetadataDb.get(url);
 
   if (!existing) return null;
 
-  await pluginMetadataDb.del(hash);
+  await pluginMetadataDb.del(url);
 
   return existing;
 }

src/entries/Background/plugins/utils.ts

@@ -2,25 +2,20 @@ import { addPlugin, addPluginConfig, addPluginMetadata } from '../db';
 import { getPluginConfig } from '../../../utils/misc';
 
 export async function installPlugin(
-  urlOrBuffer: ArrayBuffer | string,
+  url: 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 resp = await fetch(url);
+  const arrayBuffer = await resp.arrayBuffer();
 
   const config = await getPluginConfig(arrayBuffer);
   const hex = Buffer.from(arrayBuffer).toString('hex');
-  const hash = await addPlugin(hex);
-  await addPluginConfig(hash!, config);
-  await addPluginMetadata(hash!, {
+  const hash = await addPlugin(hex, url);
+
+  await addPluginConfig(url, config);
+  await addPluginMetadata(url, {
     ...metadata,
     origin,
     filePath,

src/entries/Background/rpc.ts

@@ -12,16 +12,11 @@ import {
   setNotaryRequestVerification,
   addPlugin,
   getPluginHashes,
-  getPluginByHash,
+  getPluginByUrl,
   removePlugin,
   addPluginConfig,
-  getPluginConfigByHash,
+  getPluginConfigByUrl,
   removePluginConfig,
-  getConnection,
-  setConnection,
-  deleteConnection,
-  addPluginMetadata,
-  getPlugins,
   getCookiesByHost,
   getHeadersByHost,
   getAppState,
@@ -36,8 +31,6 @@ import {
   getPluginConfig,
   hexToArrayBuffer,
   makePlugin,
-  PluginConfig,
-  safeParseJSON,
 } from '../../utils/misc';
 import {
   getLoggingFilter,
@@ -48,11 +41,8 @@ import {
   getRendezvousApi,
 } from '../../utils/storage';
 import { deferredPromise } from '../../utils/promise';
-import { minimatch } from 'minimatch';
 import { OffscreenActionTypes } from '../Offscreen/types';
 import { SidePanelActionTypes } from '../SidePanel/types';
-import { subtractRanges } from '../Offscreen/utils';
-import { mapSecretsToRange } from './plugins/utils';
 import { pushToRedux } from '../utils';
 import {
   connectSession,
@@ -64,6 +54,9 @@ import {
   sendMessage,
   sendPairedMessage,
 } from './ws';
+import { parseHttpMessage } from '../../utils/parser';
+import { mapStringToRange, subtractRanges } from 'tlsn-js';
+import { PresentationJSON } from 'tlsn-js/build/types';
 
 const charwise = require('charwise');
 
@@ -95,20 +88,10 @@ export enum BackgroundActiontype {
   // Content Script
   open_popup = 'open_popup',
   change_route = 'change_route',
-  connect_request = 'connect_request',
-  connect_response = 'connect_response',
-  get_history_request = 'get_history_request',
-  get_history_response = 'get_history_response',
-  get_proof_request = 'get_proof_request',
-  get_proof_response = 'get_proof_response',
   notarize_request = 'notarize_request',
   notarize_response = 'notarize_response',
-  install_plugin_request = 'install_plugin_request',
-  install_plugin_response = 'install_plugin_response',
-  get_plugins_request = 'get_plugins_request',
-  get_plugins_response = 'get_plugins_response',
-  run_plugin_request = 'run_plugin_request',
-  run_plugin_response = 'run_plugin_response',
+  run_plugin_by_url_request = 'run_plugin_by_url_request',
+  run_plugin_by_url_response = 'run_plugin_by_url_response',
   get_secrets_from_transcript = 'get_secrets_from_transcript',
   // App State
   get_logging_level = 'get_logging_level',
@@ -167,9 +150,13 @@ export enum RequestProgress {
   SendingRequest,
   ReadingTranscript,
   FinalizingOutputs,
+  Error,
 }
 
-export function progressText(progress: RequestProgress): string {
+export function progressText(
+  progress: RequestProgress,
+  errorMessage?: string,
+): string {
   switch (progress) {
     case RequestProgress.CreatingProver:
       return 'Creating prover...';
@@ -183,6 +170,8 @@ export function progressText(progress: RequestProgress): string {
       return 'Reading request transcript...';
     case RequestProgress.FinalizingOutputs:
       return 'Finalizing notarization outputs...';
+    case RequestProgress.Error:
+      return errorMessage ? errorMessage : 'Error: Notarization Failed';
   }
 }
 
@@ -199,15 +188,18 @@ export type RequestHistory = {
   status: '' | 'pending' | 'success' | 'error';
   progress?: RequestProgress;
   error?: any;
-  proof?: { session: any; substrings: any };
+  proof?: { session: any; substrings: any } | PresentationJSON;
   requestBody?: any;
   verification?: {
     sent: string;
     recv: string;
+    verifierKey: string;
+    notaryKey?: string;
   };
   secretHeaders?: string[];
   secretResps?: string[];
   cid?: string;
+  errorMessage?: string;
   metadata?: {
     [k: string]: string;
   };
@@ -261,20 +253,10 @@ export const initRPC = () => {
           return handleExecP2PPluginProver(request);
         case BackgroundActiontype.open_popup:
           return handleOpenPopup(request);
-        case BackgroundActiontype.connect_request:
-          return handleConnect(request);
-        case BackgroundActiontype.get_history_request:
-          return handleGetHistory(request);
-        case BackgroundActiontype.get_proof_request:
-          return handleGetProof(request);
         case BackgroundActiontype.notarize_request:
           return handleNotarizeRequest(request);
-        case BackgroundActiontype.install_plugin_request:
-          return handleInstallPluginRequest(request);
-        case BackgroundActiontype.get_plugins_request:
-          return handleGetPluginsRequest(request);
-        case BackgroundActiontype.run_plugin_request:
-          return handleRunPluginCSRequest(request);
+        case BackgroundActiontype.run_plugin_by_url_request:
+          return handleRunPluginByURLRequest(request);
         case BackgroundActiontype.get_logging_level:
           getLoggingFilter().then(sendResponse);
           return true;
@@ -428,9 +410,9 @@ async function handleUpdateRequestProgress(
   request: BackgroundAction,
   sendResponse: (data?: any) => void,
 ) {
-  const { id, progress } = request.data;
+  const { id, progress, errorMessage } = request.data;
 
-  const newReq = await setNotaryRequestProgress(id, progress);
+  const newReq = await setNotaryRequestProgress(id, progress, errorMessage);
   if (!newReq) return;
   await pushToRedux(addRequestHistory(await getNotaryRequest(id)));
 
@@ -551,74 +533,82 @@ async function runPluginProver(request: BackgroundAction, now = Date.now()) {
   });
 
   await setNotaryRequestStatus(id, 'pending');
-
   await pushToRedux(addRequestHistory(await getNotaryRequest(id)));
 
-  const onProverResponse = async (request: any) => {
-    const { data, type } = request;
+  let listenerActive = true;
+  let responseListener: (request: any) => void;
 
-    if (type !== OffscreenActionTypes.create_prover_response) {
-      return;
-    }
+  const proverPromise = new Promise<void>((resolve, reject) => {
+    responseListener = async (request: any) => {
+      if (!listenerActive) return;
 
-    if (data.error) {
-      console.error(data.error);
-      return;
-    }
+      const { data, type } = request;
 
-    if (data.id !== id) {
-      return;
-    }
-
-    if (getSecretResponse) {
-      const body = data.transcript.recv.split('\r\n').reduce(
-        (state: { headerEnd: boolean; body: string[] }, line: string) => {
-          if (state.headerEnd) {
-            state.body.push(line);
-          } else if (!line) {
-            state.headerEnd = true;
-          }
-
-          return state;
-        },
-        { headerEnd: false, body: [] },
-      ).body;
-
-      if (body.length == 1) {
-        secretResps = await getSecretResponseFn(body[0]);
-      } else {
-        secretResps = await getSecretResponseFn(
-          body.filter((txt: string) => {
-            const json = safeParseJSON(txt);
-            return typeof json === 'object';
-          })[0],
-        );
+      if (type !== OffscreenActionTypes.create_prover_response) {
+        return;
       }
-    }
 
-    const commit = {
-      sent: subtractRanges(
-        data.transcript.ranges.sent.all,
-        mapSecretsToRange(secretHeaders, data.transcript.sent),
-      ),
-      recv: subtractRanges(
-        data.transcript.ranges.recv.all,
-        mapSecretsToRange(secretResps, data.transcript.recv),
-      ),
+      if (data.id !== id) {
+        return;
+      }
+
+      try {
+        if (data.error) {
+          throw new Error(data.error);
+        }
+
+        const transcript: { recv: number[]; sent: number[] } = data.transcript;
+
+        const { body: recvBody } = parseHttpMessage(
+          Buffer.from(transcript.recv),
+          'response',
+        );
+
+        if (getSecretResponse) {
+          secretResps = await getSecretResponseFn(
+            ...recvBody.map((body) => body.toString('utf-8')),
+          );
+        }
+
+        const commit = {
+          sent: subtractRanges(
+            { start: 0, end: transcript.sent.length },
+            mapStringToRange(
+              secretHeaders,
+              Buffer.from(transcript.sent).toString('utf-8'),
+            ),
+          ),
+          recv: subtractRanges(
+            { start: 0, end: transcript.recv.length },
+            mapStringToRange(
+              secretResps,
+              Buffer.from(transcript.recv).toString('utf-8'),
+            ),
+          ),
+        };
+
+        browser.runtime.sendMessage({
+          type: OffscreenActionTypes.create_presentation_request,
+          data: {
+            id,
+            commit,
+            notaryUrl,
+            websocketProxyUrl,
+          },
+        });
+
+        resolve();
+      } catch (error) {
+        console.error('Prover response error:', error);
+        reject(error);
+      } finally {
+        listenerActive = false;
+        browser.runtime.onMessage.removeListener(responseListener);
+      }
     };
 
-    browser.runtime.sendMessage({
-      type: OffscreenActionTypes.create_presentation_request,
-      data: {
-        id,
-        commit,
-      },
-    });
-
-    browser.runtime.onMessage.removeListener(onProverResponse);
-  };
-
-  browser.runtime.onMessage.addListener(onProverResponse);
+    browser.runtime.onMessage.addListener(responseListener);
+  });
 
   browser.runtime.sendMessage({
     type: OffscreenActionTypes.create_prover_request,
@@ -634,6 +624,34 @@ async function runPluginProver(request: BackgroundAction, now = Date.now()) {
       maxSentData,
     },
   });
+
+  const timeoutPromise = new Promise((_, reject) => {
+    setTimeout(() => {
+      if (listenerActive) {
+        listenerActive = false;
+        browser.runtime.onMessage.removeListener(responseListener);
+        reject(new Error('Notarization Timed Out'));
+      }
+      // 3 minute timeout
+    }, 180000);
+  });
+
+  try {
+    await Promise.race([proverPromise, timeoutPromise]);
+  } catch (error: any) {
+    await setNotaryRequestStatus(id, 'error');
+    await setNotaryRequestError(id, error.message);
+    browser.runtime.sendMessage({
+      type: BackgroundActiontype.update_request_progress,
+      data: {
+        id,
+        progress: RequestProgress.Error,
+        error: error.message,
+      },
+    });
+    await pushToRedux(addRequestHistory(await getNotaryRequest(id)));
+    throw error;
+  }
 }
 
 async function handleGetSecretsFromTranscript(
@@ -641,39 +659,22 @@ async function handleGetSecretsFromTranscript(
   sendResponse: (data?: any) => void,
 ) {
   const { pluginHash, pluginHex, p2p, transcript, method } = request.data;
-  const hex = (await getPluginByHash(pluginHash)) || pluginHex;
+  const hex = (await getPluginByUrl(pluginHash)) || pluginHex;
   const arrayBuffer = hexToArrayBuffer(hex!);
   const config = await getPluginConfig(arrayBuffer);
   const plugin = await makePlugin(arrayBuffer, config, p2p);
 
-  const body = transcript.recv.split('\r\n').reduce(
-    (state: { headerEnd: boolean; body: string[] }, line: string) => {
-      if (state.headerEnd) {
-        state.body.push(line);
-      } else if (!line) {
-        state.headerEnd = true;
-      }
+  const { body: recvBody } = parseHttpMessage(
+    Buffer.from(transcript.recv),
+    'response',
+  );
 
-      return state;
-    },
-    { headerEnd: false, body: [] },
-  ).body;
+  const out = await plugin.call(
+    method,
+    ...recvBody.map((body) => body.toString('utf-8')),
+  );
 
-  let out;
-
-  if (body.length == 1) {
-    out = await plugin.call(method, body[0]);
-  } else {
-    out = await plugin.call(
-      method,
-      body.filter((txt: string) => {
-        const json = safeParseJSON(txt);
-        return typeof json === 'object';
-      })[0],
-    );
-  }
-
-  const secretResps = JSON.parse(out.string());
+  const secretResps = JSON.parse(out?.string() || '{}');
   await browser.runtime.sendMessage({
     type: OffscreenActionTypes.get_secrets_from_transcript_success,
     data: {
@@ -684,7 +685,7 @@ async function handleGetSecretsFromTranscript(
 
 async function runP2PPluginProver(request: BackgroundAction, now = Date.now()) {
   const {
-    pluginHash,
+    pluginUrl,
     pluginHex,
     url,
     method,
@@ -706,7 +707,7 @@ async function runP2PPluginProver(request: BackgroundAction, now = Date.now()) {
   await browser.runtime.sendMessage({
     type: OffscreenActionTypes.start_p2p_prover,
     data: {
-      pluginHash,
+      pluginUrl,
       pluginHex,
       url,
       method,
@@ -796,10 +797,10 @@ async function handleAddPlugin(
   sendResponse: (data?: any) => void,
 ) {
   try {
-    const config = await getPluginConfig(hexToArrayBuffer(request.data));
+    const config = await getPluginConfig(hexToArrayBuffer(request.data.hex));
 
     if (config) {
-      const hash = await addPlugin(request.data);
+      const hash = await addPlugin(request.data.hex, request.data.url);
 
       if (hash) {
         await addPluginConfig(hash, config);
@@ -839,7 +840,7 @@ async function handleGetPluginByHash(
   sendResponse: (data?: any) => void,
 ) {
   const hash = request.data;
-  const hex = await getPluginByHash(hash);
+  const hex = await getPluginByUrl(hash);
   return hex;
 }
 
@@ -848,7 +849,7 @@ async function handleGetPluginConfigByHash(
   sendResponse: (data?: any) => void,
 ) {
   const hash = request.data;
-  const config = await getPluginConfigByHash(hash);
+  const config = await getPluginConfigByUrl(hash);
   return config;
 }
 
@@ -858,14 +859,14 @@ function handleRunPlugin(
 ) {
   (async () => {
     const { hash, method, params, meta } = request.data;
-    const hex = await getPluginByHash(hash);
+    const hex = await getPluginByUrl(hash);
     const arrayBuffer = hexToArrayBuffer(hex!);
     const config = await getPluginConfig(arrayBuffer);
     const plugin = await makePlugin(arrayBuffer, config, meta?.p2p);
     devlog(`plugin::${method}`, params);
     const out = await plugin.call(method, params);
-    devlog(`plugin response: `, out.string());
-    sendResponse(JSON.parse(out.string()));
+    devlog(`plugin response: `, out?.string());
+    sendResponse(JSON.parse(out?.string() || '{}'));
   })();
 
   return true;
@@ -920,180 +921,6 @@ async function handleOpenPopup(request: BackgroundAction) {
   }
 }
 
-async function handleConnect(request: BackgroundAction) {
-  const connection = await getConnection(request.data.origin);
-  const [currentTab] = await browser.tabs.query({
-    active: true,
-    currentWindow: true,
-  });
-
-  if (!connection) {
-    const defer = deferredPromise();
-
-    const { popup, tab } = await openPopup(
-      `connection-approval?origin=${encodeURIComponent(request.data.origin)}&favIconUrl=${encodeURIComponent(currentTab?.favIconUrl || '')}`,
-      request.data.position.left,
-      request.data.position.top,
-    );
-
-    const onMessage = async (req: BackgroundAction) => {
-      if (req.type === BackgroundActiontype.connect_response) {
-        defer.resolve(req.data);
-        if (req.data) {
-          await setConnection(request.data.origin);
-        } else {
-          await deleteConnection(request.data.origin);
-        }
-        browser.runtime.onMessage.removeListener(onMessage);
-        browser.tabs.remove(tab.id!);
-      }
-    };
-
-    const onPopUpClose = (windowId: number) => {
-      if (windowId === popup.id) {
-        defer.resolve(false);
-        browser.windows.onRemoved.removeListener(onPopUpClose);
-      }
-    };
-
-    browser.runtime.onMessage.addListener(onMessage);
-    browser.windows.onRemoved.addListener(onPopUpClose);
-
-    return defer.promise;
-  }
-
-  return true;
-}
-
-async function handleGetHistory(request: BackgroundAction) {
-  const [currentTab] = await browser.tabs.query({
-    active: true,
-    currentWindow: true,
-  });
-
-  const defer = deferredPromise();
-  const {
-    origin,
-    position,
-    method: filterMethod,
-    url: filterUrl,
-    metadata: filterMetadata,
-  } = request.data;
-
-  const { popup, tab } = await openPopup(
-    `get-history-approval?${filterMetadata ? `metadata=${JSON.stringify(filterMetadata)}&` : ''}method=${filterMethod}&url=${filterUrl}&origin=${encodeURIComponent(origin)}&favIconUrl=${encodeURIComponent(currentTab?.favIconUrl || '')}`,
-    position.left,
-    position.top,
-  );
-
-  const onMessage = async (req: BackgroundAction) => {
-    if (req.type === BackgroundActiontype.get_history_response) {
-      if (req.data) {
-        const response = await getNotaryRequests();
-
-        const result = response
-          .map(
-            ({ id, method, url, notaryUrl, websocketProxyUrl, metadata }) => ({
-              id,
-              time: new Date(charwise.decode(id)),
-              method,
-              url,
-              notaryUrl,
-              websocketProxyUrl,
-              metadata,
-            }),
-          )
-          .filter(({ method, url, metadata }) => {
-            let matchedMetadata = true;
-            if (filterMetadata) {
-              matchedMetadata = Object.entries(
-                filterMetadata as { [k: string]: string },
-              ).reduce((bool, [k, v]) => {
-                try {
-                  return bool && minimatch(metadata![k], v);
-                } catch (e) {
-                  return false;
-                }
-              }, matchedMetadata);
-            }
-            return (
-              minimatch(method, filterMethod, { nocase: true }) &&
-              minimatch(url, filterUrl) &&
-              matchedMetadata
-            );
-          });
-
-        defer.resolve(result);
-      } else {
-        defer.reject(new Error('user rejected.'));
-      }
-
-      browser.runtime.onMessage.removeListener(onMessage);
-      browser.tabs.remove(tab.id!);
-    }
-  };
-
-  const onPopUpClose = (windowId: number) => {
-    if (windowId === popup.id) {
-      defer.reject(new Error('user rejected.'));
-      browser.windows.onRemoved.removeListener(onPopUpClose);
-    }
-  };
-
-  browser.runtime.onMessage.addListener(onMessage);
-  browser.windows.onRemoved.addListener(onPopUpClose);
-
-  return defer.promise;
-}
-
-async function handleGetProof(request: BackgroundAction) {
-  const [currentTab] = await browser.tabs.query({
-    active: true,
-    currentWindow: true,
-  });
-
-  const defer = deferredPromise();
-  const { origin, position, id } = request.data;
-
-  const response = await getNotaryRequest(id);
-
-  if (!response) {
-    defer.reject(new Error('proof id not found.'));
-    return defer.promise;
-  }
-
-  const { popup, tab } = await openPopup(
-    `get-proof-approval?id=${id}&origin=${encodeURIComponent(origin)}&favIconUrl=${encodeURIComponent(currentTab?.favIconUrl || '')}`,
-    position.left,
-    position.top,
-  );
-
-  const onMessage = async (req: BackgroundAction) => {
-    if (req.type === BackgroundActiontype.get_proof_response) {
-      if (req.data) {
-        defer.resolve(response?.proof || null);
-      } else {
-        defer.reject(new Error('user rejected.'));
-      }
-
-      browser.runtime.onMessage.removeListener(onMessage);
-      browser.tabs.remove(tab.id!);
-    }
-  };
-
-  const onPopUpClose = (windowId: number) => {
-    if (windowId === popup.id) {
-      defer.reject(new Error('user rejected.'));
-      browser.windows.onRemoved.removeListener(onPopUpClose);
-    }
-  };
-
-  browser.runtime.onMessage.addListener(onMessage);
-  browser.windows.onRemoved.addListener(onPopUpClose);
-
-  return defer.promise;
-}
-
 async function handleNotarizeRequest(request: BackgroundAction) {
   const [currentTab] = await browser.tabs.query({
     active: true,
@@ -1198,76 +1025,7 @@ async function handleNotarizeRequest(request: BackgroundAction) {
   return defer.promise;
 }
 
-async function handleInstallPluginRequest(request: BackgroundAction) {
-  const [currentTab] = await browser.tabs.query({
-    active: true,
-    currentWindow: true,
-  });
-
-  const defer = deferredPromise();
-  const { origin, position, url, metadata } = request.data;
-
-  let arrayBuffer: ArrayBuffer, config: PluginConfig;
-
-  try {
-    const resp = await fetch(url);
-    arrayBuffer = await resp.arrayBuffer();
-    config = await getPluginConfig(arrayBuffer);
-  } catch (e) {
-    defer.reject(e);
-    return defer.promise;
-  }
-
-  const { popup, tab } = await openPopup(
-    `install-plugin-approval?${metadata ? `metadata=${JSON.stringify(metadata)}&` : ''}url=${url}&origin=${encodeURIComponent(origin)}&favIconUrl=${encodeURIComponent(currentTab?.favIconUrl || '')}`,
-    position.left,
-    position.top,
-  );
-
-  const onMessage = async (req: BackgroundAction) => {
-    if (req.type === BackgroundActiontype.install_plugin_response) {
-      if (req.data) {
-        try {
-          const hex = Buffer.from(arrayBuffer).toString('hex');
-          const hash = await addPlugin(hex);
-
-          if (!hash) {
-            throw new Error('Plugin already exist.');
-          }
-
-          await addPluginConfig(hash!, config);
-          await addPluginMetadata(hash!, {
-            ...metadata,
-            origin,
-            filePath: url,
-          });
-          defer.resolve(hash);
-        } catch (e) {
-          defer.reject(e);
-        }
-      } else {
-        defer.reject(new Error('user rejected.'));
-      }
-
-      browser.runtime.onMessage.removeListener(onMessage);
-      browser.tabs.remove(tab.id!);
-    }
-  };
-
-  const onPopUpClose = (windowId: number) => {
-    if (windowId === popup.id) {
-      defer.reject(new Error('user rejected.'));
-      browser.windows.onRemoved.removeListener(onPopUpClose);
-    }
-  };
-
-  browser.runtime.onMessage.addListener(onMessage);
-  browser.windows.onRemoved.addListener(onPopUpClose);
-
-  return defer.promise;
-}
-
-async function handleGetPluginsRequest(request: BackgroundAction) {
+async function handleRunPluginByURLRequest(request: BackgroundAction) {
   const [currentTab] = await browser.tabs.query({
     active: true,
     currentWindow: true,
@@ -1277,92 +1035,59 @@ async function handleGetPluginsRequest(request: BackgroundAction) {
   const {
     origin,
     position,
-    origin: filterOrigin,
-    url: filterUrl,
-    metadata: filterMetadata,
+    url,
+    params,
+    skipConfirmation,
+    verifierApiUrl,
+    proxyApiUrl,
+    headers,
   } = request.data;
 
-  const { popup, tab } = await openPopup(
-    `get-plugins-approval?${filterMetadata ? `metadata=${JSON.stringify(filterMetadata)}&` : ''}&filterOrigin=${filterOrigin}&url=${filterUrl}&origin=${encodeURIComponent(origin)}&favIconUrl=${encodeURIComponent(currentTab?.favIconUrl || '')}`,
-    position.left,
-    position.top,
-  );
+  if (skipConfirmation) {
+    try {
+      browser.runtime.onMessage.addListener(async (req: any) => {
+        if (req.type !== SidePanelActionTypes.execute_plugin_response) return;
+        if (req.data.url !== url) return;
 
-  const onMessage = async (req: BackgroundAction) => {
-    if (req.type === BackgroundActiontype.get_plugins_response) {
-      if (req.data) {
-        const response = await getPlugins();
+        if (req.data.error) defer.reject(req.data.error);
+        if (req.data.proof) defer.resolve(req.data.proof);
+      });
 
-        const result = response.filter(({ metadata }) => {
-          let matchedMetadata = true;
-          if (filterMetadata) {
-            matchedMetadata = Object.entries(
-              filterMetadata as { [k: string]: string },
-            ).reduce((bool, [k, v]) => {
-              try {
-                return bool && minimatch(metadata![k], v);
-              } catch (e) {
-                return false;
-              }
-            }, matchedMetadata);
-          }
-          return (
-            minimatch(metadata.filePath, filterUrl) &&
-            minimatch(metadata.origin, filterOrigin || '**') &&
-            matchedMetadata
-          );
-        });
+      const now = Date.now();
+      const id = charwise.encode(now).toString('hex');
 
-        defer.resolve(result);
-      } else {
-        defer.reject(new Error('user rejected.'));
-      }
+      await browser.runtime.sendMessage({
+        type: OffscreenActionTypes.create_prover_request,
+        data: {
+          id,
+          url,
+          params,
+          headers,
+          verifierApiUrl,
+          proxyApiUrl,
+          maxRecvData: await getMaxRecv(),
+          maxSentData: await getMaxSent(),
+        },
+      });
 
-      browser.runtime.onMessage.removeListener(onMessage);
-      browser.tabs.remove(tab.id!);
+      return defer.promise;
+    } catch (error) {
+      defer.reject(error);
+      return defer.promise;
     }
-  };
-
-  const onPopUpClose = (windowId: number) => {
-    if (windowId === popup.id) {
-      defer.reject(new Error('user rejected.'));
-      browser.windows.onRemoved.removeListener(onPopUpClose);
-    }
-  };
-
-  browser.runtime.onMessage.addListener(onMessage);
-  browser.windows.onRemoved.addListener(onPopUpClose);
-
-  return defer.promise;
-}
-
-async function handleRunPluginCSRequest(request: BackgroundAction) {
-  const [currentTab] = await browser.tabs.query({
-    active: true,
-    currentWindow: true,
-  });
-
-  const defer = deferredPromise();
-  const { origin, position, hash } = request.data;
-
-  const plugin = await getPluginByHash(hash);
-  const config = await getPluginConfigByHash(hash);
-  let isUserClose = true;
-
-  if (!plugin || !config) {
-    defer.reject(new Error('plugin not found.'));
-    return defer.promise;
   }
 
+  let isUserClose = true;
+
   const { popup, tab } = await openPopup(
-    `run-plugin-approval?hash=${hash}&origin=${encodeURIComponent(origin)}&favIconUrl=${encodeURIComponent(currentTab?.favIconUrl || '')}`,
+    `run-plugin-approval?url=${url}&origin=${encodeURIComponent(origin)}&favIconUrl=${encodeURIComponent(currentTab?.favIconUrl || '')}&params=${encodeURIComponent(JSON.stringify(params) || '')}`,
     position.left,
     position.top,
   );
 
   const onPluginRequest = async (req: any) => {
     if (req.type !== SidePanelActionTypes.execute_plugin_response) return;
-    if (req.data.hash !== hash) return;
+    if (req.data.url !== url) return;
 
     if (req.data.error) defer.reject(req.data.error);
     if (req.data.proof) defer.resolve(req.data.proof);
@@ -1371,7 +1096,7 @@ async function handleRunPluginCSRequest(request: BackgroundAction) {
   };
 
   const onMessage = async (req: BackgroundAction) => {
-    if (req.type === BackgroundActiontype.run_plugin_response) {
+    if (req.type === BackgroundActiontype.run_plugin_by_url_response) {
       if (req.data) {
         browser.runtime.onMessage.addListener(onPluginRequest);
       } else {

src/entries/Background/ws.ts

@@ -17,13 +17,12 @@ import {
   setPairing,
 } from '../../reducers/p2p';
 import { pushToRedux } from '../utils';
-import { getPluginByHash } from './db';
+import { getPluginByUrl } from './db';
 import browser from 'webextension-polyfill';
 import { OffscreenActionTypes } from '../Offscreen/types';
 import { getMaxRecv, getMaxSent, getRendezvousApi } from '../../utils/storage';
 import { SidePanelActionTypes } from '../SidePanel/types';
-import { Transcript } from 'tlsn-js';
-import { VerifierOutput } from 'tlsn-wasm';
+import { Transcript, VerifierOutput } from 'tlsn-js';
 
 const state: {
   clientId: string;
@@ -186,7 +185,7 @@ export const connectSession = async () => {
       }
       case 'request_proof_by_hash': {
         const { pluginHash, from } = message.params;
-        const plugin = await getPluginByHash(pluginHash);
+        const plugin = await getPluginByUrl(pluginHash);
         if (plugin) {
           state.incomingProofRequests = [
             ...new Set(state.incomingProofRequests.concat(plugin)),
@@ -337,7 +336,7 @@ async function handleRemoveIncomingProofRequest(message: {
   params: { pluginHash: string };
 }) {
   const { pluginHash } = message.params;
-  const plugin = await getPluginByHash(pluginHash);
+  const plugin = await getPluginByUrl(pluginHash);
   const incomingProofRequest = [];
   for (const hex of state.incomingProofRequests) {
     if (plugin) {
@@ -425,7 +424,7 @@ export async function sendPairedMessage(method: string, params?: any) {
 }
 
 export const requestProof = async (pluginHash: string) => {
-  const pluginHex = await getPluginByHash(pluginHash);
+  const pluginHex = await getPluginByUrl(pluginHash);
   sendPairedMessage('request_proof', {
     plugin: pluginHex,
     pluginHash,

src/entries/Content/content.ts

@@ -1,40 +1,9 @@
 import { ContentScriptTypes, RPCClient } from './rpc';
-import { RequestHistory } from '../Background/rpc';
-import { PluginConfig, PluginMetadata } from '../../utils/misc';
 import { PresentationJSON } from '../../utils/types';
 
 const client = new RPCClient();
 
 class TLSN {
-  async getHistory(
-    method: string,
-    url: string,
-    metadata?: {
-      [key: string]: string;
-    },
-  ): Promise<
-    (Pick<
-      RequestHistory,
-      'id' | 'method' | 'notaryUrl' | 'url' | 'websocketProxyUrl'
-    > & { time: Date })[]
-  > {
-    const resp = await client.call(ContentScriptTypes.get_history, {
-      method,
-      url,
-      metadata,
-    });
-
-    return resp || [];
-  }
-
-  async getProof(id: string): Promise<PresentationJSON | null> {
-    const resp = await client.call(ContentScriptTypes.get_proof, {
-      id,
-    });
-
-    return resp || null;
-  }
-
   async notarize(
     url: string,
     requestOptions?: {
@@ -67,37 +36,31 @@ class TLSN {
     return resp;
   }
 
-  async installPlugin(
-    url: string,
-    metadata?: { [k: string]: string },
-  ): Promise<string> {
-    const resp = await client.call(ContentScriptTypes.install_plugin, {
+  async runPlugin(url: string, params?: Record<string, string>) {
+    const resp = await client.call(ContentScriptTypes.run_plugin_by_url, {
       url,
-      metadata,
+      params,
     });
 
     return resp;
   }
 
-  async getPlugins(
+  async runPluginWithVerifier(
     url: string,
-    origin?: string,
-    metadata?: {
-      [key: string]: string;
+    verifierOptions: {
+      verifierApiUrl: string;
+      proxyApiUrl: string;
+      headers?: { [key: string]: string };
     },
-  ): Promise<(PluginConfig & { hash: string; metadata: PluginMetadata })[]> {
-    const resp = await client.call(ContentScriptTypes.get_plugins, {
+    params?: Record<string, string>,
+  ) {
+    const resp = await client.call(ContentScriptTypes.run_plugin_by_url, {
       url,
-      origin,
-      metadata,
-    });
-
-    return resp;
-  }
-
-  async runPlugin(hash: string) {
-    const resp = await client.call(ContentScriptTypes.run_plugin, {
-      hash,
+      params,
+      skipConfirmation: true, // Signal to skip confirmation window
+      verifierApiUrl: verifierOptions.verifierApiUrl,
+      proxyApiUrl: verifierOptions.proxyApiUrl,
+      headers: verifierOptions.headers,
     });
 
     return resp;
@@ -105,11 +68,7 @@ class TLSN {
 }
 
 const connect = async () => {
-  const resp = await client.call(ContentScriptTypes.connect);
-
-  if (resp) {
-    return new TLSN();
-  }
+  return new TLSN();
 };
 
 // @ts-ignore

src/entries/Content/index.ts

@@ -25,70 +25,6 @@ import { urlify } from '../../utils/misc';
     }
   });
 
-  server.on(ContentScriptTypes.connect, async () => {
-    const connected = await browser.runtime.sendMessage({
-      type: BackgroundActiontype.connect_request,
-      data: {
-        ...getPopupData(),
-      },
-    });
-
-    if (!connected) throw new Error('user rejected.');
-
-    return connected;
-  });
-
-  server.on(
-    ContentScriptTypes.get_history,
-    async (
-      request: ContentScriptRequest<{
-        method: string;
-        url: string;
-        metadata?: { [k: string]: string };
-      }>,
-    ) => {
-      const {
-        method: filterMethod,
-        url: filterUrl,
-        metadata,
-      } = request.params || {};
-
-      if (!filterMethod || !filterUrl)
-        throw new Error('params must include method and url.');
-
-      const response: RequestHistory[] = await browser.runtime.sendMessage({
-        type: BackgroundActiontype.get_history_request,
-        data: {
-          ...getPopupData(),
-          method: filterMethod,
-          url: filterUrl,
-          metadata,
-        },
-      });
-
-      return response;
-    },
-  );
-
-  server.on(
-    ContentScriptTypes.get_proof,
-    async (request: ContentScriptRequest<{ id: string }>) => {
-      const { id } = request.params || {};
-
-      if (!id) throw new Error('params must include id.');
-
-      const proof = await browser.runtime.sendMessage({
-        type: BackgroundActiontype.get_proof_request,
-        data: {
-          ...getPopupData(),
-          id,
-        },
-      });
-
-      return proof;
-    },
-  );
-
   server.on(
     ContentScriptTypes.notarize,
     async (
@@ -139,73 +75,23 @@ import { urlify } from '../../utils/misc';
   );
 
   server.on(
-    ContentScriptTypes.install_plugin,
+    ContentScriptTypes.run_plugin_by_url,
     async (
       request: ContentScriptRequest<{
         url: string;
-        metadata?: { [k: string]: string };
+        params?: Record<string, string>;
       }>,
     ) => {
-      const { url, metadata } = request.params || {};
+      const { url, params } = request.params || {};
 
-      if (!url) throw new Error('params must include url.');
+      if (!url) throw new Error('params must include url');
 
-      const response: RequestHistory[] = await browser.runtime.sendMessage({
-        type: BackgroundActiontype.install_plugin_request,
+      const response = await browser.runtime.sendMessage({
+        type: BackgroundActiontype.run_plugin_by_url_request,
         data: {
           ...getPopupData(),
           url,
-          metadata,
-        },
-      });
-
-      return response;
-    },
-  );
-
-  server.on(
-    ContentScriptTypes.get_plugins,
-    async (
-      request: ContentScriptRequest<{
-        url: string;
-        origin?: string;
-        metadata?: { [k: string]: string };
-      }>,
-    ) => {
-      const {
-        url: filterUrl,
-        origin: filterOrigin,
-        metadata,
-      } = request.params || {};
-
-      if (!filterUrl) throw new Error('params must include url.');
-
-      const response = await browser.runtime.sendMessage({
-        type: BackgroundActiontype.get_plugins_request,
-        data: {
-          ...getPopupData(),
-          url: filterUrl,
-          origin: filterOrigin,
-          metadata,
-        },
-      });
-
-      return response;
-    },
-  );
-
-  server.on(
-    ContentScriptTypes.run_plugin,
-    async (request: ContentScriptRequest<{ hash: string }>) => {
-      const { hash } = request.params || {};
-
-      if (!hash) throw new Error('params must include hash');
-
-      const response = await browser.runtime.sendMessage({
-        type: BackgroundActiontype.run_plugin_request,
-        data: {
-          ...getPopupData(),
-          hash,
+          params,
         },
       });
 

src/entries/Content/rpc.ts

@@ -1,13 +1,17 @@
 import { deferredPromise, PromiseResolvers } from '../../utils/promise';
 
+export interface RunPluginByUrlData {
+  url: string;
+  params?: Record<string, string>;
+  skipConfirmation?: boolean;
+  verifierApiUrl?: string;
+  proxyApiUrl?: string;
+  headers?: { [key: string]: string };
+}
+
 export enum ContentScriptTypes {
-  connect = 'tlsn/cs/connect',
-  get_history = 'tlsn/cs/get_history',
-  get_proof = 'tlsn/cs/get_proof',
   notarize = 'tlsn/cs/notarize',
-  install_plugin = 'tlsn/cs/install_plugin',
-  get_plugins = 'tlsn/cs/get_plugins',
-  run_plugin = 'tlsn/cs/run_plugin',
+  run_plugin_by_url = 'tlsn/cs/run_plugin_by_url',
 }
 
 export type ContentScriptRequest<params> = {

src/entries/Offscreen/rpc.ts

@@ -4,23 +4,27 @@ import {
   progressText,
   RequestProgress,
 } from '../Background/rpc';
-import { Method } from 'tlsn-wasm';
 import {
+  mapStringToRange,
   NotaryServer,
+  Method,
   Presentation as TPresentation,
   Prover as TProver,
+  subtractRanges,
   Transcript,
   Verifier as TVerifier,
 } from 'tlsn-js';
-import { devlog, urlify } from '../../utils/misc';
+import { convertNotaryWsToHttp, devlog, urlify } from '../../utils/misc';
 import * as Comlink from 'comlink';
 import { PresentationJSON as PresentationJSONa7 } from 'tlsn-js/build/types';
-import { subtractRanges } from './utils';
-import { mapSecretsToRange } from '../Background/plugins/utils';
 import { OffscreenActionTypes } from './types';
 import { PresentationJSON } from '../../utils/types';
-import { verify } from 'tlsn-js-v5';
 import { waitForEvent } from '../utils';
+import {
+  setNotaryRequestError,
+  setNotaryRequestStatus,
+} from '../Background/db';
+import { getNotaryApi, getProxyApi } from '../../utils/storage';
 
 const { init, Prover, Presentation, Verifier }: any = Comlink.wrap(
   new Worker(new URL('./worker.ts', import.meta.url)),
@@ -33,7 +37,10 @@ export const initThreads = async () => {
     type: BackgroundActiontype.get_logging_level,
     hardwareConcurrency: navigator.hardwareConcurrency,
   });
-  await init({ loggingLevel });
+  await init({
+    loggingLevel,
+    hardwareConcurrency: navigator.hardwareConcurrency,
+  });
 };
 export const onNotarizationRequest = async (request: any) => {
   const { id } = request.data;
@@ -105,7 +112,7 @@ export const onCreateProverRequest = async (request: any) => {
 };
 
 export const onCreatePresentationRequest = async (request: any) => {
-  const { id, commit } = request.data;
+  const { id, commit, notaryUrl, websocketProxyUrl } = request.data;
   const prover = provers[id];
 
   try {
@@ -121,13 +128,19 @@ export const onCreatePresentationRequest = async (request: any) => {
       websocketProxyUrl: notarizationOutputs.websocketProxyUrl,
       reveal: commit,
     })) as TPresentation;
-    const presentationJSON = await presentation.json();
-
+    const json = await presentation.json();
     browser.runtime.sendMessage({
       type: BackgroundActiontype.finish_prove_request,
       data: {
         id,
-        proof: presentationJSON,
+        proof: {
+          ...json,
+          meta: {
+            ...json.meta,
+            notaryUrl,
+            websocketProxyUrl,
+          },
+        },
       },
     });
 
@@ -176,7 +189,12 @@ export const onVerifyProof = async (request: any, sendResponse: any) => {
 
 export const onVerifyProofRequest = async (request: any) => {
   const proof: PresentationJSON = request.data.proof;
-  const result: { sent: string; recv: string } = await verifyProof(proof);
+  const result: {
+    sent: string;
+    recv: string;
+    verifierKey?: string;
+    notaryKey?: string;
+  } = await verifyProof(proof);
 
   chrome.runtime.sendMessage<any, string>({
     type: BackgroundActiontype.finish_prove_request,
@@ -185,6 +203,8 @@ export const onVerifyProofRequest = async (request: any) => {
       verification: {
         sent: result.sent,
         recv: result.recv,
+        verifierKey: result.verifierKey,
+        notaryKey: result.notaryKey,
       },
     },
   });
@@ -232,7 +252,7 @@ export const startP2PVerifier = async (request: any) => {
 
 export const startP2PProver = async (request: any) => {
   const {
-    pluginHash,
+    pluginUrl,
     pluginHex,
     url,
     method,
@@ -249,7 +269,7 @@ export const startP2PProver = async (request: any) => {
   const hostname = urlify(url)?.hostname || '';
 
   const prover: TProver = await new Prover({
-    id: pluginHash,
+    id: pluginUrl,
     serverDns: hostname,
     maxSentData,
     maxRecvData,
@@ -258,7 +278,7 @@ export const startP2PProver = async (request: any) => {
   browser.runtime.sendMessage({
     type: BackgroundActiontype.prover_instantiated,
     data: {
-      pluginHash,
+      pluginUrl,
     },
   });
 
@@ -271,7 +291,7 @@ export const startP2PProver = async (request: any) => {
   browser.runtime.sendMessage({
     type: BackgroundActiontype.prover_setup,
     data: {
-      pluginHash,
+      pluginUrl,
     },
   });
 
@@ -279,7 +299,7 @@ export const startP2PProver = async (request: any) => {
   browser.runtime.sendMessage({
     type: BackgroundActiontype.prover_started,
     data: {
-      pluginHash,
+      pluginUrl,
     },
   });
   await proofRequestStart;
@@ -298,7 +318,7 @@ export const startP2PProver = async (request: any) => {
     browser.runtime.sendMessage({
       type: BackgroundActiontype.get_secrets_from_transcript,
       data: {
-        pluginHash,
+        pluginUrl,
         pluginHex,
         method: getSecretResponse,
         transcript,
@@ -315,25 +335,18 @@ export const startP2PProver = async (request: any) => {
 
   const commit = {
     sent: subtractRanges(
-      transcript.ranges.sent.all,
-      mapSecretsToRange(secretHeaders, transcript.sent),
+      { start: 0, end: transcript.sent.length },
+      mapStringToRange(
+        secretHeaders,
+        Buffer.from(transcript.sent).toString('utf-8'),
+      ),
     ),
     recv: subtractRanges(
-      transcript.ranges.recv.all,
-      secretResps
-        .map((secret: string) => {
-          const index = transcript.recv.indexOf(secret);
-          return index > -1
-            ? {
-                start: index,
-                end: index + secret.length,
-              }
-            : null;
-        })
-        .filter((data: any) => !!data) as {
-        start: number;
-        end: number;
-      }[],
+      { start: 0, end: transcript.recv.length },
+      mapStringToRange(
+        secretResps,
+        Buffer.from(transcript.recv).toString('utf-8'),
+      ),
     ),
   };
 
@@ -401,12 +414,18 @@ async function createProof(options: {
 
   const commit = {
     sent: subtractRanges(
-      transcript.ranges.sent.all,
-      mapSecretsToRange(secretHeaders, transcript.sent),
+      { start: 0, end: transcript.sent.length },
+      mapStringToRange(
+        secretHeaders,
+        Buffer.from(transcript.sent).toString('utf-8'),
+      ),
     ),
     recv: subtractRanges(
-      transcript.ranges.recv.all,
-      mapSecretsToRange(secretResps, transcript.recv),
+      { start: 0, end: transcript.recv.length },
+      mapStringToRange(
+        secretResps,
+        Buffer.from(transcript.recv).toString('utf-8'),
+      ),
     ),
   };
 
@@ -421,13 +440,22 @@ async function createProof(options: {
     reveal: commit,
   })) as TPresentation;
 
-  return presentation.json();
+  const json = await presentation.json();
+  return {
+    ...json,
+    meta: {
+      ...json,
+      notaryUrl: notaryUrl,
+      websocketProxyUrl: websocketProxyUrl,
+    },
+  };
 }
 
 async function createProver(options: {
   url: string;
-  notaryUrl: string;
-  websocketProxyUrl: string;
+  verifierApiUrl?: string;
+  proxyApiUrl?: string;
+  notaryUrl?: string;
   method?: Method;
   headers?: {
     [name: string]: string;
@@ -444,74 +472,165 @@ async function createProver(options: {
     body,
     maxSentData,
     maxRecvData,
-    notaryUrl,
-    websocketProxyUrl,
+    verifierApiUrl,
+    proxyApiUrl,
     id,
   } = options;
 
   const hostname = urlify(url)?.hostname || '';
-  const notary = NotaryServer.from(notaryUrl);
 
-  updateRequestProgress(id, RequestProgress.CreatingProver);
-  const prover: TProver = await new Prover({
-    id,
-    serverDns: hostname,
-    maxSentData,
-    maxRecvData,
-  });
+  try {
+    const prover: TProver = await handleProgress(
+      id,
+      RequestProgress.CreatingProver,
+      () =>
+        new Prover({
+          id,
+          serverDns: hostname,
+          maxSentData,
+          maxRecvData,
+        }),
+      'Error creating prover',
+    );
 
-  updateRequestProgress(id, RequestProgress.GettingSession);
-  const sessionUrl = await notary.sessionUrl(maxSentData, maxRecvData);
+    const sessionUrl = await handleProgress(
+      id,
+      RequestProgress.GettingSession,
+      async () => {
+        if (verifierApiUrl) {
+          return verifierApiUrl;
+        } else {
+          const notary = NotaryServer.from(
+            options.notaryUrl || (await getNotaryApi()),
+          );
+          return notary.sessionUrl(maxSentData, maxRecvData);
+        }
+      },
+      'Error getting session from Verifier/Notary',
+    );
 
-  updateRequestProgress(id, RequestProgress.SettingUpProver);
-  await prover.setup(sessionUrl);
+    await handleProgress(
+      id,
+      RequestProgress.SettingUpProver,
+      () => prover.setup(sessionUrl),
+      'Error setting up prover',
+    );
 
-  updateRequestProgress(id, RequestProgress.SendingRequest);
-  await prover.sendRequest(websocketProxyUrl + `?token=${hostname}`, {
-    url,
-    method,
-    headers,
-    body,
-  });
+    const proxyUrl = proxyApiUrl || (await getProxyApi());
 
-  return prover;
+    await handleProgress(
+      id,
+      RequestProgress.SendingRequest,
+      () =>
+        prover.sendRequest(proxyUrl + `?token=${hostname}`, {
+          url,
+          method,
+          headers,
+          body,
+        }),
+      'Error sending request',
+    );
+
+    return prover;
+  } catch (error) {
+    throw error;
+  }
 }
 
-async function verifyProof(
-  proof: PresentationJSON,
-): Promise<{ sent: string; recv: string }> {
-  let result: { sent: string; recv: string };
+async function verifyProof(proof: PresentationJSON): Promise<{
+  sent: string;
+  recv: string;
+  verifierKey?: string;
+  notaryKey?: string;
+}> {
+  let result: {
+    sent: string;
+    recv: string;
+    verifierKey?: string;
+    notaryKey?: string;
+  };
 
   switch (proof.version) {
-    case undefined: {
-      result = await verify(proof);
-      break;
-    }
-    case '0.1.0-alpha.7': {
-      const presentation: TPresentation = await new Presentation(proof.data);
-      const verifierOutput = await presentation.verify();
-      const transcript = new Transcript({
-        sent: verifierOutput.transcript.sent,
-        recv: verifierOutput.transcript.recv,
-      });
+    case undefined:
+    case '0.1.0-alpha.7':
+    case '0.1.0-alpha.8':
+    case '0.1.0-alpha.9':
       result = {
-        sent: transcript.sent(),
-        recv: transcript.recv(),
+        sent: 'version not supported',
+        recv: 'version not supported',
       };
       break;
-    }
+    case '0.1.0-alpha.10':
+      result = await verify(proof);
+      break;
   }
 
-  return result;
+  return result!;
 }
 
-function updateRequestProgress(id: string, progress: RequestProgress) {
-  devlog(`Request ${id}: ${progressText(progress)}`);
+async function verify(proof: PresentationJSON) {
+  if (proof.version !== '0.1.0-alpha.10') {
+    throw new Error('wrong version');
+  }
+  const presentation: TPresentation = await new Presentation(proof.data);
+  const verifierOutput = await presentation.verify();
+  const transcript = new Transcript({
+    sent: verifierOutput.transcript.sent,
+    recv: verifierOutput.transcript.recv,
+  });
+  const vk = await presentation.verifyingKey();
+  const verifyingKey = Buffer.from(vk.data).toString('hex');
+  const notaryUrl = proof.meta.notaryUrl
+    ? convertNotaryWsToHttp(proof.meta.notaryUrl)
+    : '';
+  const publicKey = await new NotaryServer(notaryUrl)
+    .publicKey()
+    .catch(() => '');
+  return {
+    sent: transcript.sent(),
+    recv: transcript.recv(),
+    verifierKey: verifyingKey,
+    notaryKey: publicKey,
+  };
+}
+
+function updateRequestProgress(
+  id: string,
+  progress: RequestProgress,
+  errorMessage?: string,
+) {
+  const progressMessage =
+    progress === RequestProgress.Error
+      ? `${errorMessage || 'Notarization Failed'}`
+      : progressText(progress);
+  devlog(`Request ${id}: ${progressMessage}`);
+
   browser.runtime.sendMessage({
     type: BackgroundActiontype.update_request_progress,
     data: {
       id,
-      progress: progress,
+      progress,
+      errorMessage,
     },
   });
 }
+
+async function handleProgress<T>(
+  id: string,
+  progress: RequestProgress,
+  action: () => Promise<T>,
+  errorMessage: string,
+): Promise<T> {
+  try {
+    updateRequestProgress(id, progress);
+    return await action();
+  } catch (error: any) {
+    updateRequestProgress(id, RequestProgress.Error, errorMessage);
+    await setNotaryRequestStatus(id, 'error');
+    await setNotaryRequestError(
+      id,
+      errorMessage || error.message || 'Unknown error',
+    );
+    throw error;
+  }
+}

src/entries/Popup/Popup.tsx

@@ -1,14 +1,8 @@
 import React, { useEffect, useState } from 'react';
 import { Navigate, Route, Routes, useNavigate } from 'react-router';
 import { useDispatch } from 'react-redux';
-import {
-  setActiveTab,
-  setRequests,
-  useActiveTab,
-  useActiveTabUrl,
-} from '../../reducers/requests';
+import { setActiveTab, setRequests } from '../../reducers/requests';
 import { BackgroundActiontype } from '../Background/rpc';
-import Requests from '../../pages/Requests';
 import Options from '../../pages/Options';
 import Request from '../../pages/Requests/Request';
 import Home from '../../pages/Home';
@@ -16,32 +10,20 @@ import logo from '../../assets/img/icon-128.png';
 import RequestBuilder from '../../pages/RequestBuilder';
 import Notarize from '../../pages/Notarize';
 import ProofViewer from '../../pages/ProofViewer';
-import History from '../../pages/History';
 import ProofUploader from '../../pages/ProofUploader';
 import browser from 'webextension-polyfill';
 import store from '../../utils/store';
-import PluginUploadInfo from '../../components/PluginInfo';
-import ConnectionDetailsModal from '../../components/ConnectionDetailsModal';
-import { ConnectionApproval } from '../../pages/ConnectionApproval';
-import { GetHistoryApproval } from '../../pages/GetHistoryApproval';
-import { GetProofApproval } from '../../pages/GetProofApproval';
+import { isPopupWindow } from '../../utils/misc';
 import { NotarizeApproval } from '../../pages/NotarizeApproval';
-import { InstallPluginApproval } from '../../pages/InstallPluginApproval';
-import { GetPluginsApproval } from '../../pages/GetPluginsApproval';
-import { RunPluginApproval } from '../../pages/RunPluginApproval';
-import Icon from '../../components/Icon';
-import classNames from 'classnames';
-import { getConnection } from '../Background/db';
-import { useIsConnected, setConnection } from '../../reducers/requests';
 import { MenuIcon } from '../../components/Menu';
-import Plugins from '../../pages/Plugins';
 import { P2PHome } from '../../pages/PeerToPeer';
 import { fetchP2PState } from '../../reducers/p2p';
+import { RunPluginByUrlApproval } from '../../pages/RunPluginByUrlApproval';
 
 const Popup = () => {
   const dispatch = useDispatch();
   const navigate = useNavigate();
-
+  const [isPopup, setIsPopup] = useState(isPopupWindow());
   useEffect(() => {
     fetchP2PState();
   }, []);
@@ -101,8 +83,11 @@ const Popup = () => {
           onClick={() => navigate('/')}
         />
         <div className="flex flex-row flex-grow items-center justify-end gap-4">
-          <AppConnectionLogo />
-          <MenuIcon />
+          {!isPopup && (
+            <>
+              <MenuIcon />
+            </>
+          )}
         </div>
       </div>
       <Routes>
@@ -114,20 +99,13 @@ const Popup = () => {
         <Route path="/requests" element={<Home tab="network" />} />
         <Route path="/custom/*" element={<RequestBuilder />} />
         <Route path="/options" element={<Options />} />
-        <Route path="/plugins" element={<Plugins />} />
         <Route path="/home" element={<Home />} />
-        <Route path="/plugininfo" element={<PluginUploadInfo />} />
-        <Route path="/connection-approval" element={<ConnectionApproval />} />
-        <Route path="/get-history-approval" element={<GetHistoryApproval />} />
-        <Route path="/get-proof-approval" element={<GetProofApproval />} />
         <Route path="/notarize-approval" element={<NotarizeApproval />} />
-        <Route path="/get-plugins-approval" element={<GetPluginsApproval />} />
-        <Route path="/run-plugin-approval" element={<RunPluginApproval />} />
-        <Route path="/p2p" element={<P2PHome />} />
         <Route
-          path="/install-plugin-approval"
-          element={<InstallPluginApproval />}
+          path="/run-plugin-approval"
+          element={<RunPluginByUrlApproval />}
         />
+        <Route path="/p2p" element={<P2PHome />} />
         <Route path="*" element={<Navigate to="/home" />} />
       </Routes>
     </div>
@@ -135,58 +113,3 @@ const Popup = () => {
 };
 
 export default Popup;
-
-function AppConnectionLogo() {
-  const dispatch = useDispatch();
-  const activeTab = useActiveTab();
-  const url = useActiveTabUrl();
-  const [showConnectionDetails, setShowConnectionDetails] = useState(false);
-  const connected = useIsConnected();
-
-  useEffect(() => {
-    (async () => {
-      if (url) {
-        const isConnected: boolean | null = await getConnection(url?.origin);
-        dispatch(setConnection(!!isConnected));
-      }
-    })();
-  }, [url]);
-
-  return (
-    <div
-      className="flex flex-nowrap flex-row items-center gap-1 justify-center w-fit cursor-pointer"
-      onClick={() => setShowConnectionDetails(true)}
-    >
-      <div className="flex flex-row relative bg-black border-[1px] border-black rounded-full">
-        {!!activeTab?.favIconUrl ? (
-          <img
-            src={activeTab?.favIconUrl}
-            className="h-5 rounded-full"
-            alt="logo"
-          />
-        ) : (
-          <Icon
-            fa="fa-solid fa-globe"
-            className="bg-white text-slate-400 rounded-full"
-            size={1.25}
-          />
-        )}
-        <div
-          className={classNames(
-            'absolute right-[-2px] bottom-[-2px] rounded-full h-[10px] w-[10px] border-[2px]',
-            {
-              'bg-green-500': connected,
-              'bg-slate-500': !connected,
-            },
-          )}
-        />
-      </div>
-      {showConnectionDetails && (
-        <ConnectionDetailsModal
-          showConnectionDetails={showConnectionDetails}
-          setShowConnectionDetails={setShowConnectionDetails}
-        />
-      )}
-    </div>
-  );
-}

src/entries/SidePanel/SidePanel.tsx

@@ -13,16 +13,21 @@ import logo from '../../assets/img/icon-128.png';
 import classNames from 'classnames';
 import Icon from '../../components/Icon';
 import { useRequestHistory } from '../../reducers/history';
-import { BackgroundActiontype, progressText } from '../Background/rpc';
-import { getPluginByHash, getPluginConfigByHash } from '../Background/db';
+import {
+  BackgroundActiontype,
+  progressText,
+  RequestProgress,
+} from '../Background/rpc';
+import { getPluginByUrl, getPluginConfigByUrl } from '../Background/db';
 import { SidePanelActionTypes } from './types';
 import { fetchP2PState, useClientId } from '../../reducers/p2p';
 
 export default function SidePanel(): ReactElement {
   const [config, setConfig] = useState<PluginConfig | null>(null);
-  const [hash, setHash] = useState('');
+  const [url, setUrl] = useState('');
   const [hex, setHex] = useState('');
   const [p2p, setP2P] = useState(false);
+  const [params, setParams] = useState<Record<string, string> | undefined>();
   const [started, setStarted] = useState(false);
   const clientId = useClientId();
 
@@ -39,18 +44,19 @@ export default function SidePanel(): ReactElement {
 
       switch (type) {
         case SidePanelActionTypes.execute_plugin_request: {
-          setConfig(await getPluginConfigByHash(data.pluginHash));
-          setHash(data.pluginHash);
+          setConfig(await getPluginConfigByUrl(data.pluginUrl));
+          setUrl(data.pluginUrl);
+          setParams(data.pluginParams);
           setStarted(true);
           break;
         }
         case SidePanelActionTypes.run_p2p_plugin_request: {
           const { pluginHash, plugin } = data;
           const config =
-            (await getPluginConfigByHash(pluginHash)) ||
+            (await getPluginConfigByUrl(pluginHash)) ||
             (await getPluginConfig(hexToArrayBuffer(plugin)));
 
-          setHash(pluginHash);
+          setUrl(pluginHash);
           setHex(plugin);
           setP2P(true);
           setConfig(config);
@@ -60,6 +66,16 @@ export default function SidePanel(): ReactElement {
           setStarted(true);
           break;
         }
+        case SidePanelActionTypes.is_panel_open: {
+          return { isOpen: true };
+        }
+        case SidePanelActionTypes.reset_panel: {
+          setConfig(null);
+          setUrl('');
+          setHex('');
+          setStarted(false);
+          break;
+        }
       }
     });
   }, []);
@@ -78,25 +94,33 @@ export default function SidePanel(): ReactElement {
       {/*{!config && <PluginList />}*/}
       {started && config && (
         <PluginBody
-          hash={hash}
+          url={url}
           hex={hex}
           config={config}
           p2p={p2p}
           clientId={clientId}
+          presetParameterValues={params}
         />
       )}
     </div>
   );
 }
 
-function PluginBody(props: {
+function PluginBody({
+  url,
+  hex,
+  config,
+  p2p,
+  clientId,
+  presetParameterValues,
+}: {
   config: PluginConfig;
-  hash: string;
+  url: string;
   hex?: string;
   clientId?: string;
   p2p?: boolean;
+  presetParameterValues?: Record<string, string>;
 }): ReactElement {
-  const { hash, hex, config, p2p, clientId } = props;
   const { title, description, icon, steps } = config;
   const [responses, setResponses] = useState<any[]>([]);
   const [notarizationId, setNotarizationId] = useState('');
@@ -111,7 +135,7 @@ function PluginBody(props: {
         setNotarizationId(response);
       }
     },
-    [hash, responses],
+    [url, responses],
   );
 
   useEffect(() => {
@@ -119,7 +143,7 @@ function PluginBody(props: {
       browser.runtime.sendMessage({
         type: SidePanelActionTypes.execute_plugin_response,
         data: {
-          hash,
+          url,
           proof: notaryRequest.proof,
         },
       });
@@ -127,12 +151,12 @@ function PluginBody(props: {
       browser.runtime.sendMessage({
         type: SidePanelActionTypes.execute_plugin_response,
         data: {
-          hash,
+          url,
           error: notaryRequest.error,
         },
       });
     }
-  }, [hash, notaryRequest?.status]);
+  }, [url, notaryRequest?.status]);
 
   return (
     <div className="flex flex-col p-4">
@@ -149,7 +173,7 @@ function PluginBody(props: {
         {steps?.map((step, i) => (
           <StepContent
             key={i}
-            hash={hash}
+            url={url}
             config={config}
             hex={hex}
             index={i}
@@ -158,6 +182,7 @@ function PluginBody(props: {
             responses={responses}
             p2p={p2p}
             clientId={clientId}
+            parameterValues={presetParameterValues}
             {...step}
           />
         ))}
@@ -168,7 +193,7 @@ function PluginBody(props: {
 
 function StepContent(
   props: StepConfig & {
-    hash: string;
+    url: string;
     hex?: string;
     clientId?: string;
     index: number;
@@ -177,6 +202,7 @@ function StepContent(
     lastResponse?: any;
     config: PluginConfig;
     p2p?: boolean;
+    parameterValues?: Record<string, string>;
   },
 ): ReactElement {
   const {
@@ -188,11 +214,12 @@ function StepContent(
     setResponse,
     lastResponse,
     prover,
-    hash,
+    url,
     hex: _hex,
     config,
     p2p = false,
     clientId = '',
+    parameterValues,
   } = props;
   const [completed, setCompleted] = useState(false);
   const [pending, setPending] = useState(false);
@@ -201,10 +228,10 @@ function StepContent(
   const notaryRequest = useRequestHistory(notarizationId);
 
   const getPlugin = useCallback(async () => {
-    const hex = (await getPluginByHash(hash)) || _hex;
+    const hex = (await getPluginByUrl(url)) || _hex;
     const arrayBuffer = hexToArrayBuffer(hex!);
     return makePlugin(arrayBuffer, config, { p2p, clientId });
-  }, [hash, _hex, config, p2p, clientId]);
+  }, [url, _hex, config, p2p, clientId]);
 
   const processStep = useCallback(async () => {
     const plugin = await getPlugin();
@@ -215,7 +242,12 @@ function StepContent(
     setError('');
 
     try {
-      const out = await plugin.call(action, JSON.stringify(lastResponse));
+      const out = await plugin.call(
+        action,
+        index > 0
+          ? JSON.stringify(lastResponse)
+          : JSON.stringify(parameterValues),
+      );
       const val = JSON.parse(out.string());
       if (val && prover) {
         setNotarizationId(val);
@@ -315,17 +347,27 @@ function StepContent(
     );
   } else if (notaryRequest?.status === 'pending' || pending || notarizationId) {
     btnContent = (
-      <button className="button mt-2 w-fit flex flex-row flex-nowrap items-center gap-2 cursor-default">
-        <Icon className="animate-spin" fa="fa-solid fa-spinner" size={1} />
-        <span className="text-sm">
-          {notaryRequest?.progress
-            ? `(${(
-                ((notaryRequest.progress + 1) / 6.06) *
-                100
-              ).toFixed()}%) ${progressText(notaryRequest.progress)}`
-            : 'Pending...'}
-        </span>
-      </button>
+      <div className="flex flex-col gap-2">
+        {notaryRequest?.progress === RequestProgress.Error && (
+          <div className="flex flex-row items-center gap-2 text-red-600">
+            <Icon fa="fa-solid fa-triangle-exclamation" size={1} />
+            <span className="text-sm">
+              {notaryRequest?.errorMessage ||
+                progressText(notaryRequest.progress)}
+            </span>
+          </div>
+        )}
+        {notaryRequest?.progress !== RequestProgress.Error && (
+          <button className="button mt-2 w-fit flex flex-row flex-nowrap items-center gap-2 cursor-default">
+            <Icon className="animate-spin" fa="fa-solid fa-spinner" size={1} />
+            <span className="text-sm">
+              {notaryRequest?.progress !== undefined
+                ? `(${(((notaryRequest.progress + 1) / 6.06) * 100).toFixed()}%) ${progressText(notaryRequest.progress)}`
+                : 'Pending...'}
+            </span>
+          </button>
+        )}
+      </div>
     );
   } else {
     btnContent = (

src/entries/SidePanel/types.ts

@@ -5,4 +5,6 @@ export enum SidePanelActionTypes {
   run_p2p_plugin_request = 'sidePanel/run_p2p_plugin_request',
   run_p2p_plugin_response = 'sidePanel/run_p2p_plugin_response',
   start_p2p_plugin = 'sidePanel/start_p2p_plugin',
+  is_panel_open = 'sidePanel/is_panel_open',
+  reset_panel = 'sidePanel/reset_panel',
 }

src/entries/utils.ts

@@ -23,6 +23,18 @@ export const openSidePanel = async () => {
   const { promise, resolve, reject } = deferredPromise();
 
   try {
+    const response = await browser.runtime.sendMessage({
+      type: SidePanelActionTypes.is_panel_open,
+    });
+
+    if (response?.isOpen) {
+      await browser.runtime.sendMessage({
+        type: SidePanelActionTypes.reset_panel,
+      });
+      resolve();
+      return promise;
+    }
+
     const [tab] = await browser.tabs.query({
       active: true,
       currentWindow: true,

src/pages/ConnectionApproval/index.tsx

@@ -1,62 +0,0 @@
-import React, { ReactElement, useCallback } from 'react';
-import Icon from '../../components/Icon';
-import logo from '../../assets/img/icon-128.png';
-import { useSearchParams } from 'react-router-dom';
-import { urlify } from '../../utils/misc';
-import browser from 'webextension-polyfill';
-import { BackgroundActiontype } from '../../entries/Background/rpc';
-import { BaseApproval } from '../BaseApproval';
-
-export function ConnectionApproval(): ReactElement {
-  const [params] = useSearchParams();
-  const origin = params.get('origin');
-  const favIconUrl = params.get('favIconUrl');
-  const hostname = urlify(origin || '')?.hostname;
-
-  const onCancel = useCallback(() => {
-    browser.runtime.sendMessage({
-      type: BackgroundActiontype.connect_response,
-      data: false,
-    });
-  }, []);
-
-  const onAccept = useCallback(() => {
-    browser.runtime.sendMessage({
-      type: BackgroundActiontype.connect_response,
-      data: true,
-    });
-  }, []);
-
-  return (
-    <BaseApproval
-      header={`Connecting to ${hostname}`}
-      onSecondaryClick={onCancel}
-      onPrimaryClick={onAccept}
-    >
-      <div className="flex flex-col items-center gap-2 py-8">
-        {!!favIconUrl ? (
-          <img
-            src={favIconUrl}
-            className="h-16 w-16 border border-slate-200 bg-slate-200 rounded-full"
-            alt="logo"
-          />
-        ) : (
-          <Icon
-            fa="fa-solid fa-globe"
-            size={4}
-            className="h-16 w-16 rounded-full border border-slate-200 text-blue-500"
-          />
-        )}
-        <div className="text-sm font-semibold">{hostname}</div>
-      </div>
-      <div className="text-lg font-bold text-center">Connect to this site?</div>
-      <div className="text-sm px-8 text-center text-slate-500 flex-grow">
-        Do you trust this site? By granting this permission, you're allowing
-        this site to view your installed plugins, suggest requests to notarize,
-        suggest plugins to install, ask you to share proofs metadata{' '}
-        <i>(method, url, notary url, and proxy url)</i>, and ask to view a
-        specific proof.
-      </div>
-    </BaseApproval>
-  );
-}

src/pages/GetHistoryApproval/index.tsx

@@ -1,139 +0,0 @@
-import React, { ReactElement, useCallback, useEffect } from 'react';
-import Icon from '../../components/Icon';
-import { useSearchParams } from 'react-router-dom';
-import { safeParseJSON, urlify } from '../../utils/misc';
-import browser from 'webextension-polyfill';
-import { BackgroundActiontype } from '../../entries/Background/rpc';
-import { BaseApproval } from '../BaseApproval';
-import { minimatch } from 'minimatch';
-import { useAllProofHistory } from '../../reducers/history';
-import classNames from 'classnames';
-
-export function GetHistoryApproval(): ReactElement {
-  const [params] = useSearchParams();
-  const origin = params.get('origin');
-  const favIconUrl = params.get('favIconUrl');
-  const method = params.get('method');
-  const url = params.get('url');
-  const rawMetadata = params.get('metadata');
-  const metadata = safeParseJSON(rawMetadata);
-  const hostname = urlify(origin || '')?.hostname;
-  const proofs = useAllProofHistory();
-
-  useEffect(() => {
-    browser.runtime.sendMessage({
-      type: BackgroundActiontype.get_prove_requests,
-    });
-  }, []);
-
-  const onCancel = useCallback(() => {
-    browser.runtime.sendMessage({
-      type: BackgroundActiontype.get_history_response,
-      data: false,
-    });
-  }, []);
-
-  const onAccept = useCallback(() => {
-    browser.runtime.sendMessage({
-      type: BackgroundActiontype.get_history_response,
-      data: true,
-    });
-  }, []);
-
-  const result = proofs.filter((proof) => {
-    let matchedMetadata = true;
-    if (metadata) {
-      matchedMetadata = Object.entries(
-        metadata as { [k: string]: string },
-      ).reduce((bool, [k, v]) => {
-        try {
-          return bool && minimatch(proof.metadata![k], v);
-        } catch (e) {
-          return false;
-        }
-      }, matchedMetadata);
-    }
-
-    return (
-      minimatch(proof.method, method!, { nocase: true }) &&
-      minimatch(proof.url, url!) &&
-      matchedMetadata
-    );
-  });
-
-  return (
-    <BaseApproval
-      header="Requesting Proof History"
-      onSecondaryClick={onCancel}
-      onPrimaryClick={onAccept}
-    >
-      <div className="flex flex-col items-center gap-2 py-8">
-        {!!favIconUrl ? (
-          <img
-            src={favIconUrl}
-            className="h-16 w-16 rounded-full border border-slate-200 bg-slate-200"
-            alt="logo"
-          />
-        ) : (
-          <Icon
-            fa="fa-solid fa-globe"
-            size={4}
-            className="h-16 w-16 rounded-full border border-slate-200 text-blue-500"
-          />
-        )}
-        <div className="text-2xl text-center px-8">
-          Do you want to share proof history with{' '}
-          <b className="text-blue-500">{hostname}</b>?
-        </div>
-      </div>
-      <div className="flex flex-col items-center gap-4 text-sm px-8 text-center flex-grow">
-        <div className="text-slate-500">
-          All proofs matching the following patterns with be shared:
-        </div>
-        <table className="border border-collapse table-auto rounded text-xs w-full">
-          <tbody>
-            <tr>
-              <td className="px-2 py-1 border border-slate-300 bg-slate-100 text-slate-500 align-top w-16 text-left">
-                Method
-              </td>
-              <td className="px-2 py-1 border border-slate-300 font-semibold text-black font-mono text-left">
-                {method?.toUpperCase()}
-              </td>
-            </tr>
-            <tr className="">
-              <td className="px-2 py-1 border border-slate-300 bg-slate-100 text-slate-500 align-top w-16 text-left">
-                URL
-              </td>
-              <td className="px-2 py-1 border border-slate-300 font-semibold text-black font-mono break-all text-left">
-                {url}
-              </td>
-            </tr>
-            {rawMetadata && (
-              <tr className="">
-                <td className="px-2 py-1 border border-slate-300 bg-slate-100 text-slate-500 align-top w-16 text-left">
-                  Metadata
-                </td>
-                <td className="px-2 py-1 border border-slate-300 font-semibold text-black font-mono break-all text-left">
-                  {rawMetadata}
-                </td>
-              </tr>
-            )}
-          </tbody>
-        </table>
-        <div
-          className={classNames('border rounded font-semibold px-2 py-1', {
-            'text-green-500 bg-green-200 border-green-300': result.length,
-            'text-slate-500 bg-slate-200 border-slate-300': !result.length,
-          })}
-        >
-          {result.length} results found
-        </div>
-      </div>
-      <div className="text-xs px-8 pb-2 text-center text-slate-500">
-        Only certain metadata will be shared with the app, such as <i>id</i>,{' '}
-        <i>method</i>, <i>url</i>, <i>notary</i>, <i>proxy</i>, and{' '}
-        <i>timestamp</i>.
-      </div>
-    </BaseApproval>
-  );
-}

src/pages/GetPluginsApproval/index.tsx

@@ -1,138 +0,0 @@
-import React, { ReactElement, useCallback, useEffect, useState } from 'react';
-import Icon from '../../components/Icon';
-import { useSearchParams } from 'react-router-dom';
-import { safeParseJSON, urlify } from '../../utils/misc';
-import browser from 'webextension-polyfill';
-import { BackgroundActiontype } from '../../entries/Background/rpc';
-import { BaseApproval } from '../BaseApproval';
-import { getPlugins } from '../../entries/Background/db';
-import { minimatch } from 'minimatch';
-import classNames from 'classnames';
-
-export function GetPluginsApproval(): ReactElement {
-  const [params] = useSearchParams();
-  const origin = params.get('origin');
-  const favIconUrl = params.get('favIconUrl');
-  const url = params.get('url');
-  const filterOrigin = params.get('filterOrigin');
-  const rawMetadata = params.get('metadata');
-  const filterMetadata = safeParseJSON(rawMetadata);
-  const hostname = urlify(origin || '')?.hostname;
-  const [result, setResult] = useState<any[]>([]);
-
-  const onCancel = useCallback(() => {
-    browser.runtime.sendMessage({
-      type: BackgroundActiontype.get_plugins_response,
-      data: false,
-    });
-  }, []);
-
-  const onAccept = useCallback(() => {
-    browser.runtime.sendMessage({
-      type: BackgroundActiontype.get_plugins_response,
-      data: true,
-    });
-  }, []);
-
-  useEffect(() => {
-    (async () => {
-      const response = await getPlugins();
-      const res = response.filter(({ metadata }) => {
-        let matchedMetadata = true;
-        if (filterMetadata) {
-          matchedMetadata = Object.entries(
-            filterMetadata as { [k: string]: string },
-          ).reduce((bool, [k, v]) => {
-            try {
-              return bool && minimatch(metadata![k], v);
-            } catch (e) {
-              return false;
-            }
-          }, matchedMetadata);
-        }
-        return (
-          minimatch(metadata.filePath, url || '**') &&
-          minimatch(metadata.origin, filterOrigin || '**') &&
-          matchedMetadata
-        );
-      });
-      setResult(res);
-    })();
-  }, [url, JSON.stringify(filterMetadata)]);
-
-  return (
-    <BaseApproval
-      header="Requesting Plugins"
-      onSecondaryClick={onCancel}
-      onPrimaryClick={onAccept}
-    >
-      <div className="flex flex-col items-center gap-2 py-8">
-        {!!favIconUrl ? (
-          <img
-            src={favIconUrl}
-            className="h-16 w-16 rounded-full border border-slate-200 bg-slate-200"
-            alt="logo"
-          />
-        ) : (
-          <Icon
-            fa="fa-solid fa-globe"
-            size={4}
-            className="h-16 w-16 rounded-full border border-slate-200 text-blue-500"
-          />
-        )}
-        <div className="text-2xl text-center px-8">
-          Do you want to share installed plugins with{' '}
-          <b className="text-blue-500">{hostname}</b>?
-        </div>
-      </div>
-      <div className="flex flex-col items-center gap-4 text-sm px-8 text-center flex-grow">
-        <div className="text-slate-500">
-          All plugins matching the following patterns with be shared:
-        </div>
-        <table className="border border-collapse table-auto rounded text-xs w-full">
-          <tbody>
-            <tr className="">
-              <td className="px-2 py-1 border border-slate-300 bg-slate-100 text-slate-500 align-top w-16 text-left">
-                URL
-              </td>
-              <td className="px-2 py-1 border border-slate-300 font-semibold text-black font-mono break-all text-left">
-                {url}
-              </td>
-            </tr>
-            <tr className="">
-              <td className="px-2 py-1 border border-slate-300 bg-slate-100 text-slate-500 align-top w-16 text-left">
-                Origin
-              </td>
-              <td className="px-2 py-1 border border-slate-300 font-semibold text-black font-mono break-all text-left">
-                {filterOrigin}
-              </td>
-            </tr>
-            {rawMetadata && (
-              <tr className="">
-                <td className="px-2 py-1 border border-slate-300 bg-slate-100 text-slate-500 align-top w-16 text-left">
-                  Metadata
-                </td>
-                <td className="px-2 py-1 border border-slate-300 font-semibold text-black font-mono break-all text-left">
-                  {rawMetadata}
-                </td>
-              </tr>
-            )}
-          </tbody>
-        </table>
-        <div
-          className={classNames('border rounded font-semibold px-2 py-1', {
-            'text-green-500 bg-green-200 border-green-300': result.length,
-            'text-slate-500 bg-slate-200 border-slate-300': !result.length,
-          })}
-        >
-          {result.length} results found
-        </div>
-      </div>
-      <div className="text-xs px-8 pb-2 text-center text-slate-500">
-        Only certain metadata will be shared with the app, such as <i>id</i>,{' '}
-        <i>method</i>, <i>url</i>, <i>notary</i>, <i>proxy</i>, and{' '}
-        <i>timestamp</i>.
-      </div>
-    </BaseApproval>
-  );
-}

src/pages/GetProofApproval/index.tsx

@@ -1,68 +0,0 @@
-import React, { ReactElement, useCallback, useEffect } from 'react';
-import Icon from '../../components/Icon';
-import { useSearchParams } from 'react-router-dom';
-import { urlify } from '../../utils/misc';
-import browser from 'webextension-polyfill';
-import { BackgroundActiontype } from '../../entries/Background/rpc';
-import { BaseApproval } from '../BaseApproval';
-import { OneRequestHistory } from '../History';
-
-export function GetProofApproval(): ReactElement {
-  const [params] = useSearchParams();
-  const origin = params.get('origin');
-  const favIconUrl = params.get('favIconUrl');
-  const id = params.get('id');
-  const hostname = urlify(origin || '')?.hostname;
-
-  const onCancel = useCallback(() => {
-    browser.runtime.sendMessage({
-      type: BackgroundActiontype.get_proof_response,
-      data: false,
-    });
-  }, []);
-
-  const onAccept = useCallback(() => {
-    browser.runtime.sendMessage({
-      type: BackgroundActiontype.get_proof_response,
-      data: true,
-    });
-  }, []);
-
-  return (
-    <BaseApproval
-      header="Requesting Proof History"
-      onSecondaryClick={onCancel}
-      onPrimaryClick={onAccept}
-    >
-      <div className="flex flex-col items-center gap-2 py-8">
-        {!!favIconUrl ? (
-          <img
-            src={favIconUrl}
-            className="h-16 w-16 rounded-full border border-slate-200 bg-slate-200"
-            alt="logo"
-          />
-        ) : (
-          <Icon
-            fa="fa-solid fa-globe"
-            size={4}
-            className="h-16 w-16 rounded-full border border-slate-200 text-blue-500"
-          />
-        )}
-        <div className="text-2xl text-center px-8">
-          Do you want to share proof data with{' '}
-          <b className="text-blue-500">{hostname}</b>?
-        </div>
-      </div>
-      <div className="flex flex-col items-center gap-4 text-sm px-8 text-center flex-grow">
-        <div className="text-slate-500">
-          The following proof will be shared:
-        </div>
-        <OneRequestHistory
-          className="w-full !cursor-default hover:bg-white text-xs"
-          requestId={id!}
-          hideActions={['share', 'delete', 'retry']}
-        />
-      </div>
-    </BaseApproval>
-  );
-}

src/pages/History/index.tsx

@@ -1,23 +1,20 @@
 import React, { ReactElement, useState, useCallback } from 'react';
 import { useDispatch } from 'react-redux';
 import { useNavigate } from 'react-router';
-import {
-  useHistoryOrder,
-  useRequestHistory,
-  deleteRequestHistory,
-} from '../../reducers/history';
+import { useHistoryOrder, useRequestHistory } from '../../reducers/history';
 import Icon from '../../components/Icon';
 import NotarizeIcon from '../../assets/img/notarize.png';
-import { getNotaryApi, getProxyApi } from '../../utils/storage';
 import { urlify } from '../../utils/misc';
 import {
   BackgroundActiontype,
   progressText,
+  RequestProgress,
 } from '../../entries/Background/rpc';
 import Modal, { ModalContent } from '../../components/Modal/Modal';
 import classNames from 'classnames';
 import dayjs from 'dayjs';
 import RequestMenu from './request-menu';
+
 const charwise = require('charwise');
 
 export default function History(): ReactElement {
@@ -110,12 +107,14 @@ export function OneRequestHistory(props: {
                 size={1}
               />
               <span className="">
-                {request?.progress
-                  ? `(${(
-                      ((request.progress + 1) / 6.06) *
-                      100
-                    ).toFixed()}%) ${progressText(request.progress)}`
-                  : 'Pending...'}
+                {request?.progress === RequestProgress.Error
+                  ? `${progressText(request.progress, request.errorMessage)}`
+                  : request?.progress
+                    ? `(${(
+                        ((request.progress + 1) / 6.06) *
+                        100
+                      ).toFixed()}%) ${progressText(request.progress)}`
+                    : 'Pending...'}
               </span>
             </div>
           )}
@@ -155,7 +154,7 @@ export function OneRequestHistory(props: {
         onClose={closeAllModal}
       >
         <ModalContent className="flex justify-center items-center text-slate-500">
-          {msg || 'Something went wrong :('}
+          {msg || request?.errorMessage}
         </ModalContent>
         <button
           className="m-0 w-24 bg-red-100 text-red-300 hover:bg-red-200 hover:text-red-500"

src/pages/History/request-menu.tsx

@@ -33,6 +33,7 @@ export default function RequestMenu({
   const request = useRequestHistory(requestId);
   const [showingShareConfirmation, setShowingShareConfirmation] =
     useState(false);
+  const [showRemoveModal, setShowRemoveModal] = useState(false);
 
   const onRetry = useCallback(async () => {
     const notaryUrl = await getNotaryApi();
@@ -64,6 +65,12 @@ export default function RequestMenu({
           showMenu={showMenu}
         />
       )}
+      <RemoveHistory
+        onRemove={onDelete}
+        showRemovalModal={showRemoveModal}
+        setShowRemoveModal={setShowRemoveModal}
+        onCancel={() => setShowRemoveModal(false)}
+      />
       <div
         className="fixed top-0 left-0 w-screen h-screen z-10 cursor-default"
         onClick={(e) => {
@@ -116,8 +123,7 @@ export default function RequestMenu({
             className="border-b border-slate-300 !text-red-500"
             onClick={(e) => {
               e.stopPropagation();
-              onDelete();
-              showMenu(false);
+              setShowRemoveModal(true);
             }}
           >
             Delete
@@ -254,3 +260,48 @@ function ShareConfirmationModal({
     </Modal>
   );
 }
+
+export function RemoveHistory(props: {
+  onRemove: () => void;
+  showRemovalModal: boolean;
+  setShowRemoveModal: (show: boolean) => void;
+  onCancel: () => void;
+}): ReactElement {
+  const { onRemove, setShowRemoveModal, showRemovalModal } = props;
+
+  const onCancel = useCallback(() => {
+    setShowRemoveModal(false);
+  }, [showRemovalModal]);
+  return !showRemovalModal ? (
+    <></>
+  ) : (
+    <Modal
+      onClose={onCancel}
+      className="flex flex-col items-center text-base cursor-default justify-center !w-auto mx-4 my-[50%] p-4 gap-4"
+    >
+      <ModalContent className="flex flex-col w-full gap-4 items-center text-base justify-center">
+        <div className="text-base">
+          Are you sure you want to delete this attestation?
+        </div>
+        <div className="mb-1">
+          <span className="text-red-500 font-bold">Warning:</span> this cannot
+          be undone.
+        </div>
+        <div className="flex flex-row gap-2 justify-end">
+          <button
+            className="m-0 w-24 bg-slate-100 text-slate-300 hover:bg-slate-200 hover:text-slate-500"
+            onClick={onCancel}
+          >
+            Cancel
+          </button>
+          <button
+            className="m-0 w-24 bg-red-100 text-red-300 hover:bg-red-200 hover:text-red-500"
+            onClick={onRemove}
+          >
+            Delete
+          </button>
+        </div>
+      </ModalContent>
+    </Modal>
+  );
+}

src/pages/Home/index.tsx

@@ -1,28 +1,16 @@
 import React, {
   MouseEventHandler,
   ReactElement,
-  ReactNode,
-  useCallback,
   useEffect,
   useRef,
   useState,
 } from 'react';
-import Icon from '../../components/Icon';
 import classNames from 'classnames';
-import { useNavigate } from 'react-router';
 import { ErrorModal } from '../../components/ErrorModal';
 import History from '../History';
 import './index.scss';
 import Requests from '../Requests';
-import PluginUploadInfo from '../../components/PluginInfo';
-import {
-  useOnPluginClick,
-  usePluginConfig,
-  usePluginHashes,
-} from '../../reducers/plugins';
 import { fetchPluginHashes } from '../../utils/rpc';
-import DefaultPluginIcon from '../../assets/img/default-plugin-icon.png';
-import { useClientId } from '../../reducers/p2p';
 
 export default function Home(props: {
   tab?: 'history' | 'network';
@@ -31,9 +19,6 @@ export default function Home(props: {
   const [tab, setTab] = useState<'history' | 'network'>(props.tab || 'history');
   const scrollableContent = useRef<HTMLDivElement | null>(null);
   const [shouldFix, setFix] = useState(false);
-  const [actionPanelElement, setActionPanelElement] =
-    useState<HTMLDivElement | null>(null);
-  const [scrollTop, setScrollTop] = useState(0);
 
   useEffect(() => {
     fetchPluginHashes();
@@ -42,19 +27,12 @@ export default function Home(props: {
   useEffect(() => {
     const element = scrollableContent.current;
     if (!element) return;
-    if (!actionPanelElement) return;
 
-    let timer = Date.now();
     const onScroll = () => {
-      const now = Date.now();
-      if (now - timer > 20) {
-        timer = now;
-        setScrollTop(element.scrollTop);
-        if (element.scrollTop >= actionPanelElement.clientHeight) {
-          setFix(true);
-        } else {
-          setFix(false);
-        }
+      if (element.scrollTop > 0) {
+        setFix(true);
+      } else {
+        setFix(false);
       }
     };
 
@@ -63,7 +41,7 @@ export default function Home(props: {
     return () => {
       element.removeEventListener('scroll', onScroll);
     };
-  }, [scrollableContent, actionPanelElement]);
+  }, [scrollableContent]);
 
   return (
     <div
@@ -72,10 +50,6 @@ export default function Home(props: {
       className="flex flex-col flex-grow overflow-y-auto"
     >
       {error && <ErrorModal onClose={() => showError('')} message={error} />}
-      <ActionPanel
-        setActionPanelElement={setActionPanelElement}
-        scrollTop={scrollTop}
-      />
       <div
         className={classNames(
           'flex flex-row justify-center items-center z-10',
@@ -106,158 +80,6 @@ export default function Home(props: {
   );
 }
 
-function ActionPanel({
-  setActionPanelElement,
-  scrollTop,
-}: {
-  scrollTop: number;
-  setActionPanelElement: (el: HTMLDivElement) => void;
-}) {
-  const pluginHashes = usePluginHashes();
-  const navigate = useNavigate();
-  const clientId = useClientId();
-  const container = useRef<HTMLDivElement | null>(null);
-  const [isOverflow, setOverflow] = useState(false);
-  const [expanded, setExpand] = useState(false);
-
-  const onCheckSize = useCallback(() => {
-    const element = container.current;
-
-    if (!element) return;
-
-    setActionPanelElement(element);
-
-    if (element.scrollWidth > element.clientWidth) {
-      setOverflow(true);
-    } else {
-      setOverflow(false);
-    }
-  }, [container]);
-
-  useEffect(() => {
-    onCheckSize();
-
-    window.addEventListener('resize', onCheckSize);
-
-    return () => {
-      window.removeEventListener('resize', onCheckSize);
-    };
-  }, [onCheckSize, pluginHashes]);
-
-  useEffect(() => {
-    const element = container.current;
-
-    if (!element) return;
-
-    if (scrollTop >= element.clientHeight) {
-      setExpand(false);
-    }
-  }, [container, scrollTop]);
-
-  return (
-    <div
-      ref={container}
-      className={classNames(
-        'flex flex-row justify-start items-center gap-4 p-4 border-b relative',
-        {
-          'flex-wrap': expanded,
-          'flex-nowrap': !expanded,
-        },
-      )}
-    >
-      <NavButton
-        fa="fa-solid fa-hammer"
-        onClick={() => navigate('/custom')}
-        title="Build a custom request"
-      >
-        Custom
-      </NavButton>
-      <NavButton
-        fa="fa-solid fa-certificate"
-        onClick={() => navigate('/verify')}
-        title="Visualize an attestation"
-      >
-        Verify
-      </NavButton>
-      <NavButton
-        className={'relative'}
-        fa="fa-solid fa-network-wired"
-        iconSize={0.5}
-        iconClassName={classNames({
-          '!text-green-500': clientId,
-        })}
-        onClick={() => navigate('/p2p')}
-      >
-        P2P
-      </NavButton>
-      {pluginHashes.map((hash) => (
-        <PluginIcon hash={hash} onCheckSize={onCheckSize} />
-      ))}
-      <button
-        className={
-          'flex flex-row shrink-0 items-center justify-center self-start rounded relative border-2 border-dashed border-slate-300 hover:border-slate-400 text-slate-300 hover:text-slate-400 h-16 w-16 mx-1'
-        }
-        title="Install a plugin"
-      >
-        <PluginUploadInfo />
-        <Icon fa="fa-solid fa-plus" />
-      </button>
-      <button
-        className={classNames(
-          'absolute right-0 top-0 w-6 h-full bg-slate-100 hover:bg-slate-200 font-semibold',
-          'flex flex-row items-center justify-center gap-2 text-slate-500 hover:text-slate-700',
-          {
-            hidden: !isOverflow || expanded,
-          },
-        )}
-        onClick={() => setExpand(true)}
-      >
-        <Icon fa="fa-solid fa-caret-down" size={0.875} />
-      </button>
-    </div>
-  );
-}
-
-function PluginIcon({
-  hash,
-  onCheckSize,
-}: {
-  hash: string;
-  onCheckSize: () => void;
-}) {
-  const config = usePluginConfig(hash);
-  const onPluginClick = useOnPluginClick(hash);
-
-  const onClick = useCallback(() => {
-    if (!config) return;
-    onPluginClick();
-  }, [onPluginClick, config]);
-
-  if (!config) return null;
-
-  return (
-    <button
-      ref={() => {
-        onCheckSize();
-      }}
-      className={classNames(
-        'flex flex-col flex-nowrap items-center justify-center',
-        'text-white px-2 py-1 gap-1 opacity-90 hover:opacity-100 w-18',
-      )}
-      onClick={onClick}
-    >
-      <Icon
-        className="rounded-full flex flex-row items-center justify-center flex-grow-0 flex-shrink-0"
-        url={config?.icon || DefaultPluginIcon}
-        size={2}
-      />
-      <span className="font-bold text-primary h-10 w-14 overflow-hidden text-ellipsis">
-        {config?.title}
-      </span>
-    </button>
-  );
-}
-
 function TabSelector(props: {
   children: string;
   className?: string;
@@ -280,39 +102,3 @@ function TabSelector(props: {
     </button>
   );
 }
-
-function NavButton(props: {
-  fa: string;
-  children?: ReactNode;
-  onClick?: MouseEventHandler;
-  className?: string;
-  title?: string;
-  iconClassName?: string;
-  disabled?: boolean;
-  iconSize?: number;
-}): ReactElement {
-  return (
-    <button
-      className={classNames(
-        'flex flex-col flex-nowrap items-center justify-center',
-        'text-white px-2 py-1 gap-1 opacity-90 hover:opacity-100 w-18',
-        props.className,
-      )}
-      onClick={props.onClick}
-      disabled={props.disabled}
-      title={props.title}
-    >
-      <Icon
-        className={classNames(
-          'w-8 h-8 rounded-full bg-primary flex flex-row items-center justify-center flex-grow-0 flex-shrink-0',
-          props.iconClassName,
-        )}
-        fa={props.fa}
-        size={0.875}
-      />
-      <span className="font-bold text-primary h-10 w-14 overflow-hidden text-ellipsis">
-        {props.children}
-      </span>
-    </button>
-  );
-}

src/pages/InstallPluginApproval/index.tsx

@@ -1,108 +0,0 @@
-import React, { ReactElement, useCallback, useEffect, useState } from 'react';
-import Icon from '../../components/Icon';
-import { useSearchParams } from 'react-router-dom';
-import {
-  getPluginConfig,
-  makePlugin,
-  type PluginConfig,
-  urlify,
-} from '../../utils/misc';
-import browser from 'webextension-polyfill';
-import { BackgroundActiontype } from '../../entries/Background/rpc';
-import { BaseApproval } from '../BaseApproval';
-import { PluginPermissions } from '../../components/PluginInfo';
-
-export function InstallPluginApproval(): ReactElement {
-  const [params] = useSearchParams();
-  const origin = params.get('origin');
-  const favIconUrl = params.get('favIconUrl');
-  const url = params.get('url');
-  const rawMetadata = params.get('metadata');
-  const hostname = urlify(origin || '')?.hostname;
-
-  const [error, showError] = useState('');
-  const [pluginBuffer, setPluginBuffer] = useState<ArrayBuffer | any>(null);
-  const [pluginContent, setPluginContent] = useState<PluginConfig | null>(null);
-
-  const onCancel = useCallback(() => {
-    browser.runtime.sendMessage({
-      type: BackgroundActiontype.install_plugin_response,
-      data: false,
-    });
-  }, []);
-
-  const onAccept = useCallback(() => {
-    browser.runtime.sendMessage({
-      type: BackgroundActiontype.install_plugin_response,
-      data: true,
-    });
-  }, []);
-
-  useEffect(() => {
-    (async () => {
-      try {
-        const resp = await fetch(url!);
-        const arrayBuffer = await resp.arrayBuffer();
-        const plugin = await makePlugin(arrayBuffer);
-        setPluginContent(await getPluginConfig(plugin));
-        setPluginBuffer(arrayBuffer);
-      } catch (e: any) {
-        showError(e?.message || 'Invalid Plugin');
-      }
-    })();
-  }, [url]);
-
-  return (
-    <BaseApproval
-      header={`Installing Plugin`}
-      onSecondaryClick={onCancel}
-      onPrimaryClick={onAccept}
-    >
-      <div className="flex flex-col items-center gap-2 py-8">
-        {!!favIconUrl ? (
-          <img
-            src={favIconUrl}
-            className="h-16 w-16 rounded-full border border-slate-200 bg-slate-200"
-            alt="logo"
-          />
-        ) : (
-          <Icon
-            fa="fa-solid fa-globe"
-            size={4}
-            className="h-16 w-16 rounded-full border border-slate-200 text-blue-500"
-          />
-        )}
-        <div className="text-2xl text-center px-8">
-          <b className="text-blue-500">{hostname}</b> wants to install a plugin:
-        </div>
-      </div>
-      {!pluginContent && (
-        <div className="flex flex-col items-center flex-grow gap-4 border border-slate-300 p-8 mx-8 rounded bg-slate-100">
-          <Icon
-            className="animate-spin w-fit text-slate-500"
-            fa="fa-solid fa-spinner"
-            size={1}
-          />
-        </div>
-      )}
-      {pluginContent && (
-        <div className="flex flex-col flex-grow gap-4 border border-slate-300 p-8 mx-8 rounded bg-slate-100">
-          <div className="flex flex-col items-center">
-            <img
-              className="w-12 h-12 mb-2"
-              src={pluginContent.icon}
-              alt="Plugin Icon"
-            />
-            <span className="text-3xl text-blue-600 font-semibold">
-              {pluginContent.title}
-            </span>
-            <div className="text-slate-500 text-lg">
-              {pluginContent.description}
-            </div>
-          </div>
-          <PluginPermissions className="w-full" pluginContent={pluginContent} />
-        </div>
-      )}
-    </BaseApproval>
-  );
-}

src/pages/PeerToPeer/index.tsx

@@ -38,7 +38,6 @@ import browser from 'webextension-polyfill';
 import { sha256 } from '../../utils/misc';
 import { openSidePanel } from '../../entries/utils';
 import { SidePanelActionTypes } from '../../entries/SidePanel/types';
-import { verify } from 'tlsn-js-v5';
 import ProofViewer from '../ProofViewer';
 
 export function P2PHome(): ReactElement {

src/pages/ProofUploader/index.tsx

@@ -7,14 +7,17 @@ import React, {
 import Icon from '../../components/Icon';
 import { BackgroundActiontype } from '../../entries/Background/rpc';
 import ProofViewer from '../ProofViewer';
+import { convertNotaryWsToHttp } from '../../utils/misc';
 
 export default function ProofUploader(): ReactElement {
   const [proof, setProof] = useState<{
     recv: string;
     sent: string;
+    verifierKey?: string;
+    notaryKey?: string;
   } | null>(null);
   const [uploading, setUploading] = useState(false);
-
+  const [metadata, setMetaData] = useState<any>({ meta: '', version: '' });
   const onFileUpload: ChangeEventHandler<HTMLInputElement> = useCallback(
     async (e) => {
       // @ts-ignore
@@ -26,8 +29,19 @@ export default function ProofUploader(): ReactElement {
           const result = event.target?.result;
           if (result) {
             const proof = JSON.parse(result as string);
+            const notaryUrl = convertNotaryWsToHttp(proof.meta.notaryUrl);
+            proof.meta.notaryUrl = notaryUrl;
+            setMetaData({ meta: proof.meta, version: proof.version });
             const res = await chrome.runtime
-              .sendMessage<any, { recv: string; sent: string }>({
+              .sendMessage<
+                any,
+                {
+                  recv: string;
+                  sent: string;
+                  verifierKey?: string;
+                  notaryKey?: string;
+                }
+              >({
                 type: BackgroundActiontype.verify_proof,
                 data: proof,
               })
@@ -48,7 +62,15 @@ export default function ProofUploader(): ReactElement {
   );
 
   if (proof) {
-    return <ProofViewer recv={proof.recv} sent={proof.sent} />;
+    return (
+      <ProofViewer
+        recv={proof.recv}
+        sent={proof.sent}
+        verifierKey={proof.verifierKey}
+        notaryKey={proof.notaryKey}
+        info={metadata}
+      />
+    );
   }
 
   return (

src/pages/ProofViewer/index.tsx

@@ -2,6 +2,7 @@ import React, {
   ReactNode,
   ReactElement,
   useState,
+  useEffect,
   MouseEventHandler,
   useCallback,
 } from 'react';
@@ -12,28 +13,51 @@ import {
   useRequestHistory,
 } from '../../reducers/history';
 import Icon from '../../components/Icon';
-import { download } from '../../utils/misc';
+import {
+  convertNotaryWsToHttp,
+  download,
+  isPopupWindow,
+} from '../../utils/misc';
 import classNames from 'classnames';
 import { useDispatch } from 'react-redux';
+import { RemoveHistory } from '../History/request-menu';
+import { PresentationJSON } from 'tlsn-js/build/types';
+import { RequestHistory } from '../../entries/Background/rpc';
 
 export default function ProofViewer(props?: {
   className?: string;
   recv?: string;
   sent?: string;
+  verifierKey?: string;
+  notaryKey?: string;
+  info?: {
+    meta: { notaryUrl: string; websocketProxyUrl: string };
+    version: string;
+  };
 }): ReactElement {
   const dispatch = useDispatch();
   const { requestId } = useParams<{ requestId: string }>();
   const request = useRequestHistory(requestId);
   const navigate = useNavigate();
   const [tab, setTab] = useState('sent');
+  const [isPopup, setIsPopup] = useState(isPopupWindow());
+  const [showRemoveModal, setShowRemoveModal] = useState(false);
 
   const onDelete = useCallback(async () => {
     if (requestId) {
       dispatch(deleteRequestHistory(requestId));
+      if (isPopup) window.close();
       navigate(-1);
     }
   }, [requestId]);
 
+  const notaryUrl = extractFromProps('notaryUrl', props, request);
+  const websocketProxyUrl = extractFromProps(
+    'websocketProxyUrl',
+    props,
+    request,
+  );
+
   return (
     <div
       className={classNames(
@@ -41,23 +65,37 @@ export default function ProofViewer(props?: {
         props?.className,
       )}
     >
+      <RemoveHistory
+        onRemove={onDelete}
+        showRemovalModal={showRemoveModal}
+        setShowRemoveModal={setShowRemoveModal}
+        onCancel={() => setShowRemoveModal(false)}
+      />
       <div className="flex flex-col px-2">
         <div className="flex flex-row gap-2 items-center">
-          <Icon
-            className={c(
-              'px-1 select-none cursor-pointer',
-              'text-slate-400 border-b-2 border-transparent hover:text-slate-500 active:text-slate-800',
-            )}
-            onClick={() => navigate(-1)}
-            fa="fa-solid fa-xmark"
-          />
+          {!isPopup && (
+            <Icon
+              className={c(
+                'px-1 select-none cursor-pointer',
+                'text-slate-400 border-b-2 border-transparent hover:text-slate-500 active:text-slate-800',
+              )}
+              onClick={() => navigate(-1)}
+              fa="fa-solid fa-xmark"
+            />
+          )}
           <TabLabel onClick={() => setTab('sent')} active={tab === 'sent'}>
             Sent
           </TabLabel>
           <TabLabel onClick={() => setTab('recv')} active={tab === 'recv'}>
             Recv
           </TabLabel>
-          <div className="flex flex-row flex-grow items-center justify-end gap-2">
+          <TabLabel
+            onClick={() => setTab('metadata')}
+            active={tab === 'metadata'}
+          >
+            Metadata
+          </TabLabel>
+          <div className="flex flex-row flex-grow items-center justify-end">
             {!props?.recv && (
               <button
                 className="button"
@@ -69,7 +107,10 @@ export default function ProofViewer(props?: {
                 Download
               </button>
             )}
-            <button className="button !text-red-500" onClick={onDelete}>
+            <button
+              className="button !text-red-500"
+              onClick={() => setShowRemoveModal(true)}
+            >
               Delete
             </button>
           </div>
@@ -90,11 +131,61 @@ export default function ProofViewer(props?: {
             readOnly
           ></textarea>
         )}
+        {tab === 'metadata' && (
+          <div className="w-full resize-none bg-slate-100 text-slate-800 border p-2 text-[10px] break-all h-full outline-none font-mono">
+            <MetadataRow
+              label="Version"
+              //@ts-ignore
+              value={props?.info?.version || request?.proof?.version}
+            />
+            <MetadataRow label="Notary URL" value={notaryUrl} />
+            <MetadataRow
+              label="Websocket Proxy URL"
+              value={websocketProxyUrl}
+            />
+            <MetadataRow
+              label="Verifying Key"
+              value={props?.verifierKey || request?.verification?.verifierKey}
+            />
+            <MetadataRow
+              label="Notary Key"
+              value={props?.notaryKey || request?.verification?.notaryKey}
+            />
+          </div>
+        )}
       </div>
     </div>
   );
 }
 
+function extractFromProps(
+  key: 'notaryUrl' | 'websocketProxyUrl',
+  props?: {
+    className?: string;
+    recv?: string;
+    sent?: string;
+    verifierKey?: string;
+    notaryKey?: string;
+    info?: {
+      meta: { notaryUrl: string; websocketProxyUrl: string };
+      version: string;
+    };
+  },
+  request?: RequestHistory,
+) {
+  let value;
+
+  if (props?.info?.meta) {
+    value = props.info.meta[key];
+  } else if (request && (request?.proof as PresentationJSON)?.meta) {
+    value = (request.proof as PresentationJSON).meta[key];
+  } else {
+    value = '';
+  }
+
+  return value;
+}
+
 function TabLabel(props: {
   children: ReactNode;
   onClick: MouseEventHandler;
@@ -113,3 +204,20 @@ function TabLabel(props: {
     </button>
   );
 }
+
+function MetadataRow({
+  label,
+  value,
+}: {
+  label: string;
+  value: string | undefined;
+}) {
+  return (
+    <div>
+      <div>{label}:</div>
+      <div className="text-sm font-semibold whitespace-pre-wrap">
+        {value || 'N/A'}
+      </div>
+    </div>
+  );
+}

src/pages/RunPluginByUrlApproval/index.tsx

@@ -7,39 +7,59 @@ import { BackgroundActiontype } from '../../entries/Background/rpc';
 import { BaseApproval } from '../BaseApproval';
 import { PluginPermissions } from '../../components/PluginInfo';
 import {
-  getPluginConfigByHash,
-  getPluginMetadataByHash,
+  getPluginConfigByUrl,
+  getPluginMetadataByUrl,
+  getPluginByUrl,
 } from '../../entries/Background/db';
-import { runPlugin } from '../../utils/rpc';
 import { SidePanelActionTypes } from '../../entries/SidePanel/types';
 import { deferredPromise } from '../../utils/promise';
+import { installPlugin } from '../../entries/Background/plugins/utils';
 
-export function RunPluginApproval(): ReactElement {
+export function RunPluginByUrlApproval(): ReactElement {
   const [params] = useSearchParams();
   const origin = params.get('origin');
   const favIconUrl = params.get('favIconUrl');
-  const hash = params.get('hash');
+  const url = params.get('url');
+  const pluginParams = params.get('params');
   const hostname = urlify(origin || '')?.hostname;
   const [error, showError] = useState('');
   const [metadata, setPluginMetadata] = useState<PluginMetadata | null>(null);
   const [pluginContent, setPluginContent] = useState<PluginConfig | null>(null);
 
+  useEffect(() => {
+    if (!url) return;
+    (async () => {
+      try {
+        const hex = await getPluginByUrl(url);
+
+        if (!hex) {
+          await installPlugin(url);
+        }
+
+        const config = await getPluginConfigByUrl(url);
+        const metadata = await getPluginMetadataByUrl(url);
+        setPluginContent(config);
+        setPluginMetadata(metadata);
+      } catch (e: any) {
+        showError(e?.message || 'Invalid Plugin');
+      }
+    })();
+  }, [url]);
+
   const onCancel = useCallback(() => {
     browser.runtime.sendMessage({
-      type: BackgroundActiontype.run_plugin_response,
+      type: BackgroundActiontype.run_plugin_by_url_response,
       data: false,
     });
   }, []);
 
   const onAccept = useCallback(async () => {
-    if (!hash) return;
+    if (!url) return;
     try {
       const tab = await browser.tabs.create({
         active: true,
       });
 
-      await browser.storage.local.set({ plugin_hash: hash });
-
       const { promise, resolve } = deferredPromise();
 
       const listener = async (request: any) => {
@@ -59,32 +79,19 @@ export function RunPluginApproval(): ReactElement {
       browser.runtime.sendMessage({
         type: SidePanelActionTypes.execute_plugin_request,
         data: {
-          pluginHash: hash,
+          pluginUrl: url,
+          pluginParams: pluginParams ? JSON.parse(pluginParams) : undefined,
         },
       });
 
       browser.runtime.sendMessage({
-        type: BackgroundActiontype.run_plugin_response,
+        type: BackgroundActiontype.run_plugin_by_url_response,
         data: true,
       });
     } catch (e: any) {
       showError(e.message);
     }
-  }, [hash]);
-
-  useEffect(() => {
-    (async () => {
-      if (!hash) return;
-      try {
-        const config = await getPluginConfigByHash(hash);
-        const metadata = await getPluginMetadataByHash(hash);
-        setPluginContent(config);
-        setPluginMetadata(metadata);
-      } catch (e: any) {
-        showError(e?.message || 'Invalid Plugin');
-      }
-    })();
-  }, [hash]);
+  }, [url]);
 
   return (
     <BaseApproval

src/reducers/history.tsx

@@ -1,6 +1,7 @@
 import {
   BackgroundActiontype,
   RequestHistory,
+  RequestProgress,
 } from '../entries/Background/rpc';
 import { useSelector } from 'react-redux';
 import { AppRootState } from './index';
@@ -76,6 +77,9 @@ export default function history(
       if (!payload) return state;
 
       const existing = state.map[payload.id];
+      if (existing?.progress === RequestProgress.Error) {
+        return state;
+      }
       const newMap = {
         ...state.map,
         [payload.id]: payload,
@@ -90,13 +94,20 @@ export default function history(
     }
     case ActionType['/history/setRequests']: {
       const payload: RequestHistory[] = action.payload;
-
+      const newMap = payload.reduce(
+        (map: { [id: string]: RequestHistory }, req) => {
+          if (state.map[req.id]?.progress === RequestProgress.Error) {
+            map[req.id] = state.map[req.id];
+          } else {
+            map[req.id] = req;
+          }
+          return map;
+        },
+        {},
+      );
       return {
         ...state,
-        map: payload.reduce((map: { [id: string]: RequestHistory }, req) => {
-          map[req.id] = req;
-          return map;
-        }, {}),
+        map: newMap,
         order: payload.map(({ id }) => id),
       };
     }

src/reducers/plugins.tsx

@@ -1,13 +1,9 @@
 import { useSelector } from 'react-redux';
 import { AppRootState } from './index';
 import deepEqual from 'fast-deep-equal';
-import { useCallback, useEffect, useState } from 'react';
-import { getPluginConfigByHash } from '../entries/Background/db';
+import { useEffect, useState } from 'react';
+import { getPluginConfigByUrl } from '../entries/Background/db';
 import { PluginConfig } from '../utils/misc';
-import { runPlugin } from '../utils/rpc';
-import browser from 'webextension-polyfill';
-import { openSidePanel } from '../entries/utils';
-import { SidePanelActionTypes } from '../entries/SidePanel/types';
 
 enum ActionType {
   '/plugin/addPlugin' = '/plugin/addPlugin',
@@ -64,27 +60,8 @@ export const usePluginConfig = (hash: string) => {
   const [config, setConfig] = useState<PluginConfig | null>(null);
   useEffect(() => {
     (async function () {
-      setConfig(await getPluginConfigByHash(hash));
+      setConfig(await getPluginConfigByUrl(hash));
     })();
   }, [hash]);
   return config;
 };
-
-export const useOnPluginClick = (hash: string) => {
-  return useCallback(async () => {
-    await browser.storage.local.set({ plugin_hash: hash });
-
-    await openSidePanel();
-
-    browser.runtime.sendMessage({
-      type: SidePanelActionTypes.execute_plugin_request,
-      data: {
-        pluginHash: hash,
-      },
-    });
-
-    await runPlugin(hash, 'start');
-
-    window.close();
-  }, [hash]);
-};

src/utils/constants.ts

@@ -1,5 +1,5 @@
 export const EXPLORER_API = 'https://explorer.tlsnotary.org';
-export const NOTARY_API = 'https://notary.pse.dev/v0.1.0-alpha.7';
+export const NOTARY_API = 'https://notary.pse.dev/v0.1.0-alpha.10';
 export const RENDEZVOUS_API = 'wss://explorer.tlsnotary.org';
 export const NOTARY_PROXY = 'wss://notary.pse.dev/proxy';
 export const MAX_RECV = 16384;

src/utils/misc.ts

@@ -89,6 +89,19 @@ export const copyText = async (text: string): Promise<void> => {
   }
 };
 
+export function convertNotaryWsToHttp(notaryWs: string) {
+  const { protocol, pathname, hostname, port } = new URL(notaryWs);
+
+  if (protocol === 'https:' || protocol === 'http:') {
+    return notaryWs;
+  }
+  const p = protocol === 'wss:' ? 'https:' : 'http:';
+  const pt = port ? `:${port}` : '';
+  const path = pathname === '/' ? '' : pathname.replace('/notarize', '');
+  const h = hostname === 'localhost' ? '127.0.0.1' : hostname;
+  return p + '//' + h + pt + path;
+}
+
 export async function replayRequest(req: RequestLog): Promise<string> {
   const options = {
     method: req.method,
@@ -212,11 +225,12 @@ export const makePlugin = async (
 
         if (meta?.p2p) {
           const pluginHex = Buffer.from(arrayBuffer).toString('hex');
+          const pluginUrl = await sha256(pluginHex);
           handleExecP2PPluginProver({
             type: BackgroundActiontype.execute_p2p_plugin_prover,
             data: {
               ...params,
-              pluginHash: await sha256(pluginHex),
+              pluginUrl,
               pluginHex,
               body: reqBody,
               now,
@@ -233,7 +247,7 @@ export const makePlugin = async (
                 return new Promise((resolve) => {
                   setTimeout(async () => {
                     const out = await plugin.call(getSecretResponse, body);
-                    resolve(JSON.parse(out.string()));
+                    resolve(JSON.parse(out?.string() || '{}'));
                   }, 0);
                 });
               },
@@ -453,3 +467,9 @@ export function safeParseJSON(data?: string | null) {
     return null;
   }
 }
+
+export function isPopupWindow(): boolean {
+  return (
+    !!window.opener || window.matchMedia('(display-mode: standalone)').matches
+  );
+}

src/utils/parser.ts

@@ -0,0 +1,33 @@
+import { HTTPParser } from 'http-parser-js';
+
+export function parseHttpMessage(buffer: Buffer, type: 'request' | 'response') {
+  const parser = new HTTPParser(
+    type === 'request' ? HTTPParser.REQUEST : HTTPParser.RESPONSE,
+  );
+  const body: Buffer[] = [];
+  let complete = false;
+  let headers: string[] = [];
+
+  parser.onBody = (t) => {
+    body.push(t);
+  };
+
+  parser.onHeadersComplete = (res) => {
+    headers = res.headers;
+  };
+
+  parser.onMessageComplete = () => {
+    complete = true;
+  };
+
+  parser.execute(buffer);
+  parser.finish();
+
+  if (!complete) throw new Error(`Could not parse ${type.toUpperCase()}`);
+
+  return {
+    info: buffer.toString('utf-8').split('\r\n')[0],
+    headers,
+    body,
+  };
+}

src/utils/rpc.ts

@@ -2,10 +2,10 @@ import browser from 'webextension-polyfill';
 import { BackgroundActiontype } from '../entries/Background/rpc';
 import { PluginConfig } from './misc';
 
-export async function addPlugin(hex: string) {
+export async function addPlugin(hex: string, url: string) {
   return browser.runtime.sendMessage({
     type: BackgroundActiontype.add_plugin,
-    data: hex,
+    data: { hex, url },
   });
 }
 

webpack.config.js

@@ -7,7 +7,6 @@ var webpack = require("webpack"),
   TerserPlugin = require("terser-webpack-plugin");
 var { CleanWebpackPlugin } = require("clean-webpack-plugin");
 var ReactRefreshWebpackPlugin = require("@pmmmwh/react-refresh-webpack-plugin");
-var ReactRefreshTypeScript = require("react-refresh-typescript");
 var ExtReloader = require('webpack-ext-reloader');
 
 const ASSET_PATH = process.env.ASSET_PATH || "/";
@@ -42,6 +41,9 @@ var options = {
     /Circular dependency between chunks with runtime/,
     /ResizeObserver loop completed with undelivered notifications/,
     /Should not import the named export/,
+    /Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0/,
+    /Global built-in functions are deprecated and will be removed in Dart Sass 3.0.0./,
+    /repetitive deprecation warnings omitted/,
   ],
 
   entry: {
@@ -111,11 +113,6 @@ var options = {
           {
             loader: require.resolve("ts-loader"),
             options: {
-              getCustomTransformers: () => ({
-                before: [isDevelopment && ReactRefreshTypeScript()].filter(
-                  Boolean
-                ),
-              }),
               transpileOnly: isDevelopment,
             },
           },