Use useState for caching in the demo plugins

packages/demo/build-plugins.js

@@ -21,7 +21,7 @@ for (const plugin of plugins) {
         publicDir: false, // Don't copy public assets into plugin output
         build: {
             lib: {
-                entry: path.resolve(__dirname, `src/plugins/${plugin}.plugin.ts`),
+                entry: path.resolve(__dirname, `plugins/${plugin}.plugin.ts`),
                 formats: ['es'],
                 fileName: () => `${plugin}.js`,
             },

packages/demo/plugins/duolingo.plugin.ts

@@ -24,19 +24,6 @@ const config = {
     ],
 };
 
-function getRelevantHeaderValues() {
-    const [header] = useHeaders(headers => {
-        return headers.filter(header => header.url.includes(`https://${api}/2023-05-23/users`));
-    });
-
-    const authorization = header?.requestHeaders.find(header => header.name === 'Authorization')?.value;
-
-    const traceId = header?.requestHeaders.find(header => header.name === 'X-Amzn-Trace-Id')?.value;
-    const user_id = traceId?.split('=')[1];
-
-    return { authorization, user_id };
-}
-
 async function onClick() {
     const isRequestPending = useState('isRequestPending', false);
 
@@ -44,7 +31,14 @@ async function onClick() {
 
     setState('isRequestPending', true);
 
-    const { authorization, user_id } = getRelevantHeaderValues();
+    // Use cached values from state
+    const authorization = useState('authorization', null);
+    const user_id = useState('user_id', null);
+
+    if (!authorization || !user_id) {
+        setState('isRequestPending', false);
+        return;
+    }
 
     const headers = {
         authorization: authorization,
@@ -82,11 +76,32 @@ function minimizeUI() {
 }
 
 function main() {
-    const { authorization, user_id } = getRelevantHeaderValues();
-    const header_has_necessary_values = authorization && user_id;
-
     const isMinimized = useState('isMinimized', false);
     const isRequestPending = useState('isRequestPending', false);
+    const authorization = useState('authorization', null);
+    const user_id = useState('user_id', null);
+
+    // Only search for auth values if not already cached
+    if (!authorization || !user_id) {
+        const [header] = useHeaders(headers => {
+            return headers.filter(header => header.url.includes(`https://${api}/2023-05-23/users`));
+        });
+
+        const authValue = header?.requestHeaders.find(h => h.name === 'Authorization')?.value;
+        const traceId = header?.requestHeaders.find(h => h.name === 'X-Amzn-Trace-Id')?.value;
+        const userIdValue = traceId?.split('=')[1];
+
+        if (authValue && !authorization) {
+            setState('authorization', authValue);
+            console.log('Authorization found:', authValue);
+        }
+        if (userIdValue && !user_id) {
+            setState('user_id', userIdValue);
+            console.log('User ID found:', userIdValue);
+        }
+    }
+
+    const header_has_necessary_values = authorization && user_id;
 
     useEffect(() => {
         openWindow(ui);

packages/demo/plugins/swissbank.plugin.ts

@@ -33,13 +33,17 @@ async function onClick() {
     if (isRequestPending) return;
 
     setState('isRequestPending', true);
-    const [header] = useHeaders((headers: any[]) => {
-        console.log('Intercepted headers:', headers);
-        return headers.filter(header => header.url.includes(`https://${host}`));
-    });
+
+    // Use cached cookie from state
+    const cachedCookie = useState('cookie', null);
+
+    if (!cachedCookie) {
+        setState('isRequestPending', false);
+        return;
+    }
 
     const headers = {
-        'cookie': header.requestHeaders.find((header: any) => header.name === 'Cookie')?.value,
+        'cookie': cachedCookie,
         Host: host,
         'Accept-Encoding': 'identity',
         Connection: 'close',
@@ -87,13 +91,24 @@ function minimizeUI() {
 }
 
 function main() {
-    const [header] = useHeaders((headers: any[]) =>
-        headers.filter(header => header.url.includes(`https://${host}${ui_path}`))
-    );
-
-    const hasNecessaryHeader = header?.requestHeaders.some((h: any) => h.name === 'Cookie');
     const isMinimized = useState('isMinimized', false);
     const isRequestPending = useState('isRequestPending', false);
+    const cachedCookie = useState('cookie', null);
+
+    // Only search for cookie if not already cached
+    if (!cachedCookie) {
+        const [header] = useHeaders((headers: any[]) =>
+            headers.filter(h => h.url.includes(`https://${host}`))
+        );
+
+        if (header) {
+            const cookie = header.requestHeaders.find((h: any) => h.name === 'Cookie')?.value;
+            if (cookie) {
+                setState('cookie', cookie);
+                console.log('Cookie found');
+            }
+        }
+    }
 
     useEffect(() => {
         openWindow(`https://${host}${ui_path}`);
@@ -200,15 +215,15 @@ function main() {
                                 marginBottom: '16px',
                                 padding: '12px',
                                 borderRadius: '6px',
-                                backgroundColor: header ? '#d4edda' : '#f8d7da',
-                                color: header ? '#155724' : '#721c24',
-                                border: `1px solid ${header ? '#c3e6cb' : '#f5c6cb'}`,
+                                backgroundColor: cachedCookie ? '#d4edda' : '#f8d7da',
+                                color: cachedCookie ? '#155724' : '#721c24',
+                                border: `1px solid ${cachedCookie ? '#c3e6cb' : '#f5c6cb'}`,
                                 fontWeight: '500',
                             },
                         },
-                        [hasNecessaryHeader ? '✓ Cookie detected' : '⚠ No Cookie detected']
+                        [cachedCookie ? '✓ Cookie detected' : '⚠ No Cookie detected']
                     ),
-                    hasNecessaryHeader
+                    cachedCookie
                         ? button(
                             {
                                 style: {

packages/demo/plugins/twitter.plugin.ts

@@ -45,16 +45,23 @@ async function onClick() {
 
     setState('isRequestPending', true);
 
-    const [header] = useHeaders((headers: any[]) => {
-        return headers.filter(header => header.url.includes('https://api.x.com/1.1/account/settings.json'));
-    });
+    // Use cached values from state
+    const cachedCookie = useState('cookie', null);
+    const cachedCsrfToken = useState('x-csrf-token', null);
+    const cachedTransactionId = useState('x-client-transaction-id', null);
+    const cachedAuthorization = useState('authorization', null);
+
+    if (!cachedCookie || !cachedCsrfToken || !cachedAuthorization) {
+        setState('isRequestPending', false);
+        return;
+    }
 
     const headers = {
-        'cookie': header.requestHeaders.find((header: any) => header.name === 'Cookie')?.value,
-        'x-csrf-token': header.requestHeaders.find((header: any) => header.name === 'x-csrf-token')?.value,
-        'x-client-transaction-id': header.requestHeaders.find((header: any) => header.name === 'x-client-transaction-id')?.value,
+        'cookie': cachedCookie,
+        'x-csrf-token': cachedCsrfToken,
+        ...(cachedTransactionId ? { 'x-client-transaction-id': cachedTransactionId } : {}),
         Host: 'api.x.com',
-        authorization: header.requestHeaders.find((header: any) => header.name === 'authorization')?.value,
+        authorization: cachedAuthorization,
         'Accept-Encoding': 'identity',
         Connection: 'close',
     };
@@ -63,7 +70,7 @@ async function onClick() {
         {
             url: 'https://api.x.com/1.1/account/settings.json',
             method: 'GET',
-            headers: headers,
+            headers: headers as unknown as Record<string, string>,
         },
         {
             verifierUrl: VERIFIER_URL,
@@ -107,11 +114,45 @@ function minimizeUI() {
 // MAIN UI FUNCTION
 // =============================================================================
 function main() {
-    const [header] = useHeaders((headers: any[]) =>
-        headers.filter(header => header.url.includes('https://api.x.com/1.1/account/settings.json'))
-    );
     const isMinimized = useState('isMinimized', false);
     const isRequestPending = useState('isRequestPending', false);
+    const cachedCookie = useState('cookie', null);
+    const cachedCsrfToken = useState('x-csrf-token', null);
+    const cachedTransactionId = useState('x-client-transaction-id', null);
+    const cachedAuthorization = useState('authorization', null);
+
+    // Only search for header values if not already cached
+    if (!cachedCookie || !cachedCsrfToken || !cachedAuthorization) {
+        const [header] = useHeaders((headers: any[]) =>
+            headers.filter(h => h.url.includes('https://api.x.com/1.1/account/settings.json'))
+        );
+
+        if (header) {
+            const cookie = header.requestHeaders.find((h: any) => h.name === 'Cookie')?.value;
+            const csrfToken = header.requestHeaders.find((h: any) => h.name === 'x-csrf-token')?.value;
+            const transactionId = header.requestHeaders.find((h: any) => h.name === 'x-client-transaction-id')?.value;
+            const authorization = header.requestHeaders.find((h: any) => h.name === 'authorization')?.value;
+
+            if (cookie && !cachedCookie) {
+                setState('cookie', cookie);
+                console.log('Cookie found');
+            }
+            if (csrfToken && !cachedCsrfToken) {
+                setState('x-csrf-token', csrfToken);
+                console.log('CSRF token found');
+            }
+            if (transactionId && !cachedTransactionId) {
+                setState('x-client-transaction-id', transactionId);
+                console.log('Transaction ID found');
+            }
+            if (authorization && !cachedAuthorization) {
+                setState('authorization', authorization);
+                console.log('Authorization found');
+            }
+        }
+    }
+
+    const header = cachedCookie && cachedCsrfToken && cachedAuthorization;
 
     useEffect(() => {
         openWindow('https://x.com');
@@ -240,7 +281,7 @@ function main() {
                                     fontSize: '15px',
                                     transition: 'all 0.2s ease',
                                     boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
-                                    opacity: isRequestPending ? 0.5 : 1,
+                                    opacity: isRequestPending ? '0.5' : '1',
                                     cursor: isRequestPending ? 'not-allowed' : 'pointer',
                                 },
                                 onclick: 'onClick',

packages/demo/tsconfig.json

@@ -25,9 +25,6 @@
     "include": [
         "src"
     ],
-    "exclude": [
-        "src/plugins/**/*.ts"
-    ],
     "references": [
         {
             "path": "./tsconfig.node.json"