Merge pull request #3 from JS00001/main

Fix a bunch of bugs

Author: JS00001

bridge/src/lib.rs

@@ -31,6 +31,7 @@ async fn launch_browser() -> Result<(), String> {
     Command::new(chrome_path)
         .args(&[
             "--remote-debugging-port=9222",
+            "--remote-debugging-address=127.0.0.1",
             &format!("--user-data-dir={}", profile_dir.display()),
             "--no-first-run",
             "--no-default-browser-check",

bridge/tauri.conf.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://schema.tauri.app/config/2",
   "productName": "HTTP Interceptor",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "identifier": "com.http-interceptor.js00001",
   "build": {
     "beforeDevCommand": "npm run dev",
@@ -33,4 +33,4 @@
       "icons/icon.ico"
     ]
   }
-}
+}

interceptor/chrome/tab-listener.ts

@@ -1,3 +1,4 @@
+import { Base64 } from 'js-base64';
 import Protocol from 'devtools-protocol';
 
 import { GREEN } from '@shared/lib';
@@ -33,7 +34,7 @@ export default class TabListener extends SocketManager {
     await this.send('Fetch.continueRequest', {
       headers,
       requestId: event.fetchId,
-      postData: btoa(event.request.postData ?? ''),
+      postData: Base64.encode(event.request.postData ?? ''),
     });
   }
 

package-lock.json

@@ -22,6 +22,7 @@
     "@tauri-apps/plugin-websocket": "^2.4.0",
     "classnames": "^2.5.1",
     "immer": "^10.1.1",
+    "js-base64": "^3.7.8",
     "lodash": "^4.17.21",
     "motion": "^12.23.12",
     "react": "^18.3.1",

package.json

@@ -8,9 +8,12 @@ interface INetworkEventState {
   /** List of request IDs for quickly checking if a request exists */
   requestIds: string[];
 
-  /** Array of requestIDs that have been intercepted */
+  /** Array of requestIDs that are currently intercepted, pending action */
   interceptedEvents: string[];
 
+  /** Array of all requestIDs that have been intercepted */
+  allInterceptedEvents: string[];
+
   /** Map of network events by their requestID */
   events: { [requestId: string]: NetworkEvent };
 }
