feat: 1-click plugin (#175)

Author: 0xtsukino

.gitignore

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

src/components/Menu/index.tsx

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

src/components/PluginInfo/index.tsx

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

src/components/PluginList/index.tsx

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

src/entries/Background/db.ts

@@ -188,67 +188,70 @@ export async function getPluginHashes(): Promise<string[]> {
   return retVal;
 }
 
-export async function getPluginByHash(hash: string): Promise<string | null> {
+export async function getPluginByUrl(url: string): Promise<string | null> {
   try {
-    const plugin = await pluginDb.get(hash);
+    const plugin = await pluginDb.get(url);
     return plugin;
   } catch (e) {
     return null;
   }
 }
 
-export async function addPlugin(hex: string): Promise<string | null> {
+export async function addPlugin(
+  hex: string,
+  url: string,
+): Promise<string | null> {
   const hash = await sha256(hex);
 
-  if (await getPluginByHash(hash)) {
-    return null;
+  if (await getPluginByUrl(url)) {
+    return url;
   }
 
-  await pluginDb.put(hash, hex);
+  await pluginDb.put(url, hex);
   return hash;
 }
 
-export async function removePlugin(hash: string): Promise<string | null> {
-  const existing = await pluginDb.get(hash);
+export async function removePlugin(url: string): Promise<string | null> {
+  const existing = await pluginDb.get(url);
 
   if (!existing) return null;
 
-  await pluginDb.del(hash);
+  await pluginDb.del(url);
 
-  return hash;
+  return url;
 }
 
-export async function getPluginConfigByHash(
-  hash: string,
+export async function getPluginConfigByUrl(
+  url: string,
 ): Promise<PluginConfig | null> {
   try {
-    const config = await pluginConfigDb.get(hash);
+    const config = await pluginConfigDb.get(url);
     return config;
   } catch (e) {
     return null;
   }
 }
 
 export async function addPluginConfig(
-  hash: string,
+  url: string,
   config: PluginConfig,
 ): Promise<PluginConfig | null> {
-  if (await getPluginConfigByHash(hash)) {
+  if (await getPluginConfigByUrl(url)) {
     return null;
   }
 
-  await pluginConfigDb.put(hash, config);
+  await pluginConfigDb.put(url, config);
   return config;
 }
 
 export async function removePluginConfig(
-  hash: string,
+  url: string,
 ): Promise<PluginConfig | null> {
-  const existing = await pluginConfigDb.get(hash);
+  const existing = await pluginConfigDb.get(url);
 
   if (!existing) return null;
 
-  await pluginConfigDb.del(hash);
+  await pluginConfigDb.del(url);
 
   return existing;
 }
@@ -259,8 +262,8 @@ export async function getPlugins(): Promise<
   const hashes = await getPluginHashes();
   const ret: (PluginConfig & { hash: string; metadata: PluginMetadata })[] = [];
   for (const hash of hashes) {
-    const config = await getPluginConfigByHash(hash);
-    const metadata = await getPluginMetadataByHash(hash);
+    const config = await getPluginConfigByUrl(hash);
+    const metadata = await getPluginMetadataByUrl(hash);
     if (config) {
       ret.push({
         ...config,
@@ -281,33 +284,33 @@ export async function getPlugins(): Promise<
   return ret;
 }
 
-export async function getPluginMetadataByHash(
-  hash: string,
+export async function getPluginMetadataByUrl(
+  url: string,
 ): Promise<PluginMetadata | null> {
   try {
-    const metadata = await pluginMetadataDb.get(hash);
+    const metadata = await pluginMetadataDb.get(url);
     return metadata;
   } catch (e) {
     return null;
   }
 }
 
 export async function addPluginMetadata(
-  hash: string,
+  url: string,
   metadata: PluginMetadata,
 ): Promise<PluginMetadata | null> {
-  await pluginMetadataDb.put(hash, metadata);
+  await pluginMetadataDb.put(url, metadata);
   return metadata;
 }
 
 export async function removePluginMetadata(
-  hash: string,
+  url: string,
 ): Promise<PluginMetadata | null> {
-  const existing = await pluginMetadataDb.get(hash);
+  const existing = await pluginMetadataDb.get(url);
 
   if (!existing) return null;
 
-  await pluginMetadataDb.del(hash);
+  await pluginMetadataDb.del(url);
 
   return existing;
 }

src/entries/Background/plugins/utils.ts

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