Merge pull request #6 from JS00001/main

Add custom headers

Author: JS00001

bridge/tauri.conf.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://schema.tauri.app/config/2",
   "productName": "HTTP Interceptor",
-  "version": "0.1.7",
+  "version": "0.1.8",
   "identifier": "com.http-interceptor.js00001",
   "build": {
     "beforeDevCommand": "npm run dev",

interceptor/chrome/tab-listener.ts

@@ -5,7 +5,7 @@ import { GREEN } from '@shared/lib';
 import { CDP, NetworkEvent } from '@shared/types';
 import { requestStore } from '@shared/stores/network-event';
 import SocketManager from '@interceptor/lib/socket-manager';
-import { rulesStore } from '@shared/stores/interceptor-rules';
+import { preferencesStore } from '@shared/stores/preferences';
 import { getRequestParams, matchesInterceptorField } from '@shared/lib';
 
 export default class TabListener extends SocketManager {
@@ -121,15 +121,35 @@ export default class TabListener extends SocketManager {
       return;
     }
 
+    // Calculate the custom headers that we want to add to the request
+    const customHeaders = preferencesStore.getState().customHeaders;
+    const enabledHeaders = customHeaders.filter((header) => {
+      return header.enabled && header.key && header.value;
+    });
+
+    const transformedHeaders = Object.fromEntries(
+      enabledHeaders.map((header) => {
+        return [header.key, header.value];
+      })
+    );
+
     // Default requests from Network.requestWillBeSent don't intercept the body/post data, so we need
-    // to add that data manually, since Fetch.requestPaused does contain it
+    // to add that data manually, since Fetch.requestPaused does contain it. We also add our custom headers to every request here, as soon
+    // as we pause it
     requestStore.getState().addOrUpdateRequest({
       requestId,
       tabId: this.id,
-      request: params.request,
+      request: {
+        ...params.request,
+        headers: {
+          ...params.request.headers,
+          ...transformedHeaders,
+        },
+      },
     });
 
-    const rules = rulesStore.getState().rules;
+    // Handle whether we intercept the request or not based on rules
+    const rules = preferencesStore.getState().rules;
     const requestParams = getRequestParams(params.request);
 
     const urlString = params.request.url;

shared/lib/index.ts

@@ -42,7 +42,7 @@ export const getRequestParams = (request: Protocol.Network.Request) => {
 
     if (boundary) {
       const formData = parseFormData(request.postData, boundary);
-      reqParams.postDataType = 'form-data';
+      reqParams.postDataType = Object.keys(formData).length > 0 ? 'form-data' : null;
       reqParams.postData = formData;
     }
   }

shared/stores/interceptor-rules.ts

@@ -0,0 +1,158 @@
+import { produce } from 'immer';
+import { create } from 'zustand';
+import { persist } from 'zustand/middleware';
+
+import { CustomHeader, InterceptorRule, ThemeColor } from '@shared/types';
+
+interface IPreferencesState {
+  hasHydrated: boolean;
+  theme: ThemeColor;
+  rules: InterceptorRule[];
+  customHeaders: CustomHeader[];
+}
+
+interface IPreferencesStore extends IPreferencesState {
+  // Custom header methods
+  addHeader: () => void;
+  removeHeader: (id: string) => void;
+  updateHeader: (header: CustomHeader) => void;
+
+  // Rule methods
+  addRule: () => void;
+  removeRule: (id: string) => void;
+  updateRule: (rule: InterceptorRule) => void;
+
+  // Other preferences/methods
+  setTheme: (theme: IPreferencesState['theme']) => void;
+  hydrate: () => void;
+}
+
+const usePreferencesStore = create<IPreferencesStore>()(
+  persist(
+    (set) => {
+      const initialState: IPreferencesState = {
+        rules: [],
+        customHeaders: [],
+        theme: 'indigo',
+        hasHydrated: false,
+      };
+
+      const setTheme = (theme: IPreferencesState['theme']) => {
+        set(
+          produce((draft) => {
+            draft.theme = theme;
+          })
+        );
+      };
+
+      /**
+       * Add a new custom header This adds a new row to the table and wont add the header
+       * until a key and value are provided
+       */
+      const addHeader = () => {
+        set((state) =>
+          produce(state, (draft) => {
+            draft.customHeaders.push({
+              id: crypto.randomUUID(),
+              key: '',
+              value: '',
+              enabled: true,
+            });
+          })
+        );
+      };
+
+      /**
+       * Update an existing header to new values. Matches based
+       * on ID
+       */
+      const updateHeader = (header: CustomHeader) => {
+        set((state) => ({
+          customHeaders: state.customHeaders.map((h) => (h.id === header.id ? header : h)),
+        }));
+      };
+
+      /**
+       * Remove a rule based on its ID. Requests will no longer be
+       * intercepted for this rule
+       */
+      const removeHeader = (id: string) => {
+        set((state) => ({
+          customHeaders: state.customHeaders.filter((h) => h.id !== id),
+        }));
+      };
+
+      /**
+       * Add a new interceptor rule. This adds a new row to the table and wont actually
+       * intercept anything until the value is not empty
+       */
+      const addRule = () => {
+        set((state) =>
+          produce(state, (draft) => {
+            draft.rules.push({
+              id: crypto.randomUUID(),
+              field: 'url',
+              operator: 'equals',
+              value: '',
+              enabled: true,
+            });
+          })
+        );
+      };
+
+      /**
+       * Update an existing interceptor rule to new values. Matches based
+       * on ID
+       */
+      const updateRule = (rule: InterceptorRule) => {
+        set((state) => ({
+          rules: state.rules.map((r) => (r.id === rule.id ? rule : r)),
+        }));
+      };
+
+      /**
+       * Remove a rule based on its ID. Requests will no longer be
+       * intercepted for this rule
+       */
+      const removeRule = (id: string) => {
+        set((state) => ({ rules: state.rules.filter((r) => r.id !== id) }));
+      };
+
+      /**
+       * Mark the store as hydrated from persisted data
+       */
+      const hydrate = () => {
+        set((state) => ({ ...state, hasHydrated: true }));
+      };
+
+      return {
+        ...initialState,
+        setTheme,
+        addHeader,
+        removeHeader,
+        updateHeader,
+        addRule,
+        removeRule,
+        updateRule,
+        hydrate,
+      };
+    },
+    {
+      name: 'preferences-store',
+      onRehydrateStorage: () => {
+        return (state, error) => {
+          if (error || !state) {
+            return state;
+          }
+
+          return state.hydrate();
+        };
+      },
+    }
+  )
+);
+
+export default usePreferencesStore;
+
+// For static initializations, so the var name looks cleaner
+export const preferencesStore = usePreferencesStore;

shared/stores/preferences.ts

@@ -29,6 +29,17 @@ export interface NetworkEvent {
   response?: Protocol.Network.Response;
 }
 
+export type ThemeColor =
+  | 'red'
+  | 'blue'
+  | 'indigo'
+  | 'emerald'
+  | 'fuchsia'
+  | 'orange'
+  | 'green'
+  | 'purple'
+  | 'teal';
+
 export type InterceptorRuleField = 'url' | 'method' | 'params' | 'paramName';
 
 export type InterceptorRuleOperator = 'equals' | 'contains' | 'notEquals' | 'notContains';
@@ -41,6 +52,13 @@ export interface InterceptorRule {
   enabled: boolean;
 }
 
+export interface CustomHeader {
+  id: string;
+  key: string;
+  value: string;
+  enabled: boolean;
+}
+
 /**
  * Response types for tauri commands
  */