@@ -72,6 +75,7 @@ export const useNetworkEventStore = create<INetworkEventStore>()((set) => {
     events: {},
     requestIds: [],
     interceptedEvents: [],
+    allInterceptedEvents: [],
   };
 
   /**
@@ -134,6 +138,7 @@ export const useNetworkEventStore = create<INetworkEventStore>()((set) => {
       produce(state, (draft) => {
         if (!draft.events[requestId]) return;
         draft.interceptedEvents.push(requestId);
+        draft.allInterceptedEvents.push(requestId);
         if (fetchId) draft.events[requestId].fetchId = fetchId;
       })
     );

shared/stores/network-event.ts

@@ -0,0 +1,47 @@
+import { useMemo } from "react";
+import { useDebounce } from "use-debounce";
+import { createColumnHelper } from "@tanstack/react-table";
+
+import UrlCell from "./cells/UrlCell";
+import StatusCell from "./cells/StatusCell";
+import MethodCell from "./cells/MethodCell";
+import NetworkEventTable from "./NetworkEventTable";
+
+import { NetworkEvent } from "@shared/types";
+import { useNetworkEventStore } from "@shared/stores/network-event";
+
+const columnHelper = createColumnHelper<NetworkEvent>();
+
+const columns = [
+  columnHelper.display({
+    id: "url",
+    header: "Url",
+    cell: UrlCell,
+    meta: { width: "auto" },
+  }),
+  columnHelper.accessor("response.status", {
+    id: "status",
+    cell: StatusCell,
+    header: "Status",
+    meta: { width: 140 },
+  }),
+  columnHelper.accessor("request.method", {
+    id: "method",
+    cell: MethodCell,
+    header: "Method",
+    meta: { width: 140 },
+  }),
+];
+
+export default function InterceptionHistoryTable() {
+  const events = useNetworkEventStore((s) => s.events);
+  const interceptedEvents = useNetworkEventStore((s) => s.allInterceptedEvents);
+
+  const rows = useMemo(() => {
+    return interceptedEvents.map((id) => events[id]);
+  }, [interceptedEvents, events]);
+
+  const [data] = useDebounce(rows, 50);
+
+  return <NetworkEventTable data={data} columns={columns} />;
+}

ui/components/tables/InterceptionHistoryTable.tsx

@@ -19,6 +19,7 @@ export default function TextAreaAutosize({
   style,
   horizontal,
   className,
+  onChange,
   onKeyDown,
   ...props
 }: TextAreaAutosizeProps & ReactTextAreaAutosizeProps) {
@@ -59,6 +60,19 @@ export default function TextAreaAutosize({
     }
   };
 
+  const changeHandler = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    // We are using text areas for inputting JSON, so we dont ever want ugly italisized quotes
+    const event = {
+      ...e,
+      target: {
+        ...e.target,
+        value: e.target.value.replace(/[“”]/g, '"'),
+      },
+    };
+
+    onChange?.(event);
+  };
+
   if (!horizontal) {
     return (
       <ReactTextAreaAutosize
@@ -70,6 +84,7 @@ export default function TextAreaAutosize({
         autoComplete="off"
         autoCorrect="off"
         className={classes}
+        onChange={changeHandler}
         onKeyDown={keydownHandler}
         {...props}
       />
@@ -91,6 +106,7 @@ export default function TextAreaAutosize({
         autoCorrect="off"
         className={classes}
         style={{ width, ...style }}
+        onChange={changeHandler}
         onKeyDown={keydownHandler}
         {...props}
       />

ui/components/ui/TextAreaAutosize.tsx

@@ -6,25 +6,35 @@ import useModalStore from "@ui/store/modal";
 import { NetworkEvent } from "@shared/types";
 import Button from "@ui/components/ui/Button";
 import HistoryTable from "@ui/components/tables/HistoryTable";
-import { useNetworkEventStore } from "@shared/stores/network-event";
 import DropRequestButton from "@ui/components/DropRequestButton";
+import { useNetworkEventStore } from "@shared/stores/network-event";
 import InterceptedTable from "@ui/components/tables/InterceptedTable";
 import BrowserControlButton from "@ui/components/BrowserControlButton";
 import ForwardRequestButton from "@ui/components/ForwardRequestButton";
+import InterceptionHistoryTable from "@ui/components/tables/InterceptionHistoryTable";
 
 enum Tab {
   Intercept = "Intercept",
-  History = "History",
+  History = "Network History",
+  InterceptionHistory = "Interception History",
 }
 
 const Tabs = [
   {
     label: "Intercepted",
     tab: Tab.Intercept,
+    description: "Intercepted requests, pending action",
   },
+
   {
-    label: "History",
+    label: "Network History",
     tab: Tab.History,
+    description: "All network requests",
+  },
+  {
+    label: "Interception History",
+    tab: Tab.InterceptionHistory,
+    description: "All previous & current intercepted requests",
   },
 ];
 
@@ -52,28 +62,12 @@ export default function Intercept() {
         </div>
       </div>
 
-      {/* Tab Layer */}
+      {/* Tab Bar and Quick Actions */}
       <div className="pb-1 flex items-center text-sm gap-1">
-        {Tabs.map((item) => {
-          const isActive = item.tab === tab;
-          const onClick = () => setTab(item.tab);
-
-          const classes = classNames(
-            "px-2 rounded-md py-1 cursor-pointer",
-            "hover:bg-primary-50 hover:text-primary-500",
-            "active:bg-primary-100 active:text-primary-600",
-            isActive ? "bg-primary-50 text-primary-500" : "text-gray-500"
-          );
-
-          return (
-            <button key={item.tab} className={classes} onClick={onClick}>
-              <p>{item.label}</p>
-            </button>
-          );
-        })}
+        <TabBar value={tab} onChange={setTab} />
 
         <div className="flex flex-grow items-center justify-end gap-1">
