feat(wsc) fuzzer demo

public/background.js

@@ -13,7 +13,10 @@ chrome.runtime.onMessage.addListener(function (msg, sender, sendResponse) {
             console.info("Start to connect websocket")
             const host = msg['host'] || "127.0.0.1"
             const port = msg['port'] || 11212
-            websocketManager.connectWebsocket(`ws://${host}:${port}/?token=${"a"}`, port)
+            websocketManager.connectWebsocket(`ws://${host}:${port}/?token=chrome`, port)
+            break;
+        case ActionType.SEND_MESSAGE:
+            websocketManager.sendMessage(msg.message);
             break;
         case ActionType.DISCONNECT:
             websocketManager.disconnectWebsocket();
@@ -27,7 +30,9 @@ chrome.runtime.onMessage.addListener(function (msg, sender, sendResponse) {
                             scheme: msg.scheme,
                             host: msg.host,
                             port: parseInt(`${msg.port}`)
-                        }
+                        },
+                        // enable 127.0.0.1 && localhost to mitmproxy
+                        bypassList: ["<-loopback>"]
                     }
                 },
                 scope: 'regular',

public/inject.js

@@ -18,6 +18,7 @@
                 break;
             case 'CONTENT_EVAL_CODE':
                 const code = event.data.value.code;
+                console.log(code)
                 result = (() => {
                     try {
                         return eval(code);

public/socket.js

@@ -1,5 +1,6 @@
 export const ActionType = {
     CONNECT: 'connect',
+    SEND_MESSAGE: 'send_message',
     DISCONNECT: 'disconnect',
     STATUS: 'status',
     PROXY_STATUS: 'proxy_status',
@@ -25,6 +26,7 @@ export class WebSocketManager {
         };
 
         this.socket.onmessage = (event) => {
+            console.log("event", event)
             this.handleMessage(event.data);
         };
 
@@ -37,6 +39,18 @@ export class WebSocketManager {
         };
     }
 
+    sendMessage(message) {
+        if (this.isConnected()) {
+            try {
+                this.socket.send(JSON.stringify(message));
+            } catch (e) {
+                console.error("Error sending message:", e);
+            }
+        } else {
+            console.error("WebSocket is not connected.");
+        }
+    }
+
     disconnectWebsocket() {
         if (this.socket) {
             try {
@@ -77,7 +91,49 @@ export class WebSocketManager {
         return this.socket && this.socket.readyState === WebSocket.OPEN;
     }
 
-    handleMessage(message) {
+    async handleMessage(message) {
         console.log("message", message)
+        message = JSON.parse(message);
+        if (message && message.type === "eval") {
+            console.log("msg ", message)
+            const code = message.code;
+            // try {
+            //     const [tab] = await getTab();
+            //     chrome.runtime.sendMessage({
+            //         action: ActionType.INJECT_SCRIPT, tabId: tab.id, value: {
+            //             mode: "CONTENT_EVAL_CODE", code: code,
+            //         },
+            //     });
+            // } catch (error) {
+            //     console.log(error.toString())
+            // }
+            try {
+                const [tab] = await getTab();
+                // 注入 JS 脚本
+                await chrome.scripting.executeScript({
+                    target: {tabId: tab.id},
+                    files: ['content.js']
+                });
+
+                // 发送消息
+                const response = await chrome.tabs.sendMessage(tab.id, {
+                    type: ActionType.INJECT_SCRIPT,
+                    value: {
+                        mode: "CONTENT_EVAL_CODE", code: code,
+                    }
+                });
+
+                console.log("response", response);
+                if (response && response.action === ActionType.TO_EXTENSION_PAGE) {
+                    await chrome.runtime.sendMessage(response);
+                }
+            } catch (err) {
+                console.error('Script or CSS injection failed:', err);
+            }
+        }
     }
+}
+
+function getTab() {
+    return chrome.tabs.query({active: true, lastFocusedWindow: true})
 }

src/App.tsx

@@ -15,7 +15,7 @@ function App() {
             }}
         >
             <div className="App">
-                {/*<Contro/>*/}
+                <Contro/>
                 <Proxifier/>
 
                 <EvalInTab/>

src/components/EvalInTab.tsx

@@ -13,9 +13,12 @@ export const EvalInTab: React.FC<EvalInTabProps> = () => {
 
     useEffect(() => {
         wsc.onWSCMessage((message) => {
+            console.log("message from content script:", message)
             if (message.action === wsc.ActionType.TO_EXTENSION_PAGE) {
-                console.log("res:", message.result);
-                alert("from content script: " + JSON.stringify(message.result));
+                console.log("eval in tab:", message.result);
+                // alert("from content script: " + JSON.stringify(message.result));
+                // 发送结果
+                wsc.sendMessage({"type": "chrome-extension", res: message.result})
             }
         });
     }, []);

src/network/chrome.ts

@@ -1,6 +1,8 @@
 export namespace wsc {
     export enum ActionType {
         CONNECT = 'connect',
+        SEND_MESSAGE = 'send_message',
+
         DISCONNECT = 'disconnect',
         STATUS = 'status',
         PROXY_STATUS = 'proxy_status',
@@ -19,6 +21,13 @@ export namespace wsc {
         });
     }
 
+    export function sendMessage(message: any) {
+        chrome.runtime.sendMessage({
+            action: ActionType.SEND_MESSAGE,
+            message: message,
+        });
+    }
+
     export function disconnect() {
         chrome.runtime.sendMessage({
             action: ActionType.DISCONNECT,