From 4c78625f12796e99bf8253c5ece1a367ba878ee2 Mon Sep 17 00:00:00 2001 From: tsukino <87639218+0xtsukino@users.noreply.github.com> Date: Wed, 14 Aug 2024 07:57:27 -0400 Subject: [PATCH] fix: update logging level to work with alpha6; update verify method in background; add version to option page (#79) --- package-lock.json | 25 ++++++++++----- package.json | 4 +-- pnpm-lock.yaml | 8 ++--- src/entries/Background/rpc.ts | 8 ++--- src/entries/Offscreen/Offscreen.tsx | 19 +++++++----- src/entries/Popup/Popup.tsx | 16 +++++----- src/pages/History/index.tsx | 9 +++++- src/pages/Options/index.tsx | 35 +++++++++++---------- src/pages/ProofUploader/index.tsx | 47 ++++++++++++++++++----------- src/pages/ProofViewer/index.tsx | 2 ++ src/utils/constants.ts | 4 --- src/utils/storage.ts | 12 ++++---- 12 files changed, 111 insertions(+), 78 deletions(-) diff --git a/package-lock.json b/package-lock.json index c180b8f0..be061d4f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -17,6 +17,7 @@ "classnames": "^2.3.2", "comlink": "^4.4.1", "copy-to-clipboard": "^3.3.3", + "dayjs": "^1.11.12", "fast-deep-equal": "^3.1.3", "fuse.js": "^6.6.2", "level": "^8.0.0", @@ -31,7 +32,7 @@ "redux-logger": "^3.0.6", "redux-thunk": "^2.4.2", "tailwindcss": "^3.3.3", - "tlsn-js": "0.1.0-alpha.6.1", + "tlsn-js": "0.1.0-alpha.6.2", "tlsn-jsV5.3": "npm:tlsn-js@0.1.0-alpha.5.3" }, "devDependencies": { @@ -6094,6 +6095,11 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/dayjs": { + "version": "1.11.12", + "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.12.tgz", + "integrity": "sha512-Rt2g+nTbLlDWZTwwrIXjy9MeiZmSDI375FvZs72ngxx8PDC6YXOeR3q5LAuPzjZQxhiWdRKac7RKV+YyQYfYIg==" + }, "node_modules/debug": { "version": "4.3.4", "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz", @@ -12996,9 +13002,9 @@ "dev": true }, "node_modules/tlsn-js": { - "version": "0.1.0-alpha.6.1", - "resolved": "https://registry.npmjs.org/tlsn-js/-/tlsn-js-0.1.0-alpha.6.1.tgz", - "integrity": "sha512-/gs+Z3/+J4I0LCX8Rx+Dblj7SwxA+2MAgbgXyAUR/wdD6oyBPHr5DljegpTVgaAMruopGx+Ggsu1ab5lw6qeIA==", + "version": "0.1.0-alpha.6.2", + "resolved": "https://registry.npmjs.org/tlsn-js/-/tlsn-js-0.1.0-alpha.6.2.tgz", + "integrity": "sha512-6PANWQEFw48VFNfDgA017zcNRae2OutzNmE5Xcc/h6lwkZZ8MBZIFAFfz/WHZJ3fcFJumaKrG80gpomP6blZqw==", "engines": { "node": ">= 16.20.2" } @@ -18243,6 +18249,11 @@ "is-data-view": "^1.0.1" } }, + "dayjs": { + "version": "1.11.12", + "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.12.tgz", + "integrity": "sha512-Rt2g+nTbLlDWZTwwrIXjy9MeiZmSDI375FvZs72ngxx8PDC6YXOeR3q5LAuPzjZQxhiWdRKac7RKV+YyQYfYIg==" + }, "debug": { "version": "4.3.4", "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz", @@ -22975,9 +22986,9 @@ "dev": true }, "tlsn-js": { - "version": "0.1.0-alpha.6.1", - "resolved": "https://registry.npmjs.org/tlsn-js/-/tlsn-js-0.1.0-alpha.6.1.tgz", - "integrity": "sha512-/gs+Z3/+J4I0LCX8Rx+Dblj7SwxA+2MAgbgXyAUR/wdD6oyBPHr5DljegpTVgaAMruopGx+Ggsu1ab5lw6qeIA==" + "version": "0.1.0-alpha.6.2", + "resolved": "https://registry.npmjs.org/tlsn-js/-/tlsn-js-0.1.0-alpha.6.2.tgz", + "integrity": "sha512-6PANWQEFw48VFNfDgA017zcNRae2OutzNmE5Xcc/h6lwkZZ8MBZIFAFfz/WHZJ3fcFJumaKrG80gpomP6blZqw==" }, "tlsn-jsV5.3": { "version": "npm:tlsn-js@0.1.0-alpha.5.3", diff --git a/package.json b/package.json index b0209eb1..e7de5006 100755 --- a/package.json +++ b/package.json @@ -38,8 +38,8 @@ "redux-logger": "^3.0.6", "redux-thunk": "^2.4.2", "tailwindcss": "^3.3.3", - "tlsn-jsV5.3": "npm:tlsn-js@0.1.0-alpha.5.3", - "tlsn-js": "0.1.0-alpha.6.1" + "tlsn-js": "0.1.0-alpha.6.2", + "tlsn-jsV5.3": "npm:tlsn-js@0.1.0-alpha.5.3" }, "devDependencies": { "@babel/core": "^7.20.12", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 064b2e82..83f3e134 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -72,8 +72,8 @@ dependencies: specifier: ^3.3.3 version: 3.4.3 tlsn-js: - specifier: 0.1.0-alpha.6.1 - version: 0.1.0-alpha.6.1 + specifier: 0.1.0-alpha.6.2 + version: 0.1.0-alpha.6.2 tlsn-jsV5.3: specifier: npm:tlsn-js@0.1.0-alpha.5.3 version: /tlsn-js@0.1.0-alpha.5.3 @@ -7981,8 +7981,8 @@ packages: comlink: 4.4.1 dev: false - /tlsn-js@0.1.0-alpha.6.1: - resolution: {integrity: sha512-/gs+Z3/+J4I0LCX8Rx+Dblj7SwxA+2MAgbgXyAUR/wdD6oyBPHr5DljegpTVgaAMruopGx+Ggsu1ab5lw6qeIA==} + /tlsn-js@0.1.0-alpha.6.2: + resolution: {integrity: sha512-6PANWQEFw48VFNfDgA017zcNRae2OutzNmE5Xcc/h6lwkZZ8MBZIFAFfz/WHZJ3fcFJumaKrG80gpomP6blZqw==} engines: {node: '>= 16.20.2'} dev: false diff --git a/src/entries/Background/rpc.ts b/src/entries/Background/rpc.ts index 646b19d3..37d4f1e4 100644 --- a/src/entries/Background/rpc.ts +++ b/src/entries/Background/rpc.ts @@ -84,6 +84,7 @@ export enum BackgroundActiontype { get_plugins_response = 'get_plugins_response', run_plugin_request = 'run_plugin_request', run_plugin_response = 'run_plugin_response', + get_logging_level = 'get_logging_level', } export type BackgroundAction = { @@ -188,6 +189,9 @@ export const initRPC = () => { return handleGetPluginsRequest(request); case BackgroundActiontype.run_plugin_request: return handleRunPluginCSRequest(request); + case BackgroundActiontype.get_logging_level: + getLoggingFilter().then(sendResponse); + return true; default: break; } @@ -299,7 +303,6 @@ async function handleRetryProveReqest( ...req, notaryUrl, websocketProxyUrl, - loggingFilter: await getLoggingFilter(), }, }); @@ -363,7 +366,6 @@ async function handleProveRequestStart( websocketProxyUrl, secretHeaders, secretResps, - loggingFilter: await getLoggingFilter(), }, }); @@ -428,7 +430,6 @@ async function runPluginProver(request: BackgroundAction, now = Date.now()) { maxSentData, secretHeaders, secretResps, - loggingFilter: await getLoggingFilter(), }, }); } @@ -862,7 +863,6 @@ async function handleNotarizeRequest(request: BackgroundAction) { websocketProxyUrl, secretHeaders, secretResps, - loggingFilter: await getLoggingFilter(), }, }); } catch (e) { diff --git a/src/entries/Offscreen/Offscreen.tsx b/src/entries/Offscreen/Offscreen.tsx index 72b6589e..1d92c1c9 100644 --- a/src/entries/Offscreen/Offscreen.tsx +++ b/src/entries/Offscreen/Offscreen.tsx @@ -13,6 +13,7 @@ import { urlify } from '../../utils/misc'; import { BackgroundActiontype } from '../Background/rpc'; import browser from 'webextension-polyfill'; import { Proof, ProofV1 } from '../../utils/types'; +import { Method } from 'tlsn-js/wasm/pkg'; const { init, Prover, NotarizedSession, TlsProof }: any = Comlink.wrap( new Worker(new URL('./worker.ts', import.meta.url)), @@ -21,7 +22,10 @@ const { init, Prover, NotarizedSession, TlsProof }: any = Comlink.wrap( const Offscreen = () => { useEffect(() => { (async () => { - await init({ loggingLevel: 'Info' }); + const loggingLevel = await browser.runtime.sendMessage({ + type: BackgroundActiontype.get_logging_level, + }); + await init({ loggingLevel }); // @ts-ignore chrome.runtime.onMessage.addListener((request, sender, sendResponse) => { switch (request.type) { @@ -99,9 +103,8 @@ const Offscreen = () => { } case BackgroundActiontype.verify_proof: { (async () => { - console.log('verify_proof', request.data); - // const result = await verify(request.data); - // sendResponse(result); + const result = await verifyProof(request.data); + sendResponse(result); })(); return true; @@ -181,8 +184,8 @@ async function createProof(options: { url: string; notaryUrl: string; websocketProxyUrl: string; - method?: string; - headers: { + method?: Method; + headers?: { [name: string]: string; }; body?: any; @@ -194,8 +197,8 @@ async function createProof(options: { }): Promise { const { url, - method, - headers, + method = 'GET', + headers = {}, body, maxSentData, maxRecvData, diff --git a/src/entries/Popup/Popup.tsx b/src/entries/Popup/Popup.tsx index cb8a425a..14a4aa7a 100644 --- a/src/entries/Popup/Popup.tsx +++ b/src/entries/Popup/Popup.tsx @@ -35,12 +35,8 @@ import { getConnection } from '../Background/db'; const Popup = () => { const dispatch = useDispatch(); - const activeTab = useActiveTab(); - const url = useActiveTabUrl(); const navigate = useNavigate(); - const [showConnectionDetails, setShowConnectionDetails] = useState(false); - useEffect(() => { (async () => { const [tab] = await browser.tabs.query({ @@ -146,7 +142,7 @@ function AppConnectionLogo() { className="absolute right-2 flex flex-nowrap flex-row items-center gap-1 justify-center w-fit cursor-pointer" onClick={() => setShowConnectionDetails(true)} > -
+
{!!activeTab?.favIconUrl ? ( logo ) : ( - + )}
+
+
Time:
+
+ {new Date(charwise.decode(props.requestId, 'hex')).toISOString()} +
+
Host:
{requestUrl?.host}
@@ -140,7 +147,7 @@ export function OneRequestHistory(props: {
{request?.notaryUrl}
-
TLS Proxy API:
+
TLS Proxy API:
{request?.websocketProxyUrl}
diff --git a/src/pages/Options/index.tsx b/src/pages/Options/index.tsx index dce55807..df37f39e 100644 --- a/src/pages/Options/index.tsx +++ b/src/pages/Options/index.tsx @@ -24,20 +24,18 @@ import { NOTARY_PROXY, MAX_RECV, MAX_SENT, - LOGGING_LEVEL_INFO, - LOGGING_LEVEL_NONE, - LOGGING_LEVEL_DEBUG, - LOGGING_LEVEL_TRACE, } from '../../utils/constants'; import Modal, { ModalContent } from '../../components/Modal/Modal'; import browser from 'webextension-polyfill'; +import { LoggingLevel } from 'tlsn-js'; +import { version } from '../../../package.json'; export default function Options(): ReactElement { const [notary, setNotary] = useState(NOTARY_API); const [proxy, setProxy] = useState(NOTARY_PROXY); const [maxSent, setMaxSent] = useState(MAX_SENT); const [maxReceived, setMaxReceived] = useState(MAX_RECV); - const [loggingLevel, setLoggingLevel] = useState(LOGGING_LEVEL_INFO); + const [loggingLevel, setLoggingLevel] = useState('Info'); const [dirty, setDirty] = useState(false); const [shouldReload, setShouldReload] = useState(false); @@ -50,7 +48,7 @@ export default function Options(): ReactElement { setProxy((await getProxyApi()) || NOTARY_PROXY); setMaxReceived((await getMaxRecv()) || MAX_RECV); setMaxSent((await getMaxSent()) || MAX_SENT); - setLoggingLevel((await getLoggingFilter()) || LOGGING_LEVEL_INFO); + setLoggingLevel((await getLoggingFilter()) || 'Info'); })(); }, [advanced]); @@ -170,7 +168,7 @@ function InputField(props: { return (
-
{label}
+
{label}
+
+
Version
+
{version}
+
-
+
Explorer URL
-
{EXPLORER_API}
+
{EXPLORER_API}
); @@ -225,12 +227,12 @@ function NormalOptions(props: { function AdvancedOptions(props: { maxSent: number; maxReceived: number; - loggingLevel: string; + loggingLevel: LoggingLevel; setShouldReload: (reload: boolean) => void; setMaxSent: (value: number) => void; setMaxReceived: (value: number) => void; setDirty: (value: boolean) => void; - setLoggingLevel: (level: string) => void; + setLoggingLevel: (level: LoggingLevel) => void; }) { const { maxSent, @@ -270,16 +272,17 @@ function AdvancedOptions(props: {
diff --git a/src/pages/ProofUploader/index.tsx b/src/pages/ProofUploader/index.tsx index fb97cb56..d3417eda 100644 --- a/src/pages/ProofUploader/index.tsx +++ b/src/pages/ProofUploader/index.tsx @@ -13,6 +13,7 @@ export default function ProofUploader(): ReactElement { recv: string; sent: string; } | null>(null); + const [uploading, setUploading] = useState(false); const onFileUpload: ChangeEventHandler = useCallback( async (e) => { @@ -25,16 +26,21 @@ export default function ProofUploader(): ReactElement { const result = event.target?.result; if (result) { const proof = JSON.parse(result as string); - const res = await chrome.runtime.sendMessage< - any, - { recv: string; sent: string } - >({ - type: BackgroundActiontype.verify_proof, - data: proof, - }); - setProof(res); + const res = await chrome.runtime + .sendMessage({ + type: BackgroundActiontype.verify_proof, + data: proof, + }) + .catch(() => null); + + if (proof) { + setUploading(false); + setProof(res); + } } }); + + setUploading(true); reader.readAsText(file); } }, @@ -53,16 +59,23 @@ export default function ProofUploader(): ReactElement { className="absolute w-full h-full top-0 left-0 opacity-0 z-10" onChange={onFileUpload} accept=".json" + disabled={uploading} /> - -
Drop your proof here to continue
-
or
- + {uploading ? ( + + ) : ( + <> + +
Drop your proof here to continue
+
or
+ + + )}
); diff --git a/src/pages/ProofViewer/index.tsx b/src/pages/ProofViewer/index.tsx index 26cdf3b6..bda20e4f 100644 --- a/src/pages/ProofViewer/index.tsx +++ b/src/pages/ProofViewer/index.tsx @@ -57,12 +57,14 @@ export default function ProofViewer(props?: { )} {tab === 'recv' && ( )}
diff --git a/src/utils/constants.ts b/src/utils/constants.ts index 7e30ff5b..4f874f4c 100644 --- a/src/utils/constants.ts +++ b/src/utils/constants.ts @@ -3,7 +3,3 @@ export const NOTARY_API = 'https://notary.pse.dev/v0.1.0-alpha.5'; export const NOTARY_PROXY = 'wss://notary.pse.dev/proxy'; export const MAX_RECV = 16384; export const MAX_SENT = 4096; -export const LOGGING_LEVEL_NONE = ' '; -export const LOGGING_LEVEL_INFO = 'info,tlsn_extension_rs=info'; -export const LOGGING_LEVEL_DEBUG = 'debug,tlsn_extension_rs=debug'; -export const LOGGING_LEVEL_TRACE = 'trace,tlsn_extension_rs=trace'; diff --git a/src/utils/storage.ts b/src/utils/storage.ts index fcfc67cc..42602048 100644 --- a/src/utils/storage.ts +++ b/src/utils/storage.ts @@ -1,10 +1,10 @@ -import { LOGGING_LEVEL_INFO } from './constants'; +import { LoggingLevel } from 'tlsn-js'; 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'; +export const LOGGING_FILTER_KEY = 'logging-filter-2'; export async function set(key: string, value: string) { return chrome.storage.sync.set({ [key]: value }); @@ -14,7 +14,7 @@ export async function get(key: string, defaultValue?: string) { return chrome.storage.sync .get(key) .then((json: any) => json[key] || defaultValue) - .catch(() => ''); + .catch(() => defaultValue); } export async function getMaxSent() { @@ -26,13 +26,13 @@ export async function getMaxRecv() { } export async function getNotaryApi() { - return await get(NOTARY_API_LS_KEY, 'https://notary.pse.dev/v0.1.0-alpha.5'); + return await get(NOTARY_API_LS_KEY, 'https://notary.pse.dev/v0.1.0-alpha.6'); } export async function getProxyApi() { return await get(PROXY_API_LS_KEY, 'wss://notary.pse.dev/proxy'); } -export async function getLoggingFilter() { - return await get(LOGGING_FILTER_KEY, LOGGING_LEVEL_INFO); +export async function getLoggingFilter(): Promise { + return await get(LOGGING_FILTER_KEY, 'Info'); }