-          {tab === Tab.History && (
+          {[Tab.History, Tab.InterceptionHistory].includes(tab) && (
             <Button color="secondary" onClick={clearRequests}>
               <ProhibitIcon size={16} /> Clear History
             </Button>
@@ -86,6 +80,32 @@ export default function Intercept() {
       {/* Main View */}
       {tab === Tab.History && <HistoryTable />}
       {tab === Tab.Intercept && <InterceptedTable onRowSelectionChange={setSelectedEvents} />}
+      {tab === Tab.InterceptionHistory && <InterceptionHistoryTable />}
     </div>
   );
 }
+
+interface TabBarProps {
+  value: Tab;
+  onChange: (value: Tab) => void;
+}
+
+function TabBar({ value, onChange }: TabBarProps) {
+  return Tabs.map((item) => {
+    const isActive = item.tab === value;
+    const onClick = () => onChange(item.tab);
+
+    const tabClasses = classNames(
+      "px-2 rounded-md py-1 cursor-pointer",
+      "hover:bg-primary-50 hover:text-primary-500",
+      "active:bg-primary-100 active:text-primary-600",
+      isActive ? "bg-primary-50 text-primary-500" : "text-gray-500"
+    );
+
+    return (
+      <button key={item.tab} title={item.description} className={tabClasses} onClick={onClick}>
+        <p>{item.label}</p>
+      </button>
+    );
+  });
+}

ui/pages/intercept.tsx

@@ -8,26 +8,46 @@ export default function Settings() {
   const setPreference = usePreferencesStore((s) => s.setPreference);
 
   const themes = [
-    {
-      color: colors.indigo[400],
-      selected: theme === "indigo",
-      onClick: () => setPreference("theme", "indigo"),
-    },
     {
       color: colors.red[400],
       selected: theme === "red",
       onClick: () => setPreference("theme", "red"),
     },
     {
-      color: colors.blue[400],
-      selected: theme === "blue",
-      onClick: () => setPreference("theme", "blue"),
+      color: colors.orange[400],
+      selected: theme === "orange",
+      onClick: () => setPreference("theme", "orange"),
+    },
+    {
+      color: colors.green[400],
+      selected: theme === "green",
+      onClick: () => setPreference("theme", "green"),
     },
     {
       color: colors.emerald[400],
       selected: theme === "emerald",
       onClick: () => setPreference("theme", "emerald"),
     },
+    {
+      color: colors.teal[400],
+      selected: theme === "teal",
+      onClick: () => setPreference("theme", "teal"),
+    },
+    {
+      color: colors.blue[400],
+      selected: theme === "blue",
+      onClick: () => setPreference("theme", "blue"),
+    },
+    {
+      color: colors.indigo[400],
+      selected: theme === "indigo",
+      onClick: () => setPreference("theme", "indigo"),
+    },
+    {
+      color: colors.purple[400],
+      selected: theme === "purple",
+      onClick: () => setPreference("theme", "purple"),
+    },
     {
       color: colors.fuchsia[400],
       selected: theme === "fuchsia",
@@ -55,18 +75,16 @@ interface ThemeSelectorProps {
 }
 
 function ThemeSelector({ selected, color, onClick }: ThemeSelectorProps) {
-  const classes = classNames("rounded-full cursor-pointer", !selected ? "size-8" : "size-6");
+  const classes = classNames("rounded-full cursor-pointer size-6");
+  const borderColor = selected ? color : "transparent";
 
-  if (selected) {
-    return (
-      <div
-        style={{ borderColor: color }}
-        className="flex items-center justify-center border-2 size-8 rounded-full"
-      >
-        <div className={classes} style={{ backgroundColor: color }} />
-      </div>
-    );
-  }
-
-  return <button className={classes} style={{ backgroundColor: color }} onClick={onClick} />;
+  return (
+    <div
+      style={{ borderColor }}
+      className="flex items-center justify-center border-2 size-8 rounded-full"
+      onClick={onClick}
+    >
+      <div className={classes} style={{ backgroundColor: color }} />
+    </div>
+  );
 }