chore: update default twitter plugin and bump version (#132)

chore: Remove stale websockify_config

Co-authored-by: Hendrik Eeckhaut <hendrik@eeckhaut.org>

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "tlsn-extension",
-  "version": "0.1.0.700",
+  "version": "0.1.0.703",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "tlsn-extension",
-      "version": "0.1.0.700",
+      "version": "0.1.0.703",
       "license": "MIT",
       "dependencies": {
         "@extism/extism": "^1.0.2",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "tlsn-extension",
-  "version": "0.1.0.700",
+  "version": "0.1.0.703",
   "license": "MIT",
   "repository": {
     "type": "git",

src/components/PluginInfo/index.tsx

@@ -193,6 +193,22 @@ export function PluginPermissions({
           </span>
         </PermissionDescription>
       )}
+      {pluginContent.localStorage && (
+        <PermissionDescription fa="fa-solid fa-database">
+          <span className="cursor-default">
+            <span className="mr-1">Access local storage storage from</span>
+            <MultipleParts parts={pluginContent.localStorage} />
+          </span>
+        </PermissionDescription>
+      )}
+      {pluginContent.sessionStorage && (
+        <PermissionDescription fa="fa-solid fa-database">
+          <span className="cursor-default">
+            <span className="mr-1">Access session storage from</span>
+            <MultipleParts parts={pluginContent.sessionStorage} />
+          </span>
+        </PermissionDescription>
+      )}
       {pluginContent.requests && (
         <PermissionDescription fa="fa-solid fa-globe">
           <span className="cursor-default">

src/components/PluginList/index.scss

@@ -6,7 +6,7 @@
     padding: 0;
     overflow: hidden;
     transition: 200ms opacity;
-
+    transition-delay: 200ms;
   }
 
   &:hover {

src/components/PluginList/index.tsx

@@ -7,7 +7,11 @@ import React, {
 } from 'react';
 import { fetchPluginHashes, removePlugin, runPlugin } from '../../utils/rpc';
 import { usePluginHashes } from '../../reducers/plugins';
-import { PluginConfig } from '../../utils/misc';
+import {
+  getPluginConfig,
+  hexToArrayBuffer,
+  PluginConfig,
+} from '../../utils/misc';
 import DefaultPluginIcon from '../../assets/img/default-plugin-icon.png';
 import classNames from 'classnames';
 import Icon from '../Icon';
@@ -20,8 +24,18 @@ import {
   PluginInfoModalHeader,
 } from '../PluginInfo';
 import { getPluginConfigByHash } from '../../entries/Background/db';
+import { SidePanelActionTypes } from '../../entries/SidePanel/types';
+import { openSidePanel } from '../../entries/utils';
 
-export function PluginList(props: { className?: string }): ReactElement {
+export function PluginList({
+  className,
+  unremovable,
+  onClick,
+}: {
+  className?: string;
+  unremovable?: boolean;
+  onClick?: (hash: string) => void;
+}): ReactElement {
   const hashes = usePluginHashes();
 
   useEffect(() => {
@@ -29,65 +43,85 @@ export function PluginList(props: { className?: string }): ReactElement {
   }, []);
 
   return (
-    <div
-      className={classNames('flex flex-col flex-nowrap gap-1', props.className)}
-    >
+    <div className={classNames('flex flex-col flex-nowrap gap-1', className)}>
       {!hashes.length && (
         <div className="flex flex-col items-center justify-center text-slate-400 cursor-default select-none">
           <div>No available plugins</div>
         </div>
       )}
       {hashes.map((hash) => (
-        <Plugin key={hash} hash={hash} />
+        <Plugin
+          key={hash}
+          hash={hash}
+          unremovable={unremovable}
+          onClick={onClick}
+        />
       ))}
     </div>
   );
 }
 
-export function Plugin(props: {
+export function Plugin({
+  hash,
+  hex,
+  unremovable,
+  onClick,
+  className,
+}: {
   hash: string;
-  onClick?: () => void;
+  hex?: string;
+  className?: string;
+  onClick?: (hash: string) => void;
+  unremovable?: boolean;
 }): ReactElement {
   const [error, showError] = useState('');
   const [config, setConfig] = useState<PluginConfig | null>(null);
   const [pluginInfo, showPluginInfo] = useState(false);
   const [remove, showRemove] = useState(false);
 
-  const onClick = useCallback(async () => {
+  const onRunPlugin = useCallback(async () => {
     if (!config || remove) return;
 
-    try {
-      await runPlugin(props.hash, 'start');
+    if (onClick) {
+      onClick(hash);
+      return;
+    }
 
-      const [tab] = await browser.tabs.query({
-        active: true,
-        currentWindow: true,
+    try {
+      await openSidePanel();
+
+      browser.runtime.sendMessage({
+        type: SidePanelActionTypes.execute_plugin_request,
+        data: {
+          pluginHash: hash,
+        },
       });
 
-      await browser.storage.local.set({ plugin_hash: props.hash });
-
-      // @ts-ignore
-      if (chrome.sidePanel) await chrome.sidePanel.open({ tabId: tab.id });
+      await runPlugin(hash, 'start');
 
       window.close();
     } catch (e: any) {
       showError(e.message);
     }
-  }, [props.hash, config, remove]);
+  }, [hash, config, remove, onClick]);
 
   useEffect(() => {
     (async function () {
-      setConfig(await getPluginConfigByHash(props.hash));
+      if (hex) {
+        setConfig(await getPluginConfig(hexToArrayBuffer(hex)));
+      } else {
+        setConfig(await getPluginConfigByHash(hash));
+      }
     })();
-  }, [props.hash]);
+  }, [hash, hex]);
 
   const onRemove: MouseEventHandler = useCallback(
     (e) => {
       e.stopPropagation();
-      removePlugin(props.hash);
+      removePlugin(hash);
       showRemove(false);
     },
-    [props.hash, remove],
+    [hash, remove],
   );
 
   const onConfirmRemove: MouseEventHandler = useCallback(
@@ -95,7 +129,7 @@ export function Plugin(props: {
       e.stopPropagation();
       showRemove(true);
     },
-    [props.hash, remove],
+    [hash, remove],
   );
 
   const onPluginInfo: MouseEventHandler = useCallback(
@@ -103,7 +137,7 @@ export function Plugin(props: {
       e.stopPropagation();
       showPluginInfo(true);
     },
-    [props.hash, pluginInfo],
+    [hash, pluginInfo],
   );
 
   if (!config) return <></>;
@@ -113,8 +147,9 @@ export function Plugin(props: {
       className={classNames(
         'flex flex-row justify-center border rounded border-slate-300 p-2 gap-2 plugin-box',
         'cursor-pointer hover:bg-slate-100 hover:border-slate-400 active:bg-slate-200',
+        className,
       )}
-      onClick={onClick}
+      onClick={onRunPlugin}
     >
       {!!error && <ErrorModal onClose={() => showError('')} message={error} />}
       {!remove ? (
@@ -129,11 +164,13 @@ export function Plugin(props: {
                   className="flex flex-row items-center justify-center cursor-pointer plugin-box__remove-icon"
                   onClick={onPluginInfo}
                 />
-                <Icon
-                  fa="fa-solid fa-xmark"
-                  className="flex flex-row items-center justify-center cursor-pointer text-red-500 bg-red-200 rounded-full plugin-box__remove-icon"
-                  onClick={onConfirmRemove}
-                />
+                {!unremovable && (
+                  <Icon
+                    fa="fa-solid fa-xmark"
+                    className="flex flex-row items-center justify-center cursor-pointer text-red-500 bg-red-200 rounded-full plugin-box__remove-icon"
+                    onClick={onConfirmRemove}
+                  />
+                )}
               </div>
             </div>
             <div>{config.description}</div>

src/entries/Background/db.ts

@@ -1,7 +1,8 @@
 import { Level } from 'level';
 import type { RequestHistory } from './rpc';
-import { PluginConfig, PluginMetadata, sha256 } from '../../utils/misc';
+import { PluginConfig, PluginMetadata, sha256, urlify } from '../../utils/misc';
 import mutex from './mutex';
+import { minimatch } from 'minimatch';
 const charwise = require('charwise');
 
 export const db = new Level('./ext-db', {
@@ -28,6 +29,12 @@ const cookiesDb = db.sublevel<string, boolean>('cookies', {
 const headersDb = db.sublevel<string, boolean>('headers', {
   valueEncoding: 'json',
 });
+const localStorageDb = db.sublevel<string, any>('sessionStorage', {
+  valueEncoding: 'json',
+});
+const sessionStorageDb = db.sublevel<string, any>('localStorage', {
+  valueEncoding: 'json',
+});
 const appDb = db.sublevel<string, any>('app', {
   valueEncoding: 'json',
 });
@@ -234,10 +241,16 @@ export async function getPlugins(): Promise<
       ret.push({
         ...config,
         hash,
-        metadata: metadata || {
-          filePath: '',
-          origin: '',
-        },
+        metadata: metadata
+          ? {
+              ...metadata,
+              hash,
+            }
+          : {
+              filePath: '',
+              origin: '',
+              hash,
+            },
       });
     }
   }
@@ -313,18 +326,32 @@ export async function clearCookies(host: string) {
   });
 }
 
-export async function getCookies(host: string, name: string) {
+export async function getCookies(link: string, name: string) {
   try {
-    const existing = await cookiesDb.sublevel(host).get(name);
+    const existing = await cookiesDb.sublevel(link).get(name);
     return existing;
   } catch (e) {
     return null;
   }
 }
 
-export async function getCookiesByHost(host: string) {
+export async function getCookiesByHost(link: string) {
   const ret: { [key: string]: string } = {};
-  for await (const [key, value] of cookiesDb.sublevel(host).iterator()) {
+  const links: { [k: string]: boolean } = {};
+  const url = urlify(link);
+
+  for await (const sublevel of cookiesDb.keys({ keyEncoding: 'utf8' })) {
+    const l = sublevel.split('!')[1];
+    links[l] = true;
+  }
+
+  const cookieLink = url
+    ? Object.keys(links).filter((l) => minimatch(l, link))[0]
+    : Object.keys(links).filter((l) => urlify(l)?.host === link)[0];
+
+  if (!cookieLink) return ret;
+
+  for await (const [key, value] of cookiesDb.sublevel(cookieLink).iterator()) {
     ret[key] = value;
   }
   return ret;
@@ -347,10 +374,10 @@ export async function getConnection(origin: string) {
   }
 }
 
-export async function setHeaders(host: string, name: string, value?: string) {
+export async function setHeaders(link: string, name: string, value?: string) {
   if (!value) return null;
   return mutex.runExclusive(async () => {
-    await headersDb.sublevel(host).put(name, value);
+    await headersDb.sublevel(link).put(name, value);
     return true;
   });
 }
@@ -370,20 +397,87 @@ export async function getHeaders(host: string, name: string) {
     return null;
   }
 }
-
-export async function getHeadersByHost(host: string) {
+export async function getHeadersByHost(link: string) {
   const ret: { [key: string]: string } = {};
-  for await (const [key, value] of headersDb.sublevel(host).iterator()) {
+  const url = urlify(link);
+
+  const links: { [k: string]: boolean } = {};
+  for await (const sublevel of headersDb.keys({ keyEncoding: 'utf8' })) {
+    const l = sublevel.split('!')[1];
+    links[l] = true;
+  }
+
+  const headerLink = url
+    ? Object.keys(links).filter((l) => minimatch(l, link))[0]
+    : Object.keys(links).filter((l) => urlify(l)?.host === link)[0];
+
+  if (!headerLink) return ret;
+
+  for await (const [key, value] of headersDb.sublevel(headerLink).iterator()) {
     ret[key] = value;
   }
   return ret;
 }
 
-async function getDefaultPluginsInstalled(): Promise<boolean> {
+export async function setLocalStorage(
+  host: string,
+  name: string,
+  value: string,
+) {
+  return mutex.runExclusive(async () => {
+    await localStorageDb.sublevel(host).put(name, value);
+    return true;
+  });
+}
+
+export async function setSessionStorage(
+  host: string,
+  name: string,
+  value: string,
+) {
+  return mutex.runExclusive(async () => {
+    await sessionStorageDb.sublevel(host).put(name, value);
+    return true;
+  });
+}
+
+export async function clearLocalStorage(host: string) {
+  return mutex.runExclusive(async () => {
+    await localStorageDb.sublevel(host).clear();
+    return true;
+  });
+}
+
+export async function clearSessionStorage(host: string) {
+  return mutex.runExclusive(async () => {
+    await sessionStorageDb.sublevel(host).clear();
+    return true;
+  });
+}
+
+export async function getLocalStorageByHost(host: string) {
+  const ret: { [key: string]: string } = {};
+  for await (const [key, value] of localStorageDb.sublevel(host).iterator()) {
+    ret[key] = value;
+  }
+  return ret;
+}
+
+export async function getSessionStorageByHost(host: string) {
+  const ret: { [key: string]: string } = {};
+  for await (const [key, value] of sessionStorageDb.sublevel(host).iterator()) {
+    ret[key] = value;
+  }
+  return ret;
+}
+
+async function getDefaultPluginsInstalled(): Promise<string | boolean> {
   return appDb.get(AppDatabaseKey.DefaultPluginsInstalled).catch(() => false);
 }
 
-export async function setDefaultPluginsInstalled(installed = false) {
+export async function setDefaultPluginsInstalled(
+  installed: string | boolean = false,
+) {
   return mutex.runExclusive(async () => {
     await appDb.put(AppDatabaseKey.DefaultPluginsInstalled, installed);
   });

src/entries/Background/handlers.ts

@@ -4,8 +4,7 @@ import mutex from './mutex';
 import browser from 'webextension-polyfill';
 import { addRequest } from '../../reducers/requests';
 import { urlify } from '../../utils/misc';
-import { setCookies, setHeaders } from './db';
-
+import { getHeadersByHost, setCookies, setHeaders } from './db';
 export const onSendHeaders = (
   details: browser.WebRequest.OnSendHeadersDetailsType,
 ) => {
@@ -15,9 +14,11 @@ export const onSendHeaders = (
     if (method !== 'OPTIONS') {
       const cache = getCacheByTabId(tabId);
       const existing = cache.get<RequestLog>(requestId);
-      const { hostname } = urlify(details.url) || {};
+      const { origin, pathname } = urlify(details.url) || {};
 
-      if (hostname && details.requestHeaders) {
+      const link = [origin, pathname].join('');
+
+      if (link && details.requestHeaders) {
         details.requestHeaders.forEach((header) => {
           const { name, value } = header;
           if (/^cookie$/i.test(name) && value) {
@@ -25,10 +26,10 @@ export const onSendHeaders = (
               .split(';')
               .map((v) => v.split('='))
               .forEach((cookie) => {
-                setCookies(hostname, cookie[0].trim(), cookie[1]);
+                setCookies(link, cookie[0].trim(), cookie[1]);
               });
           } else {
-            setHeaders(hostname, name, value);
+            setHeaders(link, name, value);
           }
         });
       }

src/entries/Background/index.ts

@@ -1,7 +1,7 @@
 import { onBeforeRequest, onResponseStarted, onSendHeaders } from './handlers';
 import { deleteCacheByTabId } from './cache';
 import browser from 'webextension-polyfill';
-import { getAppState, setDefaultPluginsInstalled } from './db';
+import { getAppState, removePlugin, setDefaultPluginsInstalled } from './db';
 import { installPlugin } from './plugins/utils';
 
 (async () => {
@@ -35,15 +35,36 @@ import { installPlugin } from './plugins/utils';
 
   const { defaultPluginsInstalled } = await getAppState();
 
-  if (!defaultPluginsInstalled) {
-    try {
-      const twitterProfileUrl = browser.runtime.getURL('twitter_profile.wasm');
-      const discordDmUrl = browser.runtime.getURL('discord_dm.wasm');
-      await installPlugin(twitterProfileUrl);
-      await installPlugin(discordDmUrl);
-    } finally {
-      await setDefaultPluginsInstalled(true);
+  switch (defaultPluginsInstalled) {
+    case false: {
+      try {
+        const twitterProfileUrl = browser.runtime.getURL(
+          'twitter_profile.wasm',
+        );
+        const discordDmUrl = browser.runtime.getURL('discord_dm.wasm');
+        await installPlugin(twitterProfileUrl);
+        await installPlugin(discordDmUrl);
+      } finally {
+        await setDefaultPluginsInstalled('0.1.0.703');
+      }
+      break;
     }
+    case true: {
+      try {
+        await removePlugin(
+          '6931d2ad63340d3a1fb1a5c1e3f4454c5a518164d6de5ad272e744832355ee02',
+        );
+        const twitterProfileUrl = browser.runtime.getURL(
+          'twitter_profile.wasm',
+        );
+        await installPlugin(twitterProfileUrl);
+      } finally {
+        await setDefaultPluginsInstalled('0.1.0.703');
+      }
+      break;
+    }
+    case '0.1.0.703':
+      break;
   }
 
   const { initRPC } = await import('./rpc');

src/entries/Background/plugins/utils.ts

@@ -26,4 +26,18 @@ export async function installPlugin(
     filePath,
   });
   return hash;
+}
+
+export function mapSecretsToRange(secrets: string[], text: string) {
+  return secrets
+    .map((secret: string) => {
+      const index = text.indexOf(secret);
+      return index > -1
+        ? {
+          start: index,
+          end: index + secret.length,
+        }
+        : null;
+    })
+    .filter((data: any) => !!data) as { start: number; end: number }[]
 }

src/entries/Background/rpc.ts

@@ -26,6 +26,8 @@ import {
   getHeadersByHost,
   getAppState,
   setDefaultPluginsInstalled,
+  setLocalStorage,
+  setSessionStorage,
 } from './db';
 import { addOnePlugin, removeOnePlugin } from '../../reducers/plugins';
 import {
@@ -34,6 +36,7 @@ import {
   hexToArrayBuffer,
   makePlugin,
   PluginConfig,
+  safeParseJSON,
 } from '../../utils/misc';
 import {
   getLoggingFilter,
@@ -41,11 +44,25 @@ import {
   getMaxSent,
   getNotaryApi,
   getProxyApi,
+  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,
+  disconnectSession,
+  getP2PState,
+  requestProof,
+  endProofRequest,
+  onProverInstantiated,
+  sendMessage,
+  sendPairedMessage,
+} from './ws';
 
 const charwise = require('charwise');
 
@@ -54,6 +71,7 @@ export enum BackgroundActiontype {
   clear_requests = 'clear_requests',
   push_action = 'push_action',
   execute_plugin_prover = 'execute_plugin_prover',
+  execute_p2p_plugin_prover = 'execute_p2p_plugin_prover',
   get_prove_requests = 'get_prove_requests',
   prove_request_start = 'prove_request_start',
   process_prove_request = 'process_prove_request',
@@ -64,12 +82,15 @@ export enum BackgroundActiontype {
   retry_prove_request = 'retry_prove_request',
   get_cookies_by_hostname = 'get_cookies_by_hostname',
   get_headers_by_hostname = 'get_headers_by_hostname',
+  // Plugins
   add_plugin = 'add_plugin',
   remove_plugin = 'remove_plugin',
   get_plugin_by_hash = 'get_plugin_by_hash',
+  read_plugin_config = 'read_plugin_config',
   get_plugin_config_by_hash = 'get_plugin_config_by_hash',
   run_plugin = 'run_plugin',
   get_plugin_hashes = 'get_plugin_hashes',
+  // Content Script
   open_popup = 'open_popup',
   change_route = 'change_route',
   connect_request = 'connect_request',
@@ -86,9 +107,33 @@ export enum BackgroundActiontype {
   get_plugins_response = 'get_plugins_response',
   run_plugin_request = 'run_plugin_request',
   run_plugin_response = 'run_plugin_response',
+  get_secrets_from_transcript = 'get_secrets_from_transcript',
+  // App State
   get_logging_level = 'get_logging_level',
   get_app_state = 'get_app_state',
   set_default_plugins_installed = 'set_default_plugins_installed',
+  set_local_storage = 'set_local_storage',
+  get_local_storage = 'get_local_storage',
+  set_session_storage = 'set_session_storage',
+  get_session_storage = 'get_session_storage',
+  connect_rendezvous = 'connect_rendezvous',
+  disconnect_rendezvous = 'disconnect_rendezvous',
+  send_pair_request = 'send_pair_request',
+  cancel_pair_request = 'cancel_pair_request',
+  accept_pair_request = 'accept_pair_request',
+  reject_pair_request = 'reject_pair_request',
+  cancel_proof_request = 'cancel_proof_request',
+  accept_proof_request = 'accept_proof_request',
+  reject_proof_request = 'reject_proof_request',
+  start_proof_request = 'start_proof_request',
+  proof_request_end = 'proof_request_end',
+  verifier_started = 'verifier_started',
+  prover_instantiated = 'prover_instantiated',
+  prover_setup = 'prover_setup',
+  prover_started = 'prover_started',
+  get_p2p_state = 'get_p2p_state',
+  request_p2p_proof = 'request_p2p_proof',
+  request_p2p_proof_by_hash = 'request_p2p_proof_by_hash',
 }
 
 export type BackgroundAction = {
@@ -170,12 +215,19 @@ export const initRPC = () => {
           return handleGetPluginHashes(request, sendResponse);
         case BackgroundActiontype.get_plugin_by_hash:
           return handleGetPluginByHash(request, sendResponse);
+        case BackgroundActiontype.read_plugin_config:
+          getPluginConfig(request.data).then(sendResponse);
+          return true;
         case BackgroundActiontype.get_plugin_config_by_hash:
           return handleGetPluginConfigByHash(request, sendResponse);
         case BackgroundActiontype.run_plugin:
           return handleRunPlugin(request, sendResponse);
+        case BackgroundActiontype.get_secrets_from_transcript:
+          return handleGetSecretsFromTranscript(request, sendResponse);
         case BackgroundActiontype.execute_plugin_prover:
           return handleExecPluginProver(request);
+        case BackgroundActiontype.execute_p2p_plugin_prover:
+          return handleExecP2PPluginProver(request);
         case BackgroundActiontype.open_popup:
           return handleOpenPopup(request);
         case BackgroundActiontype.connect_request:
@@ -201,6 +253,80 @@ export const initRPC = () => {
         case BackgroundActiontype.set_default_plugins_installed:
           setDefaultPluginsInstalled(request.data).then(sendResponse);
           return true;
+        case BackgroundActiontype.set_local_storage:
+          return handleSetLocalStorage(request, sender, sendResponse);
+        case BackgroundActiontype.set_session_storage:
+          return handleSetSessionStorage(request, sender, sendResponse);
+        case BackgroundActiontype.connect_rendezvous:
+          connectSession().then(sendResponse);
+          return;
+        case BackgroundActiontype.disconnect_rendezvous:
+          disconnectSession().then(sendResponse);
+          return;
+        case BackgroundActiontype.send_pair_request:
+          sendMessage(request.data, 'pair_request').then(sendResponse);
+          return;
+        case BackgroundActiontype.cancel_pair_request:
+          sendMessage(request.data, 'pair_request_cancel').then(sendResponse);
+          return;
+        case BackgroundActiontype.accept_pair_request:
+          sendMessage(request.data, 'pair_request_accept').then(sendResponse);
+          return;
+        case BackgroundActiontype.reject_pair_request:
+          sendMessage(request.data, 'pair_request_reject').then(sendResponse);
+          return;
+        case BackgroundActiontype.cancel_proof_request:
+          sendPairedMessage('proof_request_cancel', {
+            pluginHash: request.data,
+          }).then(sendResponse);
+          return;
+        case BackgroundActiontype.accept_proof_request:
+          sendPairedMessage('proof_request_accept', {
+            plugfinHash: request.data,
+          }).then(sendResponse);
+          return;
+        case BackgroundActiontype.reject_proof_request:
+          sendPairedMessage('proof_request_reject', {
+            pluginHash: request.data,
+          }).then(sendResponse);
+          return;
+        case BackgroundActiontype.start_proof_request:
+          sendPairedMessage('proof_request_start', {
+            pluginHash: request.data.pluginHash,
+          }).then(sendResponse);
+          return;
+        case BackgroundActiontype.proof_request_end:
+          endProofRequest(request.data).then(sendResponse);
+          return;
+        case BackgroundActiontype.verifier_started:
+          sendPairedMessage('verifier_started', {
+            pluginHash: request.data.pluginHash,
+          }).then(sendResponse);
+          return;
+        case BackgroundActiontype.prover_started:
+          sendPairedMessage('prover_started', {
+            pluginHash: request.data.pluginHash,
+          }).then(sendResponse);
+          return;
+        case BackgroundActiontype.prover_instantiated:
+          onProverInstantiated();
+          return;
+        case BackgroundActiontype.prover_setup:
+          sendPairedMessage('prover_setup', {
+            pluginHash: request.data.pluginHash,
+          }).then(sendResponse);
+          return;
+        case BackgroundActiontype.request_p2p_proof:
+          requestProof(request.data).then(sendResponse);
+          return;
+        case BackgroundActiontype.request_p2p_proof_by_hash:
+          sendPairedMessage('request_proof_by_hash', {
+            pluginHash: request.data,
+          }).then(sendResponse);
+          return;
+        case BackgroundActiontype.get_p2p_state:
+          getP2PState();
+          return;
         default:
           break;
       }
@@ -247,39 +373,21 @@ async function handleFinishProveRequest(
     const newReq = await addNotaryRequestProofs(id, proof);
     if (!newReq) return;
 
-    await browser.runtime.sendMessage({
-      type: BackgroundActiontype.push_action,
-      data: {
-        tabId: 'background',
-      },
-      action: addRequestHistory(await getNotaryRequest(id)),
-    });
+    await pushToRedux(addRequestHistory(await getNotaryRequest(id)));
   }
 
   if (error) {
     const newReq = await setNotaryRequestError(id, error);
     if (!newReq) return;
 
-    await browser.runtime.sendMessage({
-      type: BackgroundActiontype.push_action,
-      data: {
-        tabId: 'background',
-      },
-      action: addRequestHistory(await getNotaryRequest(id)),
-    });
+    await pushToRedux(addRequestHistory(await getNotaryRequest(id)));
   }
 
   if (verification) {
     const newReq = await setNotaryRequestVerification(id, verification);
     if (!newReq) return;
 
-    await browser.runtime.sendMessage({
-      type: BackgroundActiontype.push_action,
-      data: {
-        tabId: 'background',
-      },
-      action: addRequestHistory(await getNotaryRequest(id)),
-    });
+    await pushToRedux(addRequestHistory(await getNotaryRequest(id)));
   }
 
   return sendResponse();
@@ -296,13 +404,7 @@ async function handleRetryProveReqest(
 
   const req = await getNotaryRequest(id);
 
-  await browser.runtime.sendMessage({
-    type: BackgroundActiontype.push_action,
-    data: {
-      tabId: 'background',
-    },
-    action: addRequestHistory(req),
-  });
+  await pushToRedux(addRequestHistory(req));
 
   await browser.runtime.sendMessage({
     type: BackgroundActiontype.process_prove_request,
@@ -348,13 +450,7 @@ async function handleProveRequestStart(
 
   await setNotaryRequestStatus(id, 'pending');
 
-  await browser.runtime.sendMessage({
-    type: BackgroundActiontype.push_action,
-    data: {
-      tabId: 'background',
-    },
-    action: addRequestHistory(await getNotaryRequest(id)),
-  });
+  await pushToRedux(addRequestHistory(await getNotaryRequest(id)));
 
   browser.runtime.sendMessage({
     type: BackgroundActiontype.process_prove_request,
@@ -382,8 +478,9 @@ async function runPluginProver(request: BackgroundAction, now = Date.now()) {
     method,
     headers,
     body,
-    secretHeaders,
-    secretResps,
+    secretHeaders = [],
+    getSecretResponse,
+    getSecretResponseFn,
     notaryUrl: _notaryUrl,
     websocketProxyUrl: _websocketProxyUrl,
     maxSentData: _maxSentData,
@@ -394,6 +491,8 @@ async function runPluginProver(request: BackgroundAction, now = Date.now()) {
   const maxSentData = _maxSentData || (await getMaxSent());
   const maxRecvData = _maxRecvData || (await getMaxRecv());
 
+  let secretResps: string[] = [];
+
   const { id } = await addNotaryRequest(now, {
     url,
     method,
@@ -409,16 +508,76 @@ async function runPluginProver(request: BackgroundAction, now = Date.now()) {
 
   await setNotaryRequestStatus(id, 'pending');
 
-  await browser.runtime.sendMessage({
-    type: BackgroundActiontype.push_action,
-    data: {
-      tabId: 'background',
-    },
-    action: addRequestHistory(await getNotaryRequest(id)),
-  });
+  await pushToRedux(addRequestHistory(await getNotaryRequest(id)));
 
-  await browser.runtime.sendMessage({
-    type: BackgroundActiontype.process_prove_request,
+  const onProverResponse = async (request: any) => {
+    const { data, type } = request;
+
+    if (type !== OffscreenActionTypes.create_prover_response) {
+      return;
+    }
+
+    if (data.error) {
+      console.error(data.error);
+      return;
+    }
+
+    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],
+        );
+      }
+    }
+
+    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),
+      ),
+    };
+
+    browser.runtime.sendMessage({
+      type: OffscreenActionTypes.create_presentation_request,
+      data: {
+        id,
+        commit,
+      },
+    });
+
+    browser.runtime.onMessage.removeListener(onProverResponse);
+  };
+
+  browser.runtime.onMessage.addListener(onProverResponse);
+
+  browser.runtime.sendMessage({
+    type: OffscreenActionTypes.create_prover_request,
     data: {
       id,
       url,
@@ -429,12 +588,96 @@ async function runPluginProver(request: BackgroundAction, now = Date.now()) {
       websocketProxyUrl,
       maxRecvData,
       maxSentData,
-      secretHeaders,
+    },
+  });
+}
+
+async function handleGetSecretsFromTranscript(
+  request: BackgroundAction,
+  sendResponse: (data?: any) => void,
+) {
+  const { pluginHash, pluginHex, p2p, transcript, method } = request.data;
+  const hex = (await getPluginByHash(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;
+      }
+
+      return state;
+    },
+    { headerEnd: false, body: [] },
+  ).body;
+
+  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());
+  await browser.runtime.sendMessage({
+    type: OffscreenActionTypes.get_secrets_from_transcript_success,
+    data: {
       secretResps,
     },
   });
 }
 
+async function runP2PPluginProver(request: BackgroundAction, now = Date.now()) {
+  const {
+    pluginHash,
+    pluginHex,
+    url,
+    method,
+    headers,
+    body,
+    secretHeaders,
+    getSecretResponse,
+    websocketProxyUrl: _websocketProxyUrl,
+    maxSentData: _maxSentData,
+    maxRecvData: _maxRecvData,
+    clientId,
+  } = request.data;
+  const rendezvousApi = await getRendezvousApi();
+  const proverUrl = `${rendezvousApi}?clientId=${clientId}:proof`;
+  const websocketProxyUrl = _websocketProxyUrl || (await getProxyApi());
+  const maxSentData = _maxSentData || (await getMaxSent());
+  const maxRecvData = _maxRecvData || (await getMaxRecv());
+
+  await browser.runtime.sendMessage({
+    type: OffscreenActionTypes.start_p2p_prover,
+    data: {
+      pluginHash,
+      pluginHex,
+      url,
+      method,
+      headers,
+      body,
+      proverUrl,
+      websocketProxyUrl,
+      maxRecvData,
+      maxSentData,
+      secretHeaders,
+      getSecretResponse,
+    },
+  });
+}
+
 export async function handleExecPluginProver(request: BackgroundAction) {
   const now = request.data.now;
   const id = charwise.encode(now).toString('hex');
@@ -442,6 +685,13 @@ export async function handleExecPluginProver(request: BackgroundAction) {
   return id;
 }
 
+export async function handleExecP2PPluginProver(request: BackgroundAction) {
+  const now = request.data.now;
+  const id = charwise.encode(now).toString('hex');
+  runP2PPluginProver(request, now);
+  return id;
+}
+
 function handleGetCookiesByHostname(
   request: BackgroundAction,
   sendResponse: (data?: any) => void,
@@ -464,6 +714,39 @@ function handleGetHeadersByHostname(
   return true;
 }
 
+async function handleSetLocalStorage(
+  request: BackgroundAction,
+  sender: browser.Runtime.MessageSender,
+  sendResponse: (data?: any) => void,
+) {
+  if (sender.tab?.url) {
+    const url = new URL(sender.tab.url);
+    const hostname = url.hostname;
+    const { data } = request;
+    for (const [key, value] of Object.entries(data)) {
+      await setLocalStorage(hostname, key, value as string);
+    }
+  }
+}
+
+async function handleSetSessionStorage(
+  request: BackgroundAction,
+  sender: browser.Runtime.MessageSender,
+  sendResponse: (data?: any) => void,
+) {
+  if (
+    request.type === BackgroundActiontype.set_session_storage &&
+    sender.tab?.url
+  ) {
+    const url = new URL(sender.tab.url);
+    const hostname = url.hostname;
+    const { data } = request;
+    for (const [key, value] of Object.entries(data)) {
+      await setSessionStorage(hostname, key, value as string);
+    }
+  }
+}
+
 async function handleAddPlugin(
   request: BackgroundAction,
   sendResponse: (data?: any) => void,
@@ -477,13 +760,7 @@ async function handleAddPlugin(
       if (hash) {
         await addPluginConfig(hash, config);
 
-        await browser.runtime.sendMessage({
-          type: BackgroundActiontype.push_action,
-          data: {
-            tabId: 'background',
-          },
-          action: addOnePlugin(hash),
-        });
+        await pushToRedux(addOnePlugin(hash));
       }
     }
   } finally {
@@ -497,13 +774,7 @@ async function handleRemovePlugin(
 ) {
   await removePlugin(request.data);
   await removePluginConfig(request.data);
-  await browser.runtime.sendMessage({
-    type: BackgroundActiontype.push_action,
-    data: {
-      tabId: 'background',
-    },
-    action: removeOnePlugin(request.data),
-  });
+  await pushToRedux(removeOnePlugin(request.data));
 
   return sendResponse();
 }
@@ -514,13 +785,7 @@ async function handleGetPluginHashes(
 ) {
   const hashes = await getPluginHashes();
   for (const hash of hashes) {
-    await browser.runtime.sendMessage({
-      type: BackgroundActiontype.push_action,
-      data: {
-        tabId: 'background',
-      },
-      action: addOnePlugin(hash),
-    });
+    await pushToRedux(addOnePlugin(hash));
   }
   return sendResponse();
 }
@@ -548,11 +813,11 @@ function handleRunPlugin(
   sendResponse: (data?: any) => void,
 ) {
   (async () => {
-    const { hash, method, params } = request.data;
+    const { hash, method, params, meta } = request.data;
     const hex = await getPluginByHash(hash);
     const arrayBuffer = hexToArrayBuffer(hex!);
     const config = await getPluginConfig(arrayBuffer);
-    const plugin = await makePlugin(arrayBuffer, config);
+    const plugin = await makePlugin(arrayBuffer, config, meta?.p2p);
     devlog(`plugin::${method}`, params);
     const out = await plugin.call(method, params);
     devlog(`plugin response: `, out.string());
@@ -921,6 +1186,11 @@ async function handleInstallPluginRequest(request: BackgroundAction) {
         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,
@@ -1047,7 +1317,6 @@ async function handleRunPluginCSRequest(request: BackgroundAction) {
   );
 
   const onPluginRequest = async (req: any) => {
-    console.log(req);
     if (req.type !== SidePanelActionTypes.execute_plugin_response) return;
     if (req.data.hash !== hash) return;
 

src/entries/Background/ws.ts

@@ -0,0 +1,464 @@
+import { devlog, safeParseJSON, sha256 } from '../../utils/misc';
+import {
+  appendIncomingPairingRequests,
+  appendIncomingProofRequests,
+  appendOutgoingPairingRequests,
+  appendOutgoingProofRequest,
+  setClientId,
+  setConnected,
+  setIncomingPairingRequest,
+  setIncomingProofRequest,
+  setIsProving,
+  setIsVerifying,
+  setOutgoingPairingRequest,
+  setOutgoingProofRequest,
+  setP2PError,
+  setP2PPresentation,
+  setPairing,
+} from '../../reducers/p2p';
+import { pushToRedux } from '../utils';
+import { getPluginByHash } 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';
+
+const state: {
+  clientId: string;
+  pairing: string;
+  socket: WebSocket | null;
+  connected: boolean;
+  reqId: number;
+  incomingPairingRequests: string[];
+  outgoingPairingRequests: string[];
+  incomingProofRequests: string[];
+  outgoingProofRequests: string[];
+  isProving: boolean;
+  isVerifying: boolean;
+  presentation: null | { sent: string; recv: string };
+} = {
+  clientId: '',
+  pairing: '',
+  socket: null,
+  connected: false,
+  reqId: 0,
+  incomingPairingRequests: [],
+  outgoingPairingRequests: [],
+  incomingProofRequests: [],
+  outgoingProofRequests: [],
+  isProving: false,
+  isVerifying: false,
+  presentation: null,
+};
+
+export const getP2PState = async () => {
+  pushToRedux(setPairing(state.pairing));
+  pushToRedux(setConnected(state.connected));
+  pushToRedux(setClientId(state.clientId));
+  pushToRedux(setIncomingPairingRequest(state.incomingPairingRequests));
+  pushToRedux(setOutgoingPairingRequest(state.outgoingPairingRequests));
+  pushToRedux(setIncomingProofRequest(state.incomingProofRequests));
+  pushToRedux(setOutgoingProofRequest(state.outgoingProofRequests));
+  pushToRedux(setIsProving(state.isProving));
+  pushToRedux(setIsVerifying(state.isVerifying));
+  pushToRedux(setP2PPresentation(state.presentation));
+};
+
+export const connectSession = async () => {
+  if (state.socket) return;
+
+  const rendezvousAPI = await getRendezvousApi();
+  const socket = new WebSocket(rendezvousAPI);
+
+  socket.onopen = () => {
+    devlog('Connected to websocket');
+    state.connected = true;
+    state.socket = socket;
+    pushToRedux(setConnected(true));
+    const heartbeatInterval = setInterval(() => {
+      if (socket.readyState === 1) {
+        // Check if connection is open
+        socket.send(bufferify({ method: 'ping' }));
+      } else {
+        disconnectSession();
+        clearInterval(heartbeatInterval); // Stop heartbeat if connection is closed
+      }
+    }, 55000);
+  };
+
+  socket.onmessage = async (event) => {
+    const message: any = safeParseJSON(await event.data.text());
+
+    if (message.error) {
+      pushToRedux(setP2PError(message.error.message));
+      return;
+    }
+
+    switch (message.method) {
+      case 'client_connect': {
+        const { clientId } = message.params;
+        state.clientId = clientId;
+        pushToRedux(setClientId(clientId));
+        break;
+      }
+      case 'pair_request': {
+        const { from } = message.params;
+        state.incomingPairingRequests = [
+          ...new Set(state.incomingPairingRequests.concat(from)),
+        ];
+        pushToRedux(appendIncomingPairingRequests(from));
+        sendMessage(from, 'pair_request_sent', { pairId: state.clientId });
+        break;
+      }
+      case 'pair_request_sent': {
+        const { pairId } = message.params;
+        state.outgoingPairingRequests = [
+          ...new Set(state.outgoingPairingRequests.concat(pairId)),
+        ];
+        pushToRedux(appendOutgoingPairingRequests(pairId));
+        break;
+      }
+      case 'pair_request_cancel': {
+        const { from } = message.params;
+        state.incomingPairingRequests = state.incomingPairingRequests.filter(
+          (id) => id !== from,
+        );
+        pushToRedux(setIncomingPairingRequest(state.incomingPairingRequests));
+        sendMessage(from, 'pair_request_cancelled', { pairId: state.clientId });
+        break;
+      }
+      case 'pair_request_cancelled': {
+        const { pairId } = message.params;
+        state.outgoingPairingRequests = state.outgoingPairingRequests.filter(
+          (id) => id !== pairId,
+        );
+        pushToRedux(setOutgoingPairingRequest(state.outgoingPairingRequests));
+        break;
+      }
+      case 'pair_request_reject': {
+        const { from } = message.params;
+        state.outgoingPairingRequests = state.outgoingPairingRequests.filter(
+          (id) => id !== from,
+        );
+        pushToRedux(setOutgoingPairingRequest(state.outgoingPairingRequests));
+        sendMessage(from, 'pair_request_rejected', { pairId: state.clientId });
+        break;
+      }
+      case 'pair_request_accept': {
+        const { from } = message.params;
+        state.pairing = from;
+        state.outgoingPairingRequests = state.outgoingPairingRequests.filter(
+          (id) => id !== from,
+        );
+        pushToRedux(setOutgoingPairingRequest(state.outgoingPairingRequests));
+        pushToRedux(setPairing(from));
+        sendMessage(from, 'pair_request_success', { pairId: state.clientId });
+        break;
+      }
+      case 'pair_request_success': {
+        const { pairId } = message.params;
+        state.pairing = pairId;
+        pushToRedux(setPairing(pairId));
+        state.incomingPairingRequests = state.incomingPairingRequests.filter(
+          (id) => id !== pairId,
+        );
+        pushToRedux(setIncomingPairingRequest(state.incomingPairingRequests));
+        break;
+      }
+      case 'pair_request_rejected': {
+        const { pairId } = message.params;
+        state.incomingPairingRequests = state.incomingPairingRequests.filter(
+          (id) => id !== pairId,
+        );
+        pushToRedux(setIncomingPairingRequest(state.incomingPairingRequests));
+        break;
+      }
+      case 'request_proof': {
+        const { plugin, pluginHash, from } = message.params;
+        state.incomingProofRequests = [
+          ...new Set(state.incomingProofRequests.concat(plugin)),
+        ];
+        pushToRedux(appendIncomingProofRequests(plugin));
+        sendMessage(from, 'proof_request_received', { pluginHash });
+        break;
+      }
+      case 'request_proof_by_hash': {
+        const { pluginHash, from } = message.params;
+        const plugin = await getPluginByHash(pluginHash);
+        if (plugin) {
+          state.incomingProofRequests = [
+            ...new Set(state.incomingProofRequests.concat(plugin)),
+          ];
+          pushToRedux(appendIncomingProofRequests(plugin));
+          sendMessage(from, 'proof_request_received', { pluginHash });
+        } else {
+          sendMessage(from, 'request_proof_by_hash_failed', { pluginHash });
+        }
+        break;
+      }
+      case 'request_proof_by_hash_failed': {
+        const { pluginHash } = message.params;
+        requestProof(pluginHash);
+        break;
+      }
+      case 'proof_request_received': {
+        const { pluginHash } = message.params;
+        state.outgoingProofRequests = [
+          ...new Set(state.outgoingProofRequests.concat(pluginHash)),
+        ];
+        pushToRedux(appendOutgoingProofRequest(pluginHash));
+        break;
+      }
+      case 'proof_request_cancelled':
+        await handleRemoveOutgoingProofRequest(message);
+        break;
+      case 'proof_request_reject': {
+        const { pluginHash, from } = message.params;
+        await handleRemoveOutgoingProofRequest(message);
+        sendMessage(from, 'proof_request_rejected', { pluginHash });
+        break;
+      }
+      case 'proof_request_cancel': {
+        const { pluginHash, from } = message.params;
+        await handleRemoveIncomingProofRequest(message);
+        sendMessage(from, 'proof_request_cancelled', { pluginHash });
+        break;
+      }
+      case 'proof_request_rejected':
+        await handleRemoveIncomingProofRequest(message);
+        break;
+      case 'proof_request_accept': {
+        const { pluginHash, from } = message.params;
+        const maxSentData = await getMaxSent();
+        const maxRecvData = await getMaxRecv();
+        const rendezvousApi = await getRendezvousApi();
+        browser.runtime.sendMessage({
+          type: OffscreenActionTypes.start_p2p_verifier,
+          data: {
+            pluginHash,
+            maxSentData,
+            maxRecvData,
+            verifierUrl:
+              rendezvousApi + '?clientId=' + state.clientId + ':proof',
+            peerId: state.pairing,
+          },
+        });
+        state.isVerifying = true;
+        pushToRedux(setIsVerifying(true));
+        break;
+      }
+      case 'verifier_started': {
+        const { pluginHash } = message.params;
+        browser.runtime.sendMessage({
+          type: SidePanelActionTypes.start_p2p_plugin,
+          data: {
+            pluginHash: pluginHash,
+          },
+        });
+        break;
+      }
+      case 'prover_setup': {
+        const { pluginHash } = message.params;
+        browser.runtime.sendMessage({
+          type: OffscreenActionTypes.prover_setup,
+          data: {
+            pluginHash: pluginHash,
+          },
+        });
+        break;
+      }
+      case 'prover_started': {
+        const { pluginHash } = message.params;
+        browser.runtime.sendMessage({
+          type: OffscreenActionTypes.prover_started,
+          data: {
+            pluginHash: pluginHash,
+          },
+        });
+        break;
+      }
+      case 'proof_request_start': {
+        const { pluginHash, from } = message.params;
+        browser.runtime.sendMessage({
+          type: OffscreenActionTypes.start_p2p_proof_request,
+          data: {
+            pluginHash: pluginHash,
+          },
+        });
+        break;
+      }
+      case 'proof_request_end': {
+        const { pluginHash, proof } = message.params;
+        const transcript = new Transcript({
+          sent: proof.transcript.sent,
+          recv: proof.transcript.recv,
+        });
+
+        state.presentation = {
+          sent: transcript.sent(),
+          recv: transcript.recv(),
+        };
+
+        pushToRedux(setP2PPresentation(state.presentation));
+
+        browser.runtime.sendMessage({
+          type: OffscreenActionTypes.end_p2p_proof_request,
+          data: {
+            pluginHash: pluginHash,
+            proof: proof,
+          },
+        });
+        break;
+      }
+      default:
+        console.warn(`Unknown message type "${message.method}"`);
+        break;
+    }
+  };
+  socket.onerror = () => {
+    console.error('Error connecting to websocket');
+    pushToRedux(setConnected(false));
+  };
+};
+
+async function handleRemoveOutgoingProofRequest(message: {
+  params: { pluginHash: string };
+}) {
+  const { pluginHash } = message.params;
+  state.outgoingProofRequests = state.outgoingProofRequests.filter(
+    (hash) => hash !== pluginHash,
+  );
+  pushToRedux(setOutgoingProofRequest(state.outgoingProofRequests));
+}
+
+async function handleRemoveIncomingProofRequest(message: {
+  params: { pluginHash: string };
+}) {
+  const { pluginHash } = message.params;
+  const plugin = await getPluginByHash(pluginHash);
+  const incomingProofRequest = [];
+  for (const hex of state.incomingProofRequests) {
+    if (plugin) {
+      if (plugin !== hex) incomingProofRequest.push(hex);
+    } else {
+      if ((await sha256(hex)) !== pluginHash) incomingProofRequest.push(hex);
+    }
+  }
+
+  state.incomingProofRequests = incomingProofRequest;
+  pushToRedux(setIncomingProofRequest(state.incomingProofRequests));
+}
+
+export const disconnectSession = async () => {
+  if (!state.socket) return;
+  const socket = state.socket;
+  state.socket = null;
+  state.clientId = '';
+  state.pairing = '';
+  state.connected = false;
+  state.incomingPairingRequests = [];
+  state.outgoingPairingRequests = [];
+  state.incomingProofRequests = [];
+  state.outgoingProofRequests = [];
+  state.isProving = false;
+  state.isVerifying = false;
+  state.presentation = null;
+  pushToRedux(setPairing(''));
+  pushToRedux(setConnected(false));
+  pushToRedux(setClientId(''));
+  pushToRedux(setIncomingPairingRequest([]));
+  pushToRedux(setOutgoingPairingRequest([]));
+  pushToRedux(setIncomingProofRequest([]));
+  pushToRedux(setOutgoingProofRequest([]));
+  pushToRedux(setIsProving(false));
+  pushToRedux(setIsVerifying(false));
+  pushToRedux(setP2PPresentation(null));
+  await socket.close();
+};
+
+export async function sendMessage(
+  target: string,
+  method: string,
+  params?: any,
+) {
+  const { socket, clientId } = state;
+
+  if (clientId === target) {
+    console.error('client cannot send message to itself.');
+    return;
+  }
+
+  if (!socket) {
+    console.error('socket connection not found.');
+    return;
+  }
+
+  if (!clientId) {
+    console.error('clientId not found.');
+    return;
+  }
+
+  socket.send(
+    bufferify({
+      method,
+      params: {
+        from: clientId,
+        to: target,
+        id: state.reqId++,
+        ...params,
+      },
+    }),
+  );
+}
+
+export async function sendPairedMessage(method: string, params?: any) {
+  const { pairing } = state;
+
+  if (!pairing) {
+    console.error('not paired to a peer.');
+    return;
+  }
+
+  sendMessage(pairing, method, params);
+}
+
+export const requestProof = async (pluginHash: string) => {
+  const pluginHex = await getPluginByHash(pluginHash);
+  sendPairedMessage('request_proof', {
+    plugin: pluginHex,
+    pluginHash,
+  });
+};
+
+export const endProofRequest = async (data: {
+  pluginHash: string;
+  proof: VerifierOutput;
+}) => {
+  const transcript = new Transcript({
+    sent: data.proof.transcript.sent,
+    recv: data.proof.transcript.recv,
+  });
+
+  state.presentation = {
+    sent: transcript.sent(),
+    recv: transcript.recv(),
+  };
+
+  pushToRedux(setP2PPresentation(state.presentation));
+
+  sendPairedMessage('proof_request_end', {
+    pluginHash: data.pluginHash,
+    proof: data.proof,
+  });
+};
+
+export const onProverInstantiated = async () => {
+  state.isProving = true;
+  pushToRedux(setIsProving(true));
+};
+
+function bufferify(data: any): Buffer {
+  return Buffer.from(JSON.stringify(data));
+}

src/entries/Content/content.ts

@@ -116,3 +116,5 @@ const connect = async () => {
 window.tlsn = {
   connect,
 };
+
+window.dispatchEvent(new CustomEvent('tlsn_loaded'));

src/entries/Content/index.ts

@@ -1,4 +1,4 @@
-import browser from 'webextension-polyfill';
+import browser, { browserAction } from 'webextension-polyfill';
 import { ContentScriptRequest, ContentScriptTypes, RPCServer } from './rpc';
 import { BackgroundActiontype, RequestHistory } from '../Background/rpc';
 import { urlify } from '../../utils/misc';
@@ -7,6 +7,24 @@ import { urlify } from '../../utils/misc';
   loadScript('content.bundle.js');
   const server = new RPCServer();
 
+  chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
+    if (message.type === BackgroundActiontype.get_local_storage) {
+      chrome.runtime.sendMessage({
+        type: BackgroundActiontype.set_local_storage,
+        data: { ...localStorage },
+      });
+    }
+  });
+
+  chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
+    if (message.type === BackgroundActiontype.get_session_storage) {
+      chrome.runtime.sendMessage({
+        type: BackgroundActiontype.set_session_storage,
+        data: { ...sessionStorage },
+      });
+    }
+  });
+
   server.on(ContentScriptTypes.connect, async () => {
     const connected = await browser.runtime.sendMessage({
       type: BackgroundActiontype.connect_request,

src/entries/Offscreen/Offscreen.tsx

@@ -1,132 +1,56 @@
 import React, { useEffect } from 'react';
-import * as Comlink from 'comlink';
 import { OffscreenActionTypes } from './types';
-import {
-  NotaryServer,
-  Prover as TProver,
-  Presentation as TPresentation,
-  Transcript,
-} from 'tlsn-js';
-import { verify } from 'tlsn-js-v5';
 
-import { urlify } from '../../utils/misc';
 import { BackgroundActiontype } from '../Background/rpc';
-import browser from 'webextension-polyfill';
-import { PresentationJSON } from '../../utils/types';
-import { PresentationJSON as PresentationJSONa7 } from 'tlsn-js/build/types';
-import { Method } from 'tlsn-js/wasm/pkg';
-
-const { init, Prover, Presentation }: any = Comlink.wrap(
-  new Worker(new URL('./worker.ts', import.meta.url)),
-);
+import {
+  initThreads,
+  onCreatePresentationRequest,
+  onCreateProverRequest,
+  onNotarizationRequest,
+  onProcessProveRequest,
+  onVerifyProof,
+  onVerifyProofRequest,
+  startP2PProver,
+  startP2PVerifier,
+} from './rpc';
 
 const Offscreen = () => {
   useEffect(() => {
     (async () => {
-      const loggingLevel = await browser.runtime.sendMessage({
-        type: BackgroundActiontype.get_logging_level,
-      });
-      await init({ loggingLevel });
+      await initThreads();
       // @ts-ignore
       chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
         switch (request.type) {
           case OffscreenActionTypes.notarization_request: {
-            const { id } = request.data;
-
-            (async () => {
-              try {
-                const proof = await createProof(request.data);
-
-                browser.runtime.sendMessage({
-                  type: BackgroundActiontype.finish_prove_request,
-                  data: {
-                    id,
-                    proof,
-                  },
-                });
-
-                browser.runtime.sendMessage({
-                  type: OffscreenActionTypes.notarization_response,
-                  data: {
-                    id,
-                    proof,
-                  },
-                });
-              } catch (error) {
-                console.error(error);
-                browser.runtime.sendMessage({
-                  type: BackgroundActiontype.finish_prove_request,
-                  data: {
-                    id,
-                    error,
-                  },
-                });
-
-                browser.runtime.sendMessage({
-                  type: OffscreenActionTypes.notarization_response,
-                  data: {
-                    id,
-                    error,
-                  },
-                });
-              }
-            })();
-
+            onNotarizationRequest(request);
+            break;
+          }
+          case OffscreenActionTypes.create_prover_request: {
+            onCreateProverRequest(request);
+            break;
+          }
+          case OffscreenActionTypes.create_presentation_request: {
+            onCreatePresentationRequest(request);
             break;
           }
           case BackgroundActiontype.process_prove_request: {
-            const { id } = request.data;
-
-            (async () => {
-              try {
-                const proof = await createProof(request.data);
-
-                browser.runtime.sendMessage({
-                  type: BackgroundActiontype.finish_prove_request,
-                  data: {
-                    id,
-                    proof: proof,
-                  },
-                });
-              } catch (error) {
-                console.error(error);
-                browser.runtime.sendMessage({
-                  type: BackgroundActiontype.finish_prove_request,
-                  data: {
-                    id,
-                    error,
-                  },
-                });
-              }
-            })();
-
+            onProcessProveRequest(request);
             break;
           }
           case BackgroundActiontype.verify_proof: {
-            (async () => {
-              const result = await verifyProof(request.data);
-              sendResponse(result);
-            })();
-
+            onVerifyProof(request, sendResponse);
             return true;
           }
           case BackgroundActiontype.verify_prove_request: {
-            (async () => {
-              const proof: PresentationJSON = request.data.proof;
-              const result: { sent: string; recv: string } =
-                await verifyProof(proof);
-
-              chrome.runtime.sendMessage<any, string>({
-                type: BackgroundActiontype.finish_prove_request,
-                data: {
-                  id: request.data.id,
-                  verification: {
-                    sent: result.sent,
-                    recv: result.recv,
-                  },
-                },
-              });
-            })();
+            onVerifyProofRequest(request);
+            break;
+          }
+          case OffscreenActionTypes.start_p2p_verifier: {
+            startP2PVerifier(request);
+            break;
+          }
+          case OffscreenActionTypes.start_p2p_prover: {
+            startP2PProver(request);
             break;
           }
           default:
@@ -140,164 +64,3 @@ const Offscreen = () => {
 };
 
 export default Offscreen;
-
-function subtractRanges(
-  ranges: { start: number; end: number },
-  negatives: { start: number; end: number }[],
-): { start: number; end: number }[] {
-  const returnVal: { start: number; end: number }[] = [ranges];
-
-  negatives
-    .sort((a, b) => (a.start < b.start ? -1 : 1))
-    .forEach(({ start, end }) => {
-      const last = returnVal.pop()!;
-
-      if (start < last.start || end > last.end) {
-        console.error('invalid ranges');
-        return;
-      }
-
-      if (start === last.start && end === last.end) {
-        return;
-      }
-
-      if (start === last.start && end < last.end) {
-        returnVal.push({ start: end, end: last.end });
-        return;
-      }
-
-      if (start > last.start && end < last.end) {
-        returnVal.push({ start: last.start, end: start });
-        returnVal.push({ start: end, end: last.end });
-        return;
-      }
-
-      if (start > last.start && end === last.end) {
-        returnVal.push({ start: last.start, end: start });
-        return;
-      }
-    });
-
-  return returnVal;
-}
-
-async function createProof(options: {
-  url: string;
-  notaryUrl: string;
-  websocketProxyUrl: string;
-  method?: Method;
-  headers?: {
-    [name: string]: string;
-  };
-  body?: any;
-  maxSentData?: number;
-  maxRecvData?: number;
-  id: string;
-  secretHeaders: string[];
-  secretResps: string[];
-}): Promise<PresentationJSONa7> {
-  const {
-    url,
-    method = 'GET',
-    headers = {},
-    body,
-    maxSentData,
-    maxRecvData,
-    notaryUrl,
-    websocketProxyUrl,
-    id,
-    secretHeaders = [],
-    secretResps = [],
-  } = options;
-
-  const hostname = urlify(url)?.hostname || '';
-  const notary = NotaryServer.from(notaryUrl);
-  const prover: TProver = await new Prover({
-    id,
-    serverDns: hostname,
-    maxSentData,
-    maxRecvData,
-  });
-
-  await prover.setup(await notary.sessionUrl(maxSentData, maxRecvData));
-
-  await prover.sendRequest(websocketProxyUrl + `?token=${hostname}`, {
-    url,
-    method,
-    headers,
-    body,
-  });
-
-  const transcript = await prover.transcript();
-
-  const commit = {
-    sent: subtractRanges(
-      transcript.ranges.sent.all,
-      secretHeaders
-        .map((secret: string) => {
-          const index = transcript.sent.indexOf(secret);
-          return index > -1
-            ? {
-                start: index,
-                end: index + secret.length,
-              }
-            : null;
-        })
-        .filter((data: any) => !!data) as { start: number; end: number }[],
-    ),
-    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 }[],
-    ),
-  };
-
-  const notarizationOutputs = await prover.notarize(commit);
-
-  const presentation = (await new Presentation({
-    attestationHex: notarizationOutputs.attestation,
-    secretsHex: notarizationOutputs.secrets,
-    notaryUrl: notarizationOutputs.notaryUrl,
-    websocketProxyUrl: notarizationOutputs.websocketProxyUrl,
-    reveal: commit,
-  })) as TPresentation;
-  const presentationJSON = await presentation.json();
-  return presentationJSON;
-}
-
-async function verifyProof(
-  proof: PresentationJSON,
-): Promise<{ sent: string; recv: string }> {
-  let result: { sent: string; recv: 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,
-      });
-      result = {
-        sent: transcript.sent(),
-        recv: transcript.recv(),
-      };
-      break;
-    }
-  }
-
-  return result;
-}

src/entries/Offscreen/rpc.ts

@@ -0,0 +1,484 @@
+import browser from 'webextension-polyfill';
+import { BackgroundActiontype } from '../Background/rpc';
+import { Method } from 'tlsn-wasm';
+import {
+  NotaryServer,
+  Presentation as TPresentation,
+  Prover as TProver,
+  Transcript,
+  Verifier as TVerifier,
+} from 'tlsn-js';
+import { 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';
+
+const { init, Prover, Presentation, Verifier }: any = Comlink.wrap(
+  new Worker(new URL('./worker.ts', import.meta.url)),
+);
+
+const provers: { [id: string]: TProver } = {};
+
+export const initThreads = async () => {
+  const loggingLevel = await browser.runtime.sendMessage({
+    type: BackgroundActiontype.get_logging_level,
+    hardwareConcurrency: navigator.hardwareConcurrency,
+  });
+  await init({ loggingLevel });
+};
+export const onNotarizationRequest = async (request: any) => {
+  const { id } = request.data;
+
+  try {
+    const proof = await createProof(request.data);
+
+    browser.runtime.sendMessage({
+      type: BackgroundActiontype.finish_prove_request,
+      data: {
+        id,
+        proof,
+      },
+    });
+
+    browser.runtime.sendMessage({
+      type: OffscreenActionTypes.notarization_response,
+      data: {
+        id,
+        proof,
+      },
+    });
+  } catch (error) {
+    console.error(error);
+    browser.runtime.sendMessage({
+      type: BackgroundActiontype.finish_prove_request,
+      data: {
+        id,
+        error,
+      },
+    });
+
+    browser.runtime.sendMessage({
+      type: OffscreenActionTypes.notarization_response,
+      data: {
+        id,
+        error,
+      },
+    });
+  }
+};
+
+export const onCreateProverRequest = async (request: any) => {
+  const { id } = request.data;
+
+  try {
+    const prover = await createProver(request.data);
+
+    provers[id] = prover;
+
+    browser.runtime.sendMessage({
+      type: OffscreenActionTypes.create_prover_response,
+      data: {
+        id,
+        transcript: await prover.transcript(),
+      },
+    });
+  } catch (error) {
+    console.error(error);
+    browser.runtime.sendMessage({
+      type: OffscreenActionTypes.create_prover_response,
+      data: {
+        id,
+        error,
+      },
+    });
+  }
+};
+
+export const onCreatePresentationRequest = async (request: any) => {
+  const { id, commit } = request.data;
+  const prover = provers[id];
+
+  try {
+    if (!prover) throw new Error(`Cannot find prover ${id}.`);
+
+    const notarizationOutputs = await prover.notarize(commit);
+
+    const presentation = (await new Presentation({
+      attestationHex: notarizationOutputs.attestation,
+      secretsHex: notarizationOutputs.secrets,
+      notaryUrl: notarizationOutputs.notaryUrl,
+      websocketProxyUrl: notarizationOutputs.websocketProxyUrl,
+      reveal: commit,
+    })) as TPresentation;
+    const presentationJSON = await presentation.json();
+
+    browser.runtime.sendMessage({
+      type: BackgroundActiontype.finish_prove_request,
+      data: {
+        id,
+        proof: presentationJSON,
+      },
+    });
+
+    delete provers[id];
+  } catch (error) {
+    console.error(error);
+    browser.runtime.sendMessage({
+      type: BackgroundActiontype.finish_prove_request,
+      data: {
+        id,
+        error,
+      },
+    });
+  }
+};
+
+export const onProcessProveRequest = async (request: any) => {
+  const { id } = request.data;
+
+  try {
+    const proof = await createProof(request.data);
+
+    browser.runtime.sendMessage({
+      type: BackgroundActiontype.finish_prove_request,
+      data: {
+        id,
+        proof: proof,
+      },
+    });
+  } catch (error) {
+    console.error(error);
+    browser.runtime.sendMessage({
+      type: BackgroundActiontype.finish_prove_request,
+      data: {
+        id,
+        error,
+      },
+    });
+  }
+};
+
+export const onVerifyProof = async (request: any, sendResponse: any) => {
+  const result = await verifyProof(request.data);
+  sendResponse(result);
+};
+
+export const onVerifyProofRequest = async (request: any) => {
+  const proof: PresentationJSON = request.data.proof;
+  const result: { sent: string; recv: string } = await verifyProof(proof);
+
+  chrome.runtime.sendMessage<any, string>({
+    type: BackgroundActiontype.finish_prove_request,
+    data: {
+      id: request.data.id,
+      verification: {
+        sent: result.sent,
+        recv: result.recv,
+      },
+    },
+  });
+};
+
+export const startP2PVerifier = async (request: any) => {
+  const { pluginHash, maxSentData, maxRecvData, verifierUrl } = request.data;
+  const verifier: TVerifier = await new Verifier({
+    id: pluginHash,
+    maxSentData: maxSentData,
+    maxRecvData: maxRecvData,
+  });
+
+  await verifier.connect(verifierUrl);
+  const proverStarted = waitForEvent(OffscreenActionTypes.prover_started);
+
+  browser.runtime.sendMessage({
+    type: BackgroundActiontype.verifier_started,
+    data: {
+      pluginHash,
+    },
+  });
+
+  await waitForEvent(OffscreenActionTypes.prover_setup);
+
+  verifier.verify().then((res) => {
+    browser.runtime.sendMessage({
+      type: BackgroundActiontype.proof_request_end,
+      data: {
+        pluginHash,
+        proof: res,
+      },
+    });
+  });
+
+  await proverStarted;
+
+  browser.runtime.sendMessage({
+    type: BackgroundActiontype.start_proof_request,
+    data: {
+      pluginHash,
+    },
+  });
+};
+
+export const startP2PProver = async (request: any) => {
+  const {
+    pluginHash,
+    pluginHex,
+    url,
+    method,
+    headers,
+    body,
+    proverUrl,
+    websocketProxyUrl,
+    maxRecvData,
+    maxSentData,
+    secretHeaders,
+    getSecretResponse,
+  } = request.data;
+
+  const hostname = urlify(url)?.hostname || '';
+
+  const prover: TProver = await new Prover({
+    id: pluginHash,
+    serverDns: hostname,
+    maxSentData,
+    maxRecvData,
+  });
+
+  browser.runtime.sendMessage({
+    type: BackgroundActiontype.prover_instantiated,
+    data: {
+      pluginHash,
+    },
+  });
+
+  const proofRequestStart = waitForEvent(
+    OffscreenActionTypes.start_p2p_proof_request,
+  );
+
+  const proverSetup = prover.setup(proverUrl);
+  await new Promise((r) => setTimeout(r, 5000));
+  browser.runtime.sendMessage({
+    type: BackgroundActiontype.prover_setup,
+    data: {
+      pluginHash,
+    },
+  });
+
+  await proverSetup;
+  browser.runtime.sendMessage({
+    type: BackgroundActiontype.prover_started,
+    data: {
+      pluginHash,
+    },
+  });
+  await proofRequestStart;
+  await prover.sendRequest(websocketProxyUrl + `?token=${hostname}`, {
+    url,
+    method,
+    headers,
+    body,
+  });
+
+  const transcript = await prover.transcript();
+
+  let secretResps: string[] = [];
+
+  if (getSecretResponse) {
+    browser.runtime.sendMessage({
+      type: BackgroundActiontype.get_secrets_from_transcript,
+      data: {
+        pluginHash,
+        pluginHex,
+        method: getSecretResponse,
+        transcript,
+        p2p: true,
+      },
+    });
+
+    const msg: any = await waitForEvent(
+      OffscreenActionTypes.get_secrets_from_transcript_success,
+    );
+
+    secretResps = msg.data.secretResps;
+  }
+
+  const commit = {
+    sent: subtractRanges(
+      transcript.ranges.sent.all,
+      mapSecretsToRange(secretHeaders, transcript.sent),
+    ),
+    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;
+      }[],
+    ),
+  };
+
+  const endRequest = waitForEvent(OffscreenActionTypes.end_p2p_proof_request);
+  await prover.reveal(commit);
+  await endRequest;
+};
+
+async function createProof(options: {
+  url: string;
+  notaryUrl: string;
+  websocketProxyUrl: string;
+  method?: Method;
+  headers?: {
+    [name: string]: string;
+  };
+  body?: any;
+  maxSentData?: number;
+  maxRecvData?: number;
+  id: string;
+  secretHeaders: string[];
+  secretResps: string[];
+}): Promise<PresentationJSONa7> {
+  const {
+    url,
+    method = 'GET',
+    headers = {},
+    body,
+    maxSentData,
+    maxRecvData,
+    notaryUrl,
+    websocketProxyUrl,
+    id,
+    secretHeaders = [],
+    secretResps = [],
+  } = options;
+
+  const hostname = urlify(url)?.hostname || '';
+  const notary = NotaryServer.from(notaryUrl);
+  const prover: TProver = await new Prover({
+    id,
+    serverDns: hostname,
+    maxSentData,
+    maxRecvData,
+  });
+
+  await prover.setup(await notary.sessionUrl(maxSentData, maxRecvData));
+
+  await prover.sendRequest(websocketProxyUrl + `?token=${hostname}`, {
+    url,
+    method,
+    headers,
+    body,
+  });
+
+  const transcript = await prover.transcript();
+
+  const commit = {
+    sent: subtractRanges(
+      transcript.ranges.sent.all,
+      mapSecretsToRange(secretHeaders, transcript.sent),
+    ),
+    recv: subtractRanges(
+      transcript.ranges.recv.all,
+      mapSecretsToRange(secretResps, transcript.recv),
+    ),
+  };
+
+  const notarizationOutputs = await prover.notarize(commit);
+
+  const presentation = (await new Presentation({
+    attestationHex: notarizationOutputs.attestation,
+    secretsHex: notarizationOutputs.secrets,
+    notaryUrl: notarizationOutputs.notaryUrl,
+    websocketProxyUrl: notarizationOutputs.websocketProxyUrl,
+    reveal: commit,
+  })) as TPresentation;
+
+  return presentation.json();
+}
+
+async function createProver(options: {
+  url: string;
+  notaryUrl: string;
+  websocketProxyUrl: string;
+  method?: Method;
+  headers?: {
+    [name: string]: string;
+  };
+  body?: any;
+  maxSentData?: number;
+  maxRecvData?: number;
+  id: string;
+}): Promise<TProver> {
+  const {
+    url,
+    method = 'GET',
+    headers = {},
+    body,
+    maxSentData,
+    maxRecvData,
+    notaryUrl,
+    websocketProxyUrl,
+    id,
+  } = options;
+
+  const hostname = urlify(url)?.hostname || '';
+  const notary = NotaryServer.from(notaryUrl);
+  const prover: TProver = await new Prover({
+    id,
+    serverDns: hostname,
+    maxSentData,
+    maxRecvData,
+  });
+
+  await prover.setup(await notary.sessionUrl(maxSentData, maxRecvData));
+
+  await prover.sendRequest(websocketProxyUrl + `?token=${hostname}`, {
+    url,
+    method,
+    headers,
+    body,
+  });
+
+  return prover;
+}
+
+async function verifyProof(
+  proof: PresentationJSON,
+): Promise<{ sent: string; recv: string }> {
+  let result: { sent: string; recv: 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,
+      });
+      result = {
+        sent: transcript.sent(),
+        recv: transcript.recv(),
+      };
+      break;
+    }
+  }
+
+  return result;
+}

src/entries/Offscreen/types.ts

@@ -1,4 +1,15 @@
 export enum OffscreenActionTypes {
   notarization_request = 'offscreen/notarization_request',
   notarization_response = 'offscreen/notarization_response',
+  create_prover_request = 'offscreen/create_prover_request',
+  create_prover_response = 'offscreen/create_prover_response',
+  create_presentation_request = 'offscreen/create_presentation_request',
+  create_presentation_response = 'offscreen/create_presentation_response',
+  get_secrets_from_transcript_success = 'offscreen/get_secrets_from_transcript_success',
+  start_p2p_verifier = 'offscreen/start_p2p_verifier',
+  start_p2p_prover = 'offscreen/start_p2p_prover',
+  prover_started = 'offscreen/prover_started',
+  prover_setup = 'offscreen/prover_setup',
+  start_p2p_proof_request = 'offscreen/start_p2p_proof_request',
+  end_p2p_proof_request = 'offscreen/end_p2p_proof_request',
 }

src/entries/Offscreen/utils.ts

@@ -0,0 +1,39 @@
+export function subtractRanges(
+  ranges: { start: number; end: number },
+  negatives: { start: number; end: number }[],
+): { start: number; end: number }[] {
+  const returnVal: { start: number; end: number }[] = [ranges];
+
+  negatives
+    .sort((a, b) => (a.start < b.start ? -1 : 1))
+    .forEach(({ start, end }) => {
+      const last = returnVal.pop()!;
+
+      if (start < last.start || end > last.end) {
+        console.error('invalid ranges');
+        return;
+      }
+
+      if (start === last.start && end === last.end) {
+        return;
+      }
+
+      if (start === last.start && end < last.end) {
+        returnVal.push({ start: end, end: last.end });
+        return;
+      }
+
+      if (start > last.start && end < last.end) {
+        returnVal.push({ start: last.start, end: start });
+        returnVal.push({ start: end, end: last.end });
+        return;
+      }
+
+      if (start > last.start && end === last.end) {
+        returnVal.push({ start: last.start, end: start });
+        return;
+      }
+    });
+
+  return returnVal;
+}

src/entries/Offscreen/worker.ts

@@ -1,8 +1,9 @@
 import * as Comlink from 'comlink';
-import init, { Prover, Presentation } from 'tlsn-js';
+import init, { Prover, Presentation, Verifier } from 'tlsn-js';
 
 Comlink.expose({
   init,
   Prover,
   Presentation,
+  Verifier,
 });

src/entries/Popup/Popup.tsx

@@ -35,11 +35,17 @@ 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';
 
 const Popup = () => {
   const dispatch = useDispatch();
   const navigate = useNavigate();
 
+  useEffect(() => {
+    fetchP2PState();
+  }, []);
+
   useEffect(() => {
     (async () => {
       const [tab] = await browser.tabs.query({
@@ -117,6 +123,7 @@ const Popup = () => {
         <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 />}

src/entries/SidePanel/SidePanel.tsx

@@ -1,7 +1,6 @@
 import React, { ReactElement, useCallback, useEffect, useState } from 'react';
 import './sidePanel.scss';
 import browser from 'webextension-polyfill';
-import { fetchPluginConfigByHash, runPlugin } from '../../utils/rpc';
 import {
   getPluginConfig,
   hexToArrayBuffer,
@@ -9,7 +8,6 @@ import {
   PluginConfig,
   StepConfig,
 } from '../../utils/misc';
-import { PluginList } from '../../components/PluginList';
 import DefaultPluginIcon from '../../assets/img/default-plugin-icon.png';
 import logo from '../../assets/img/icon-128.png';
 import classNames from 'classnames';
@@ -17,28 +15,58 @@ import Icon from '../../components/Icon';
 import { useRequestHistory } from '../../reducers/history';
 import { BackgroundActiontype } from '../Background/rpc';
 import { getPluginByHash, getPluginConfigByHash } from '../Background/db';
-import type { Plugin } from '@extism/extism';
-import { OffscreenActionTypes } from '../Offscreen/types';
 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 [hex, setHex] = useState('');
+  const [p2p, setP2P] = useState(false);
+  const [started, setStarted] = useState(false);
+  const clientId = useClientId();
 
   useEffect(() => {
-    (async function () {
-      const result = await browser.storage.local.get('plugin_hash');
-      const { plugin_hash } = result;
-      const config = await getPluginConfigByHash(plugin_hash);
-      setHash(plugin_hash);
-      setConfig(config);
-      // await browser.storage.local.set({ plugin_hash: '' });
-    })();
+    fetchP2PState();
+    browser.runtime.sendMessage({
+      type: SidePanelActionTypes.panel_opened,
+    });
+  }, []);
+
+  useEffect(() => {
+    browser.runtime.onMessage.addListener(async (request) => {
+      const { type, data } = request;
+
+      switch (type) {
+        case SidePanelActionTypes.execute_plugin_request: {
+          setConfig(await getPluginConfigByHash(data.pluginHash));
+          setHash(data.pluginHash);
+          setStarted(true);
+          break;
+        }
+        case SidePanelActionTypes.run_p2p_plugin_request: {
+          const { pluginHash, plugin } = data;
+          const config =
+            (await getPluginConfigByHash(pluginHash)) ||
+            (await getPluginConfig(hexToArrayBuffer(plugin)));
+
+          setHash(pluginHash);
+          setHex(plugin);
+          setP2P(true);
+          setConfig(config);
+          break;
+        }
+        case SidePanelActionTypes.start_p2p_plugin: {
+          setStarted(true);
+          break;
+        }
+      }
+    });
   }, []);
 
   return (
     <div className="flex flex-col bg-slate-100 w-screen h-screen">
-      <div className="relative flex flex-nowrap flex-shrink-0 flex-row items-center relative gap-2 h-9 p-2 cursor-default justify-center bg-slate-300 w-full">
+      <div className="relative flex flex-nowrap flex-shrink-0 flex-row items-center gap-2 h-9 p-2 cursor-default justify-center bg-slate-300 w-full">
         <img className="h-5" src={logo} alt="logo" />
         <button
           className="button absolute right-2"
@@ -47,8 +75,16 @@ export default function SidePanel(): ReactElement {
           Close
         </button>
       </div>
-      {!config && <PluginList />}
-      {config && <PluginBody hash={hash} config={config} />}
+      {/*{!config && <PluginList />}*/}
+      {started && config && (
+        <PluginBody
+          hash={hash}
+          hex={hex}
+          config={config}
+          p2p={p2p}
+          clientId={clientId}
+        />
+      )}
     </div>
   );
 }
@@ -56,9 +92,12 @@ export default function SidePanel(): ReactElement {
 function PluginBody(props: {
   config: PluginConfig;
   hash: string;
+  hex?: string;
+  clientId?: string;
+  p2p?: boolean;
 }): ReactElement {
-  const { hash } = props;
-  const { title, description, icon, steps } = props.config;
+  const { hash, hex, config, p2p, clientId } = props;
+  const { title, description, icon, steps } = config;
   const [responses, setResponses] = useState<any[]>([]);
   const [notarizationId, setNotarizationId] = useState('');
   const notaryRequest = useRequestHistory(notarizationId);
@@ -109,11 +148,16 @@ function PluginBody(props: {
       <div className="flex flex-col items-start gap-8 mt-8">
         {steps?.map((step, i) => (
           <StepContent
+            key={i}
             hash={hash}
+            config={config}
+            hex={hex}
             index={i}
             setResponse={setResponse}
             lastResponse={i > 0 ? responses[i - 1] : undefined}
             responses={responses}
+            p2p={p2p}
+            clientId={clientId}
             {...step}
           />
         ))}
@@ -125,10 +169,14 @@ function PluginBody(props: {
 function StepContent(
   props: StepConfig & {
     hash: string;
+    hex?: string;
+    clientId?: string;
     index: number;
     setResponse: (resp: any, i: number) => void;
     responses: any[];
     lastResponse?: any;
+    config: PluginConfig;
+    p2p?: boolean;
   },
 ): ReactElement {
   const {
@@ -141,6 +189,10 @@ function StepContent(
     lastResponse,
     prover,
     hash,
+    hex: _hex,
+    config,
+    p2p = false,
+    clientId = '',
   } = props;
   const [completed, setCompleted] = useState(false);
   const [pending, setPending] = useState(false);
@@ -149,11 +201,10 @@ function StepContent(
   const notaryRequest = useRequestHistory(notarizationId);
 
   const getPlugin = useCallback(async () => {
-    const hex = await getPluginByHash(hash);
-    const config = await getPluginConfigByHash(hash);
+    const hex = (await getPluginByHash(hash)) || _hex;
     const arrayBuffer = hexToArrayBuffer(hex!);
-    return makePlugin(arrayBuffer, config!);
-  }, [hash]);
+    return makePlugin(arrayBuffer, config, { p2p, clientId });
+  }, [hash, _hex, config, p2p, clientId]);
 
   const processStep = useCallback(async () => {
     const plugin = await getPlugin();
@@ -209,13 +260,38 @@ function StepContent(
     });
   }, [notaryRequest, notarizationId]);
 
+  const viewP2P = useCallback(async () => {
+    await browser.runtime.sendMessage({
+      type: BackgroundActiontype.open_popup,
+      data: {
+        position: {
+          left: window.screen.width / 2 - 240,
+          top: window.screen.height / 2 - 300,
+        },
+        route: `/p2p`,
+      },
+    });
+  }, []);
+
   useEffect(() => {
     processStep();
   }, [processStep]);
 
   let btnContent = null;
 
-  if (completed) {
+  console.log('prover', prover, p2p);
+  if (prover && p2p) {
+    btnContent = (
+      <button
+        className={classNames(
+          'button button--primary mt-2 w-fit flex flex-row flex-nowrap items-center gap-2',
+        )}
+        onClick={viewP2P}
+      >
+        <span className="text-sm">View in P2P</span>
+      </button>
+    );
+  } else if (completed) {
     btnContent = (
       <button
         className={classNames(

src/entries/SidePanel/types.ts

@@ -1,4 +1,8 @@
 export enum SidePanelActionTypes {
+  panel_opened = 'sidePanel/panel_opened',
   execute_plugin_request = 'sidePanel/execute_plugin_request',
   execute_plugin_response = 'sidePanel/execute_plugin_response',
+  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',
 }

src/entries/utils.ts

@@ -0,0 +1,62 @@
+import browser from 'webextension-polyfill';
+import { BackgroundActiontype } from './Background/rpc';
+import { SidePanelActionTypes } from './SidePanel/types';
+import { deferredPromise } from '../utils/promise';
+import { devlog } from '../utils/misc';
+
+export const pushToRedux = async (action: {
+  type: string;
+  payload?: any;
+  error?: boolean;
+  meta?: any;
+}) => {
+  return browser.runtime.sendMessage({
+    type: BackgroundActiontype.push_action,
+    data: {
+      tabId: 'background',
+    },
+    action,
+  });
+};
+
+export const openSidePanel = async () => {
+  const { promise, resolve, reject } = deferredPromise();
+
+  try {
+    const [tab] = await browser.tabs.query({
+      active: true,
+      currentWindow: true,
+    });
+
+    const listener = async (request: any) => {
+      if (request.type === SidePanelActionTypes.panel_opened) {
+        browser.runtime.onMessage.removeListener(listener);
+        resolve();
+      }
+    };
+
+    browser.runtime.onMessage.addListener(listener);
+    // @ts-ignore
+    if (chrome.sidePanel) await chrome.sidePanel.open({ tabId: tab.id });
+  } catch (e) {
+    reject(e);
+  }
+
+  return promise;
+};
+
+export const waitForEvent = async (event: string) => {
+  const { promise, resolve } = deferredPromise();
+
+  const listener = async (request: any) => {
+    if (request.type === event) {
+      devlog('received event:', event);
+      browser.runtime.onMessage.removeListener(listener);
+      resolve(request);
+    }
+  };
+
+  browser.runtime.onMessage.addListener(listener);
+
+  return promise;
+};

src/pages/GetPluginsApproval/index.tsx

@@ -58,7 +58,7 @@ export function GetPluginsApproval(): ReactElement {
       });
       setResult(res);
     })();
-  }, [url, filterMetadata]);
+  }, [url, JSON.stringify(filterMetadata)]);
 
   return (
     <BaseApproval

src/pages/Home/index.tsx

@@ -20,10 +20,9 @@ import {
   usePluginConfig,
   usePluginHashes,
 } from '../../reducers/plugins';
-import { PluginConfig } from '../../utils/misc';
-import { getPluginConfigByHash } from '../../entries/Background/db';
 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';
@@ -112,25 +111,26 @@ function ActionPanel({
 }) {
   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);
 
-  useEffect(() => {
+  const onCheckSize = useCallback(() => {
     const element = container.current;
 
     if (!element) return;
 
     setActionPanelElement(element);
 
-    const onCheckSize = () => {
-      if (element.scrollWidth > element.clientWidth) {
-        setOverflow(true);
-      } else {
-        setOverflow(false);
-      }
-    };
+    if (element.scrollWidth > element.clientWidth) {
+      setOverflow(true);
+    } else {
+      setOverflow(false);
+    }
+  }, [container]);
 
+  useEffect(() => {
     onCheckSize();
 
     window.addEventListener('resize', onCheckSize);
@@ -138,7 +138,7 @@ function ActionPanel({
     return () => {
       window.removeEventListener('resize', onCheckSize);
     };
-  }, [container, pluginHashes]);
+  }, [onCheckSize, pluginHashes]);
 
   useEffect(() => {
     const element = container.current;
@@ -175,12 +175,23 @@ function ActionPanel({
       >
         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} />
+        <PluginIcon hash={hash} onCheckSize={onCheckSize} />
       ))}
       <button
         className={
-          'flex flex-row 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'
+          '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"
       >
@@ -203,7 +214,13 @@ function ActionPanel({
   );
 }
 
-function PluginIcon({ hash }: { hash: string }) {
+function PluginIcon({
+  hash,
+  onCheckSize,
+}: {
+  hash: string;
+  onCheckSize: () => void;
+}) {
   const config = usePluginConfig(hash);
   const onPluginClick = useOnPluginClick(hash);
 
@@ -212,11 +229,16 @@ function PluginIcon({ hash }: { hash: string }) {
     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',
+        'text-white px-2 py-1 gap-1 opacity-90 hover:opacity-100 w-18',
       )}
       onClick={onClick}
     >
@@ -261,13 +283,15 @@ function NavButton(props: {
   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',
+        'text-white px-2 py-1 gap-1 opacity-90 hover:opacity-100 w-18',
         props.className,
       )}
       onClick={props.onClick}
@@ -275,7 +299,10 @@ function NavButton(props: {
       title={props.title}
     >
       <Icon
-        className="w-8 h-8 rounded-full bg-primary flex flex-row items-center justify-center flex-grow-0 flex-shrink-0"
+        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}
       />

src/pages/Options/index.tsx

@@ -17,6 +17,8 @@ import {
   getProxyApi,
   getLoggingFilter,
   LOGGING_FILTER_KEY,
+  getRendezvousApi,
+  RENDEZVOUS_API_LS_KEY,
 } from '../../utils/storage';
 import {
   EXPLORER_API,
@@ -24,6 +26,7 @@ import {
   NOTARY_PROXY,
   MAX_RECV,
   MAX_SENT,
+  RENDEZVOUS_API,
 } from '../../utils/constants';
 import Modal, { ModalContent } from '../../components/Modal/Modal';
 import browser from 'webextension-polyfill';
@@ -36,6 +39,7 @@ export default function Options(): ReactElement {
   const [maxSent, setMaxSent] = useState(MAX_SENT);
   const [maxReceived, setMaxReceived] = useState(MAX_RECV);
   const [loggingLevel, setLoggingLevel] = useState<LoggingLevel>('Info');
+  const [rendezvous, setRendezvous] = useState(RENDEZVOUS_API);
 
   const [dirty, setDirty] = useState(false);
   const [shouldReload, setShouldReload] = useState(false);
@@ -44,11 +48,17 @@ export default function Options(): ReactElement {
 
   useEffect(() => {
     (async () => {
-      setNotary((await getNotaryApi()) || NOTARY_API);
-      setProxy((await getProxyApi()) || NOTARY_PROXY);
+      setNotary(await getNotaryApi());
+      setProxy(await getProxyApi());
+    })();
+  }, []);
+
+  useEffect(() => {
+    (async () => {
       setMaxReceived((await getMaxRecv()) || MAX_RECV);
       setMaxSent((await getMaxSent()) || MAX_SENT);
       setLoggingLevel((await getLoggingFilter()) || 'Info');
+      setRendezvous((await getRendezvousApi()) || RENDEZVOUS_API);
     })();
   }, [advanced]);
 
@@ -63,9 +73,18 @@ export default function Options(): ReactElement {
       await set(MAX_SENT_LS_KEY, maxSent.toString());
       await set(MAX_RECEIVED_LS_KEY, maxReceived.toString());
       await set(LOGGING_FILTER_KEY, loggingLevel);
+      await set(RENDEZVOUS_API_LS_KEY, rendezvous);
       setDirty(false);
     },
-    [notary, proxy, maxSent, maxReceived, loggingLevel, shouldReload],
+    [
+      notary,
+      proxy,
+      maxSent,
+      maxReceived,
+      loggingLevel,
+      rendezvous,
+      shouldReload,
+    ],
   );
 
   const onSaveAndReload = useCallback(
@@ -85,7 +104,7 @@ export default function Options(): ReactElement {
   }, []);
 
   return (
-    <div className="flex flex-col flex-nowrap flex-grow">
+    <div className="flex flex-col flex-nowrap flex-grow overflow-y-auto">
       {showReloadModal && (
         <Modal
           className="flex flex-col items-center text-base cursor-default justify-center !w-auto mx-4 my-[50%] p-4 gap-4"
@@ -145,6 +164,8 @@ export default function Options(): ReactElement {
           loggingLevel={loggingLevel}
           setLoggingLevel={setLoggingLevel}
           setShouldReload={setShouldReload}
+          rendezvous={rendezvous}
+          setRendezvous={setRendezvous}
         />
       )}
       <div className="flex flex-row flex-nowrap justify-end gap-2 p-2">
@@ -248,11 +269,13 @@ function AdvancedOptions(props: {
   maxSent: number;
   maxReceived: number;
   loggingLevel: LoggingLevel;
+  rendezvous: string;
   setShouldReload: (reload: boolean) => void;
   setMaxSent: (value: number) => void;
   setMaxReceived: (value: number) => void;
   setDirty: (value: boolean) => void;
   setLoggingLevel: (level: LoggingLevel) => void;
+  setRendezvous: (api: string) => void;
 }) {
   const {
     maxSent,
@@ -263,6 +286,8 @@ function AdvancedOptions(props: {
     setLoggingLevel,
     loggingLevel,
     setShouldReload,
+    rendezvous,
+    setRendezvous,
   } = props;
 
   return (
@@ -287,6 +312,15 @@ function AdvancedOptions(props: {
           setDirty(true);
         }}
       />
+      <InputField
+        label="Rendezvous API (for P2P)"
+        value={rendezvous}
+        type="text"
+        onChange={(e) => {
+          setRendezvous(e.target.value);
+          setDirty(true);
+        }}
+      />
       <div className="flex flex-col flex-nowrap py-1 px-2 gap-2">
         <div className="font-semibold">Logging Level</div>
         <select

src/pages/PeerToPeer/index.tsx

@@ -0,0 +1,498 @@
+import React, {
+  ChangeEvent,
+  ReactElement,
+  useCallback,
+  useEffect,
+  useState,
+} from 'react';
+import Icon from '../../components/Icon';
+import classNames from 'classnames';
+import {
+  connectRendezvous,
+  disconnectRendezvous,
+  fetchP2PState,
+  sendPairRequest,
+  useClientId,
+  useIncomingPairingRequests,
+  useOutgoingPairingRequests,
+  cancelPairRequest,
+  useP2PError,
+  setP2PError,
+  acceptPairRequest,
+  rejectPairRequest,
+  usePairId,
+  useIncomingProofRequests,
+  requestProofByHash,
+  useOutgoingProofRequests,
+  acceptProofRequest,
+  rejectProofRequest,
+  cancelProofRequest,
+  useP2PProving,
+  useP2PVerifying,
+  useP2PPresentation,
+} from '../../reducers/p2p';
+import { useDispatch } from 'react-redux';
+import Modal, { ModalHeader } from '../../components/Modal/Modal';
+import { Plugin, PluginList } from '../../components/PluginList';
+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 {
+  const clientId = useClientId();
+
+  useEffect(() => {
+    fetchP2PState();
+  }, []);
+
+  const toggleConnection = useCallback(async () => {
+    if (!clientId) {
+      connectRendezvous();
+    } else {
+      disconnectRendezvous();
+    }
+  }, [clientId]);
+
+  return (
+    <div className="flex flex-col h-full cursor-default gap-2 my-2">
+      <div className="flex flex-row border border-slate-300 rounded mx-2">
+        <div className="bg-slate-200 px-2 py-1 flex-grow-0 border-r border-slate-300">
+          Client ID
+        </div>
+        <input
+          className={classNames(
+            'flex-grow outline-0 px-2 py-1 cursor-default font-semibold',
+            {
+              'text-slate-400 bg-slate-100': !clientId,
+              'text-green-500 cursor-pointer': clientId,
+            },
+          )}
+          onClick={(e) => {
+            // @ts-ignore
+            if (e.target.select && clientId) e.target.select();
+          }}
+          value={clientId ? clientId : '--'}
+          readOnly
+        />
+        <button
+          className="flex-grow-0 px-2 py-1 button border-l border-slate-300"
+          onClick={toggleConnection}
+        >
+          {clientId ? 'Stop' : 'Start'}
+        </button>
+      </div>
+      <ClientStatus />
+      <div className="flex flex-row mx-2 flex-grow flex-shrink h-0 p-2">
+        <div className="text-slate-400 text-center w-full font-semibold">
+          No proofs history
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function ClientStatus() {
+  const clientId = useClientId();
+  const error = useP2PError();
+  const pairId = usePairId();
+  const [incomingPairingRequest] = useIncomingPairingRequests();
+  const [outgoingPairingRequest] = useOutgoingPairingRequests();
+
+  let body = null;
+
+  if (!clientId) {
+    body = <ClientNotStarted />;
+  } else if (pairId) {
+    body = <Paired />;
+  } else if (!incomingPairingRequest && !outgoingPairingRequest) {
+    body = <PendingConnection />;
+  } else if (incomingPairingRequest) {
+    body = <IncomingRequest />;
+  } else if (outgoingPairingRequest) {
+    body = <OutgoingRequest />;
+  }
+
+  return (
+    <div
+      className={classNames(
+        'flex flex-col items-center justify-center border border-slate-300',
+        'flex-grow-0 flex-shrink rounded mx-2 bg-slate-100 py-4 gap-4',
+      )}
+    >
+      {body}
+      {error && <span className="text-xs text-red-500">{error}</span>}
+    </div>
+  );
+}
+
+function Paired() {
+  const pairId = usePairId();
+  const clientId = useClientId();
+  const [incomingProofRequest] = useIncomingProofRequests();
+  const [outgoingPluginHash] = useOutgoingProofRequests();
+  const [incomingPluginHash, setIncomingPluginHash] = useState('');
+  const [showingModal, showModal] = useState(false);
+  const isProving = useP2PProving();
+  const isVerifying = useP2PVerifying();
+  const presentation = useP2PPresentation();
+
+  useEffect(() => {
+    (async () => {
+      if (!incomingProofRequest) {
+        setIncomingPluginHash('');
+        return;
+      }
+      const hash = await sha256(incomingProofRequest);
+      setIncomingPluginHash(hash);
+    })();
+  }, [incomingProofRequest]);
+
+  useEffect(() => {
+    showModal(false);
+  }, [outgoingPluginHash]);
+
+  const accept = useCallback(async () => {
+    if (incomingPluginHash) {
+      await openSidePanel();
+
+      browser.runtime.sendMessage({
+        type: SidePanelActionTypes.run_p2p_plugin_request,
+        data: {
+          pluginHash: incomingPluginHash,
+          plugin: incomingProofRequest,
+        },
+      });
+
+      acceptProofRequest(incomingPluginHash);
+
+      window.close();
+    }
+  }, [incomingPluginHash, incomingProofRequest, clientId]);
+
+  const reject = useCallback(() => {
+    if (incomingPluginHash) rejectProofRequest(incomingPluginHash);
+  }, [incomingPluginHash]);
+
+  const cancel = useCallback(() => {
+    if (outgoingPluginHash) cancelProofRequest(outgoingPluginHash);
+  }, [outgoingPluginHash]);
+
+  let body;
+
+  if (incomingPluginHash) {
+    body = (
+      <IncomingProof
+        incomingProofRequest={incomingProofRequest}
+        incomingPluginHash={incomingPluginHash}
+        accept={accept}
+        reject={reject}
+        isProving={isProving}
+      />
+    );
+  } else if (outgoingPluginHash) {
+    body = (
+      <OutgoingProof
+        outgoingPluginHash={outgoingPluginHash}
+        cancel={cancel}
+        isVerifying={isVerifying}
+      />
+    );
+  } else {
+    body = (
+      <button
+        className="button button--primary"
+        onClick={() => showModal(true)}
+      >
+        Request Proof
+      </button>
+    );
+  }
+
+  return (
+    <div className="flex flex-col items-center gap-2 px-4 w-full">
+      {showingModal && <PluginListModal onClose={() => showModal(false)} />}
+      <div>
+        <span>Paired with </span>
+        <span className="font-semibold text-blue-500">{pairId}</span>
+      </div>
+      {body}
+    </div>
+  );
+}
+
+function IncomingProof({
+  incomingPluginHash,
+  incomingProofRequest,
+  reject,
+  accept,
+  isProving,
+}: {
+  incomingPluginHash: string;
+  incomingProofRequest: string;
+  reject: () => void;
+  accept: () => void;
+  isProving: boolean;
+}) {
+  const presentation = useP2PPresentation();
+  const [showingTranscript, showTranscript] = useState(false);
+
+  if (isProving) {
+    return (
+      <>
+        {presentation && showingTranscript && (
+          <Modal
+            className="h-full m-0 rounded-none"
+            onClose={() => showTranscript(false)}
+          >
+            <ProofViewer
+              className="h-full"
+              sent={presentation.sent}
+              recv={presentation.recv}
+            />
+          </Modal>
+        )}
+        <div className="font-semibold text-orange-500">
+          {presentation ? 'Proving Completed' : 'Proving to your peer...'}
+        </div>
+        <Plugin
+          className="w-full bg-white !cursor-default hover:!bg-white active:!bg-white hover:!border-slate-300"
+          hash={incomingPluginHash}
+          hex={incomingProofRequest}
+          onClick={() => null}
+          unremovable
+        />
+        <div className="flex flex-row gap-2">
+          <button
+            className="button button--primary"
+            onClick={() => showTranscript(true)}
+            disabled={!presentation}
+          >
+            View
+          </button>
+        </div>
+      </>
+    );
+  }
+
+  return (
+    <>
+      <div className="font-semibold text-orange-500">
+        Your peer is requesting the following proof:
+      </div>
+      <Plugin
+        className="w-full bg-white !cursor-default hover:!bg-white active:!bg-white hover:!border-slate-300"
+        hash={incomingPluginHash}
+        hex={incomingProofRequest}
+        onClick={() => null}
+        unremovable
+      />
+      <div className="flex flex-row gap-2">
+        <button className="button" onClick={reject}>
+          Decline
+        </button>
+        <button className="button button--primary" onClick={accept}>
+          Accept
+        </button>
+      </div>
+    </>
+  );
+}
+
+function OutgoingProof({
+  outgoingPluginHash,
+  cancel,
+  isVerifying,
+}: {
+  isVerifying: boolean;
+  outgoingPluginHash: string;
+  cancel: () => void;
+}) {
+  const presentation = useP2PPresentation();
+  const [showingTranscript, showTranscript] = useState(false);
+
+  if (isVerifying) {
+    return (
+      <>
+        {presentation && showingTranscript && (
+          <Modal
+            className="h-full m-0 rounded-none"
+            onClose={() => showTranscript(false)}
+          >
+            <ProofViewer
+              className="h-full"
+              sent={presentation.sent}
+              recv={presentation.recv}
+            />
+          </Modal>
+        )}
+        <div className="font-semibold text-orange-500">
+          {presentation
+            ? 'Verification Completed'
+            : 'Verifying with your peer...'}
+        </div>
+        <Plugin
+          className="w-full bg-white !cursor-default hover:!bg-white active:!bg-white hover:!border-slate-300"
+          hash={outgoingPluginHash}
+          onClick={() => null}
+          unremovable
+        />
+        <div className="flex flex-row gap-2">
+          <button
+            className="button button--primary"
+            onClick={() => showTranscript(true)}
+            disabled={!presentation}
+          >
+            View
+          </button>
+        </div>
+      </>
+    );
+  }
+
+  return (
+    <>
+      <div className="font-semibold text-orange-500">
+        Sent request for following proof:
+      </div>
+      <Plugin
+        className="w-full bg-white !cursor-default hover:!bg-white active:!bg-white hover:!border-slate-300"
+        hash={outgoingPluginHash}
+        onClick={() => null}
+        unremovable
+      />
+      <button className="button" onClick={cancel}>
+        Cancel
+      </button>
+    </>
+  );
+}
+
+function PluginListModal({ onClose }: { onClose: () => void }) {
+  const onRequestProof = useCallback(async (hash: string) => {
+    requestProofByHash(hash);
+  }, []);
+  return (
+    <Modal className="mx-4" onClose={onClose}>
+      <ModalHeader onClose={onClose}>Choose a plugin to continue</ModalHeader>
+      <PluginList className="m-2" onClick={onRequestProof} unremovable />
+    </Modal>
+  );
+}
+
+function IncomingRequest() {
+  const [incomingRequest] = useIncomingPairingRequests();
+
+  const accept = useCallback(() => {
+    if (incomingRequest) acceptPairRequest(incomingRequest);
+  }, [incomingRequest]);
+
+  const reject = useCallback(() => {
+    if (incomingRequest) rejectPairRequest(incomingRequest);
+  }, [incomingRequest]);
+
+  return (
+    <div className="flex flex-col items-center gap-2">
+      <div>
+        <span className="font-semibold text-blue-500">{incomingRequest}</span>
+        <span> wants to pair with you.</span>
+      </div>
+      <div className="flex flex-row gap-2">
+        <button className="button" onClick={reject}>
+          Decline
+        </button>
+        <button className="button button--primary" onClick={accept}>
+          Accept
+        </button>
+      </div>
+    </div>
+  );
+}
+
+function OutgoingRequest() {
+  const [outgoingRequest] = useOutgoingPairingRequests();
+
+  const cancel = useCallback(() => {
+    if (outgoingRequest) {
+      cancelPairRequest(outgoingRequest);
+    }
+  }, [outgoingRequest]);
+
+  return (
+    <div className="flex flex-col items-center gap-2">
+      <span className="flex flex-row items-center gap-2 mx-2">
+        <Icon
+          className="animate-spin w-fit text-slate-500"
+          fa="fa-solid fa-spinner"
+          size={1}
+        />
+        <span>
+          <span>Awaiting response from </span>
+          <span className="font-semibold text-blue-500">{outgoingRequest}</span>
+          <span>...</span>
+        </span>
+      </span>
+      <button className="button" onClick={cancel}>
+        Cancel
+      </button>
+    </div>
+  );
+}
+
+function ClientNotStarted() {
+  return (
+    <div className="flex flex-col text-slate-500 font-semibold gap-2">
+      Client has not started
+      <button className="button button--primary" onClick={connectRendezvous}>
+        Start Client
+      </button>
+    </div>
+  );
+}
+
+function PendingConnection() {
+  const dispatch = useDispatch();
+  const [target, setTarget] = useState('');
+
+  const onSend = useCallback(() => {
+    dispatch(setP2PError(''));
+    sendPairRequest(target);
+  }, [target]);
+
+  const onChange = useCallback((e: ChangeEvent<HTMLInputElement>) => {
+    dispatch(setP2PError(''));
+    setTarget(e.target.value);
+  }, []);
+
+  return (
+    <div className="flex flex-col w-full items-center gap-2">
+      <div className="flex flex-row justify-center gap-2">
+        <Icon
+          className="animate-spin w-fit text-slate-500"
+          fa="fa-solid fa-spinner"
+          size={1}
+        />
+        <div className="text-slate-500 font-semibold">
+          Waiting for pairing request...
+        </div>
+      </div>
+      <div className="text-slate-500">or</div>
+      <div className="w-full flex flex-row px-2 items-center">
+        <input
+          className="flex-grow flex-shrink w-0 outline-0 px-2 py-1 cursor-default"
+          placeholder="Enter Peer ID to send pairing request"
+          onChange={onChange}
+          value={target}
+        />
+        <button
+          className="button button--primary w-fit h-full"
+          onClick={onSend}
+        >
+          Send Pairing Request
+        </button>
+      </div>
+    </div>
+  );
+}

src/pages/ProofViewer/index.tsx

@@ -9,8 +9,10 @@ import c from 'classnames';
 import { useRequestHistory } from '../../reducers/history';
 import Icon from '../../components/Icon';
 import { download } from '../../utils/misc';
+import classNames from 'classnames';
 
 export default function ProofViewer(props?: {
+  className?: string;
   recv?: string;
   sent?: string;
 }): ReactElement {
@@ -20,7 +22,12 @@ export default function ProofViewer(props?: {
   const [tab, setTab] = useState('sent');
 
   return (
-    <div className="flex flex-col w-full py-2 gap-2 flex-grow">
+    <div
+      className={classNames(
+        'flex flex-col w-full py-2 gap-2 flex-grow',
+        props?.className,
+      )}
+    >
       <div className="flex flex-col px-2">
         <div className="flex flex-row gap-2 items-center">
           <Icon

src/pages/RunPluginApproval/index.tsx

@@ -11,6 +11,8 @@ import {
   getPluginMetadataByHash,
 } from '../../entries/Background/db';
 import { runPlugin } from '../../utils/rpc';
+import { SidePanelActionTypes } from '../../entries/SidePanel/types';
+import { deferredPromise } from '../../utils/promise';
 
 export function RunPluginApproval(): ReactElement {
   const [params] = useSearchParams();
@@ -38,9 +40,29 @@ export function RunPluginApproval(): ReactElement {
 
       await browser.storage.local.set({ plugin_hash: hash });
 
+      const { promise, resolve } = deferredPromise();
+
+      const listener = async (request: any) => {
+        if (request.type === SidePanelActionTypes.panel_opened) {
+          browser.runtime.onMessage.removeListener(listener);
+          resolve();
+        }
+      };
+
+      browser.runtime.onMessage.addListener(listener);
+
       // @ts-ignore
       if (chrome.sidePanel) await chrome.sidePanel.open({ tabId: tab.id });
 
+      await promise;
+
+      browser.runtime.sendMessage({
+        type: SidePanelActionTypes.execute_plugin_request,
+        data: {
+          pluginHash: hash,
+        },
+      });
+
       browser.runtime.sendMessage({
         type: BackgroundActiontype.run_plugin_response,
         data: true,

src/reducers/index.tsx

@@ -2,11 +2,13 @@ import { combineReducers } from 'redux';
 import requests from './requests';
 import history from './history';
 import plugins from './plugins';
+import p2p from './p2p';
 
 const rootReducer = combineReducers({
   requests,
   history,
   plugins,
+  p2p,
 });
 
 export type AppRootState = ReturnType<typeof rootReducer>;

src/reducers/p2p.ts

@@ -0,0 +1,375 @@
+import { useSelector } from 'react-redux';
+import { AppRootState } from './index';
+import deepEqual from 'fast-deep-equal';
+import browser from 'webextension-polyfill';
+import { BackgroundActiontype } from '../entries/Background/rpc';
+
+enum ActionType {
+  '/p2p/setConnected' = '/p2p/setConnected',
+  '/p2p/setClientId' = '/p2p/setClientId',
+  '/p2p/setPairing' = '/p2p/setPairing',
+  '/p2p/setError' = '/p2p/setError',
+  '/p2p/appendIncomingPairingRequest' = '/p2p/appendIncomingPairingRequest',
+  '/p2p/appendOutgoingPairingRequest' = '/p2p/appendOutgoingPairingRequest',
+  '/p2p/setIncomingPairingRequest' = '/p2p/setIncomingPairingRequest',
+  '/p2p/setOutgoingPairingRequest' = '/p2p/setOutgoingPairingRequest',
+  '/p2p/appendIncomingProofRequest' = '/p2p/appendIncomingProofRequest',
+  '/p2p/appendOutgoingProofRequest' = '/p2p/appendOutgoingProofRequest',
+  '/p2p/setIncomingProofRequest' = '/p2p/setIncomingProofRequest',
+  '/p2p/setOutgoingProofRequest' = '/p2p/setOutgoingProofRequest',
+  '/p2p/setIsProving' = '/p2p/setIsProving',
+  '/p2p/setIsVerifying' = '/p2p/setIsVerifying',
+  '/p2p/setPresentation' = '/p2p/setPresentation',
+}
+
+type Action<payload> = {
+  type: ActionType;
+  payload?: payload;
+  error?: boolean;
+  meta?: any;
+};
+
+type State = {
+  clientId: string;
+  pairing: string;
+  connected: boolean;
+  error: string;
+  incomingPairingRequests: string[];
+  outgoingPairingRequests: string[];
+  incomingProofRequests: string[];
+  outgoingProofRequests: string[];
+  isProving: boolean;
+  isVerifying: boolean;
+  presentation: null | {
+    sent: string;
+    recv: string;
+  };
+};
+
+export type RequestProofMessage = {
+  to: string;
+  from: string;
+  id: number;
+  text?: undefined;
+};
+
+const initialState: State = {
+  clientId: '',
+  pairing: '',
+  error: '',
+  connected: false,
+  incomingPairingRequests: [],
+  outgoingPairingRequests: [],
+  incomingProofRequests: [],
+  outgoingProofRequests: [],
+  isProving: false,
+  isVerifying: false,
+  presentation: null,
+};
+
+export const fetchP2PState = async () => {
+  return browser.runtime.sendMessage({
+    type: BackgroundActiontype.get_p2p_state,
+  });
+};
+
+export const connectRendezvous = () => {
+  return browser.runtime.sendMessage({
+    type: BackgroundActiontype.connect_rendezvous,
+  });
+};
+
+export const disconnectRendezvous = () => {
+  return browser.runtime.sendMessage({
+    type: BackgroundActiontype.disconnect_rendezvous,
+  });
+};
+
+export const setConnected = (connected = false) => ({
+  type: ActionType['/p2p/setConnected'],
+  payload: connected,
+});
+
+export const setClientId = (clientId: string) => ({
+  type: ActionType['/p2p/setClientId'],
+  payload: clientId,
+});
+
+export const setPairing = (clientId: string) => ({
+  type: ActionType['/p2p/setPairing'],
+  payload: clientId,
+});
+
+export const appendIncomingPairingRequests = (peerId: string) => ({
+  type: ActionType['/p2p/appendIncomingPairingRequest'],
+  payload: peerId,
+});
+
+export const appendIncomingProofRequests = (peerId: string) => ({
+  type: ActionType['/p2p/appendIncomingProofRequest'],
+  payload: peerId,
+});
+
+export const appendOutgoingPairingRequests = (peerId: string) => ({
+  type: ActionType['/p2p/appendOutgoingPairingRequest'],
+  payload: peerId,
+});
+
+export const appendOutgoingProofRequest = (peerId: string) => ({
+  type: ActionType['/p2p/appendOutgoingProofRequest'],
+  payload: peerId,
+});
+
+export const setIncomingPairingRequest = (peerIds: string[]) => ({
+  type: ActionType['/p2p/setIncomingPairingRequest'],
+  payload: peerIds,
+});
+
+export const setOutgoingPairingRequest = (peerIds: string[]) => ({
+  type: ActionType['/p2p/setOutgoingPairingRequest'],
+  payload: peerIds,
+});
+
+export const setIncomingProofRequest = (peerIds: string[]) => ({
+  type: ActionType['/p2p/setIncomingProofRequest'],
+  payload: peerIds,
+});
+
+export const setOutgoingProofRequest = (peerIds: string[]) => ({
+  type: ActionType['/p2p/setOutgoingProofRequest'],
+  payload: peerIds,
+});
+
+export const setP2PError = (error: string) => ({
+  type: ActionType['/p2p/setError'],
+  payload: error,
+});
+
+export const setIsProving = (proving: boolean) => ({
+  type: ActionType['/p2p/setIsProving'],
+  payload: proving,
+});
+
+export const setIsVerifying = (verifying: boolean) => ({
+  type: ActionType['/p2p/setIsVerifying'],
+  payload: verifying,
+});
+
+export const setP2PPresentation = (
+  presentation: null | { sent: string; recv: string },
+) => ({
+  type: ActionType['/p2p/setPresentation'],
+  payload: presentation,
+});
+
+export const requestProofByHash = (pluginHash: string) => {
+  return browser.runtime.sendMessage({
+    type: BackgroundActiontype.request_p2p_proof_by_hash,
+    data: pluginHash,
+  });
+};
+
+export const sendPairRequest = async (targetId: string) => {
+  return browser.runtime.sendMessage({
+    type: BackgroundActiontype.send_pair_request,
+    data: targetId,
+  });
+};
+
+export const cancelPairRequest = async (targetId: string) => {
+  return browser.runtime.sendMessage({
+    type: BackgroundActiontype.cancel_pair_request,
+    data: targetId,
+  });
+};
+
+export const acceptPairRequest = async (targetId: string) => {
+  return browser.runtime.sendMessage({
+    type: BackgroundActiontype.accept_pair_request,
+    data: targetId,
+  });
+};
+
+export const rejectPairRequest = async (targetId: string) => {
+  return browser.runtime.sendMessage({
+    type: BackgroundActiontype.reject_pair_request,
+    data: targetId,
+  });
+};
+
+export const cancelProofRequest = async (plughinHash: string) => {
+  return browser.runtime.sendMessage({
+    type: BackgroundActiontype.cancel_proof_request,
+    data: plughinHash,
+  });
+};
+
+export const acceptProofRequest = async (plughinHash: string) => {
+  return browser.runtime.sendMessage({
+    type: BackgroundActiontype.accept_proof_request,
+    data: plughinHash,
+  });
+};
+
+export const rejectProofRequest = async (plughinHash: string) => {
+  return browser.runtime.sendMessage({
+    type: BackgroundActiontype.reject_proof_request,
+    data: plughinHash,
+  });
+};
+
+export default function p2p(state = initialState, action: Action<any>): State {
+  switch (action.type) {
+    case ActionType['/p2p/setConnected']:
+      return {
+        ...state,
+        connected: action.payload,
+      };
+    case ActionType['/p2p/setClientId']:
+      return {
+        ...state,
+        clientId: action.payload,
+      };
+    case ActionType['/p2p/setPairing']:
+      return {
+        ...state,
+        pairing: action.payload,
+      };
+    case ActionType['/p2p/appendIncomingPairingRequest']:
+      return {
+        ...state,
+        incomingPairingRequests: [
+          ...new Set(state.incomingPairingRequests.concat(action.payload)),
+        ],
+      };
+    case ActionType['/p2p/appendOutgoingPairingRequest']:
+      return {
+        ...state,
+        outgoingPairingRequests: [
+          ...new Set(state.outgoingPairingRequests.concat(action.payload)),
+        ],
+      };
+    case ActionType['/p2p/setIncomingPairingRequest']:
+      return {
+        ...state,
+        incomingPairingRequests: action.payload,
+      };
+    case ActionType['/p2p/setOutgoingPairingRequest']:
+      return {
+        ...state,
+        outgoingPairingRequests: action.payload,
+      };
+    case ActionType['/p2p/appendIncomingProofRequest']:
+      return {
+        ...state,
+        incomingProofRequests: [
+          ...new Set(state.incomingProofRequests.concat(action.payload)),
+        ],
+      };
+    case ActionType['/p2p/appendOutgoingProofRequest']:
+      return {
+        ...state,
+        outgoingProofRequests: [
+          ...new Set(state.outgoingProofRequests.concat(action.payload)),
+        ],
+      };
+    case ActionType['/p2p/setIncomingProofRequest']:
+      return {
+        ...state,
+        incomingProofRequests: action.payload,
+      };
+    case ActionType['/p2p/setOutgoingProofRequest']:
+      return {
+        ...state,
+        outgoingProofRequests: action.payload,
+      };
+    case ActionType['/p2p/setError']:
+      return {
+        ...state,
+        error: action.payload,
+      };
+    case ActionType['/p2p/setIsProving']:
+      return {
+        ...state,
+        isProving: action.payload,
+      };
+    case ActionType['/p2p/setIsVerifying']:
+      return {
+        ...state,
+        isVerifying: action.payload,
+      };
+    case ActionType['/p2p/setPresentation']:
+      return {
+        ...state,
+        presentation: action.payload,
+      };
+    default:
+      return state;
+  }
+}
+
+export function useClientId() {
+  return useSelector((state: AppRootState) => {
+    return state.p2p.clientId;
+  }, deepEqual);
+}
+
+export function useConnected() {
+  return useSelector((state: AppRootState) => {
+    return state.p2p.connected;
+  }, deepEqual);
+}
+
+export function usePairId(): string {
+  return useSelector((state: AppRootState) => {
+    return state.p2p.pairing;
+  }, deepEqual);
+}
+
+export function useIncomingPairingRequests(): string[] {
+  return useSelector((state: AppRootState) => {
+    return state.p2p.incomingPairingRequests;
+  }, deepEqual);
+}
+
+export function useOutgoingPairingRequests(): string[] {
+  return useSelector((state: AppRootState) => {
+    return state.p2p.outgoingPairingRequests;
+  }, deepEqual);
+}
+
+export function useIncomingProofRequests(): string[] {
+  return useSelector((state: AppRootState) => {
+    return state.p2p.incomingProofRequests;
+  }, deepEqual);
+}
+
+export function useOutgoingProofRequests(): string[] {
+  return useSelector((state: AppRootState) => {
+    return state.p2p.outgoingProofRequests;
+  }, deepEqual);
+}
+
+export function useP2PError(): string {
+  return useSelector((state: AppRootState) => {
+    return state.p2p.error;
+  }, deepEqual);
+}
+
+export function useP2PVerifying(): boolean {
+  return useSelector((state: AppRootState) => {
+    return state.p2p.isVerifying;
+  }, deepEqual);
+}
+
+export function useP2PProving(): boolean {
+  return useSelector((state: AppRootState) => {
+    return state.p2p.isProving;
+  }, deepEqual);
+}
+
+export function useP2PPresentation(): null | { sent: string; recv: string } {
+  return useSelector((state: AppRootState) => {
+    return state.p2p.presentation;
+  }, deepEqual);
+}

src/reducers/plugins.tsx

@@ -6,6 +6,8 @@ import { getPluginConfigByHash } 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',
@@ -70,17 +72,18 @@ export const usePluginConfig = (hash: string) => {
 
 export const useOnPluginClick = (hash: string) => {
   return useCallback(async () => {
-    await runPlugin(hash, 'start');
-
-    const [tab] = await browser.tabs.query({
-      active: true,
-      currentWindow: true,
-    });
-
     await browser.storage.local.set({ plugin_hash: hash });
 
-    // @ts-ignore
-    if (chrome.sidePanel) await chrome.sidePanel.open({ tabId: tab.id });
+    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,6 @@
 export const EXPLORER_API = 'https://explorer.tlsnotary.org';
 export const NOTARY_API = 'https://notary.pse.dev/v0.1.0-alpha.7';
+export const RENDEZVOUS_API = 'wss://explorer.tlsnotary.org';
 export const NOTARY_PROXY = 'wss://notary.pse.dev/proxy';
 export const MAX_RECV = 16384;
 export const MAX_SENT = 4096;

src/utils/misc.ts

@@ -1,5 +1,6 @@
 import {
   BackgroundActiontype,
+  handleExecP2PPluginProver,
   handleExecPluginProver,
   RequestLog,
 } from '../entries/Background/rpc';
@@ -13,8 +14,12 @@ import browser from 'webextension-polyfill';
 import NodeCache from 'node-cache';
 import { getNotaryApi, getProxyApi } from './storage';
 import { minimatch } from 'minimatch';
-import { getCookiesByHost, getHeadersByHost } from '../entries/Background/db';
-
+import {
+  getCookiesByHost,
+  getHeadersByHost,
+  getLocalStorageByHost,
+  getSessionStorageByHost,
+} from '../entries/Background/db';
 const charwise = require('charwise');
 
 export function urlify(
@@ -148,6 +153,10 @@ const VALID_HOST_FUNCS: { [name: string]: string } = {
 export const makePlugin = async (
   arrayBuffer: ArrayBuffer,
   config?: PluginConfig,
+  meta?: {
+    p2p: boolean;
+    clientId: string;
+  },
 ) => {
   const module = await WebAssembly.compile(arrayBuffer);
   const [tab] = await browser.tabs.query({ active: true, currentWindow: true });
@@ -199,41 +208,44 @@ export const makePlugin = async (
       }
 
       (async () => {
-        const {
-          url,
-          method,
-          headers,
-          getSecretResponse,
-          body: reqBody,
-        } = params;
-        let secretResps;
-        const resp = await fetch(url, {
-          method,
-          headers,
-          body: reqBody,
-        });
-        const body = await extractBodyFromResponse(resp);
+        const { getSecretResponse, body: reqBody } = params;
 
-        if (getSecretResponse) {
-          const out = await plugin.call(getSecretResponse, body);
-          secretResps = JSON.parse(out.string());
+        if (meta?.p2p) {
+          const pluginHex = Buffer.from(arrayBuffer).toString('hex');
+          handleExecP2PPluginProver({
+            type: BackgroundActiontype.execute_p2p_plugin_prover,
+            data: {
+              ...params,
+              pluginHash: await sha256(pluginHex),
+              pluginHex,
+              body: reqBody,
+              now,
+              clientId: meta.clientId,
+            },
+          });
+        } else {
+          handleExecPluginProver({
+            type: BackgroundActiontype.execute_plugin_prover,
+            data: {
+              ...params,
+              body: reqBody,
+              getSecretResponseFn: async (body: string) => {
+                return new Promise((resolve) => {
+                  setTimeout(async () => {
+                    const out = await plugin.call(getSecretResponse, body);
+                    resolve(JSON.parse(out.string()));
+                  }, 0);
+                });
+              },
+              now,
+            },
+          });
         }
-
-        handleExecPluginProver({
-          type: BackgroundActiontype.execute_plugin_prover,
-          data: {
-            ...params,
-            body: reqBody,
-            secretResps,
-            now,
-          },
-        });
       })();
 
       return context.store(`${id}`);
     },
   };
-
   const funcs: {
     [key: string]: (callContext: CallContext, ...args: any[]) => any;
   } = {};
@@ -250,21 +262,61 @@ export const makePlugin = async (
     }
   }
 
+  if (config?.localStorage) {
+    const localStorage: { [hostname: string]: { [key: string]: string } } = {};
+
+    const [tab] = await chrome.tabs.query({
+      active: true,
+      lastFocusedWindow: true,
+    });
+    await chrome.tabs.sendMessage(tab.id as number, {
+      type: BackgroundActiontype.get_local_storage,
+    });
+
+    //@ts-ignore
+    for (const host of config.localStorage) {
+      const cache = await getLocalStorageByHost(host);
+      localStorage[host] = cache;
+    }
+    //@ts-ignore
+    injectedConfig.localStorage = JSON.stringify(localStorage);
+  }
+
+  if (config?.sessionStorage) {
+    const sessionStorage: { [hostname: string]: { [key: string]: string } } =
+      {};
+
+    const [tab] = await chrome.tabs.query({
+      active: true,
+      lastFocusedWindow: true,
+    });
+    await chrome.tabs.sendMessage(tab.id as number, {
+      type: BackgroundActiontype.get_session_storage,
+    });
+    //@ts-ignore
+    for (const host of config.sessionStorage) {
+      const cache = await getSessionStorageByHost(host);
+      sessionStorage[host] = cache;
+    }
+    //@ts-ignore
+    injectedConfig.sessionStorage = JSON.stringify(sessionStorage);
+  }
+
   if (config?.cookies) {
-    const cookies: { [hostname: string]: { [key: string]: string } } = {};
-    for (const host of config.cookies) {
-      const cache = await getCookiesByHost(host);
-      cookies[host] = cache;
+    const cookies: { [link: string]: { [key: string]: string } } = {};
+    for (const link of config.cookies) {
+      const cache = await getCookiesByHost(link);
+      cookies[link] = cache;
     }
     // @ts-ignore
     injectedConfig.cookies = JSON.stringify(cookies);
   }
 
   if (config?.headers) {
-    const headers: { [hostname: string]: { [key: string]: string } } = {};
-    for (const host of config.headers) {
-      const cache = await getHeadersByHost(host);
-      headers[host] = cache;
+    const headers: { [link: string]: { [key: string]: string } } = {};
+    for (const link of config.headers) {
+      const cache = await getHeadersByHost(link);
+      headers[link] = cache;
     }
     // @ts-ignore
     injectedConfig.headers = JSON.stringify(headers);
@@ -293,12 +345,14 @@ export type StepConfig = {
 
 export type PluginConfig = {
   title: string; // The name of the plugin
-  description: string; // A description of the plugin's purpose
+  description: string; // A description of the plugin purpose
   icon?: string; // A base64-encoded image string representing the plugin's icon (optional)
   steps?: StepConfig[]; // An array describing the UI steps and behavior (see Step UI below) (optional)
   hostFunctions?: string[]; // Host functions that the plugin will have access to
   cookies?: string[]; // Cookies the plugin will have access to, cached by the extension from specified hosts (optional)
   headers?: string[]; // Headers the plugin will have access to, cached by the extension from specified hosts (optional)
+  localStorage?: string[]; // LocalStorage the plugin will have access to, cached by the extension from specified hosts (optional)
+  sessionStorage?: string[]; // SessionStorage the plugin will have access to, cached by the extension from specified hosts (optional)
   requests: { method: string; url: string }[]; // List of requests that the plugin is allowed to make
   notaryUrls?: string[]; // List of notary services that the plugin is allowed to use (optional)
   proxyUrls?: string[]; // List of websocket proxies that the plugin is allowed to use (optional)
@@ -348,7 +402,16 @@ export const getPluginConfig = async (
       assert(typeof name === 'string' && name.length);
     }
   }
-
+  if (config.localStorage) {
+    for (const name of config.localStorage) {
+      assert(typeof name === 'string' && name.length);
+    }
+  }
+  if (config.sessionStorage) {
+    for (const name of config.sessionStorage) {
+      assert(typeof name === 'string' && name.length);
+    }
+  }
   if (config.headers) {
     for (const name of config.headers) {
       assert(typeof name === 'string' && name.length);

src/utils/plugins.tsx

@@ -13,7 +13,7 @@ export const HostFunctionsDescriptions: {
     );
   },
   notarize: ({ notaryUrls, proxyUrls }) => {
-    const notaries = ['default notary'].concat(notaryUrls || []);
+    const notaries = ['default notary', 'your peer'].concat(notaryUrls || []);
     const proxies = ['default proxy'].concat(proxyUrls || []);
 
     return (

src/utils/rpc.ts

@@ -38,7 +38,12 @@ export async function fetchPluginConfigByHash(
   });
 }
 
-export async function runPlugin(hash: string, method: string, params?: string) {
+export async function runPlugin(
+  hash: string,
+  method: string,
+  params?: string,
+  meta?: any,
+) {
   return browser.runtime.sendMessage({
     type: BackgroundActiontype.run_plugin,
     data: {
@@ -46,5 +51,6 @@ export async function runPlugin(hash: string, method: string, params?: string) {
       method,
       params,
     },
+    meta,
   });
 }

src/utils/storage.ts

@@ -1,11 +1,13 @@
 import { LoggingLevel } from 'tlsn-js';
 import { MAX_RECV, MAX_SENT, NOTARY_API, NOTARY_PROXY } from './constants';
+import { RENDEZVOUS_API } from './constants';
 
 export const NOTARY_API_LS_KEY = 'notary-api';
 export const PROXY_API_LS_KEY = 'proxy-api';
 export const MAX_SENT_LS_KEY = 'max-sent';
 export const MAX_RECEIVED_LS_KEY = 'max-received';
 export const LOGGING_FILTER_KEY = 'logging-filter-2';
+export const RENDEZVOUS_API_LS_KEY = 'rendezvous-api';
 
 export async function set(key: string, value: string) {
   return chrome.storage.sync.set({ [key]: value });
@@ -37,3 +39,7 @@ export async function getProxyApi() {
 export async function getLoggingFilter(): Promise<LoggingLevel> {
   return await get(LOGGING_FILTER_KEY, 'Info');
 }
+
+export async function getRendezvousApi(): Promise<string> {
+  return await get(RENDEZVOUS_API_LS_KEY, RENDEZVOUS_API);
+}

websockify_config

@@ -1,6 +0,0 @@
-api.twitter.com: api.twitter.com:443
-twitter.com: twitter.com:443
-api.reddit.com: api.reddit.com:443
-reddit.com: reddit.com:443
-gateway.reddit.com: gateway.reddit.com:443
-swapi.dev: swapi.dev:443