eval in page context

src/App.tsx

@@ -1,26 +1,31 @@
 import React from "react";
 import "./App.css";
-import { ConfigProvider } from "antd";
-import { Contro } from "@components/Contro";
-import { Proxifier } from "@components/Proxifier";
-import { Controller } from "./components/Controller";
+import {ConfigProvider} from "antd";
+import {Contro} from "@components/Contro";
+import {Proxifier} from "@components/Proxifier";
+import {Controller} from "./components/Controller";
+import {Eval} from "@components/Eval";
+import {EvalInTab} from "@components/EvalInTab";
 
 function App() {
-  return (
-    <ConfigProvider
-      theme={{
-        token: {
-          colorPrimary: "#F28B44",
-        },
-      }}
-    >
-      <div className="App">
-        <Contro />
-        <Proxifier/>
-        {/* <Controller/> */}
-      </div>
-    </ConfigProvider>
-  );
+    return (
+        <ConfigProvider
+            theme={{
+                token: {
+                    colorPrimary: "#F28B44",
+                },
+            }}
+        >
+            <div className="App">
+                <Contro/>
+                <Proxifier/>
+
+                <Eval/>
+                <EvalInTab/>
+                {/* <Controller/> */}
+            </div>
+        </ConfigProvider>
+    );
 }
 
 export default App;

src/components/Contro.tsx

@@ -10,7 +10,7 @@ import {
 } from "@assets/icon/icon";
 import { wsc } from "@network/chrome";
 import "./Contro.css";
-import { ActionType } from "../../public/connect";
+import { ActionType } from "../../public/socket";
 
 interface ControProps {}
 export const Contro: React.FC<ControProps> = () => {

src/components/Eval.tsx

@@ -0,0 +1,51 @@
+import React, {useEffect, useState} from "react";
+import TextArea from "antd/lib/input/TextArea";
+import {Button} from "antd";
+
+interface EvalProps {
+}
+
+export const Eval: React.FC<EvalProps> = () => {
+    const [inputData, setInputData] = useState(""); // 状态用于存储 textarea 输入的数据
+
+    useEffect(() => {
+        const handleMessage = (event: MessageEvent) => {
+            // 检查消息来源是否安全
+            // if (event.origin !== "http://example.com") { // 适当替换为你的期望源
+            //     return;
+            // }
+            console.log(event.data)
+            alert(`Received message: ${event.data}`);
+        }
+
+        // 添加事件监听器
+        window.addEventListener('message', handleMessage);
+        return () => {
+            window.removeEventListener('message', handleMessage);
+        };
+    }, []);
+
+    // 处理按钮点击事件
+    const handleClick = () => {
+        const iframe = document.getElementById('sandbox') as HTMLIFrameElement; // 正确的类型断言
+        if (iframe?.contentWindow) {
+            iframe.contentWindow.postMessage({fn: 'Encrypt', args: '111111'}, '*'); // 发送用户输入的数据到 iframe
+        }
+    };
+
+    // 更新 textarea 输入
+    const handleInputChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
+        setInputData(event.target.value);
+    };
+
+    return (
+        <div>
+            <TextArea
+                value={inputData}
+                onChange={handleInputChange}
+                placeholder="Enter your expression (e.g., 22 * 33)"
+            />
+            <Button onClick={handleClick}>Click me</Button>
+        </div>
+    );
+}

src/components/EvalInTab.tsx

@@ -0,0 +1,59 @@
+import React, {useEffect, useState} from "react";
+import {Button} from "antd";
+import TextArea from "antd/lib/input/TextArea";
+
+interface EvalInTabProps {
+}
+
+export const EvalInTab: React.FC<EvalInTabProps> = () => {
+    const [inputData, setInputData] = useState("");
+    const [isScriptInjected, setIsScriptInjected] = useState(false);
+
+    useEffect(() => {
+        const onConnectListener = (port: chrome.runtime.Port) => {
+            console.assert(port.name === "content-script");
+            port.onMessage.addListener(function (msg) {
+                console.log("on connect", msg)
+            });
+            port.onDisconnect.addListener(function () {
+                console.error("Disconnected from port.");
+            });
+            port.postMessage({ type: "TEST", fn_name: "Encrypt", args: inputData });
+        };
+
+        chrome.runtime.onConnect.addListener(onConnectListener);
+
+        return () => {
+            chrome.runtime.onConnect.removeListener(onConnectListener);
+        };
+    }, [inputData]);
+
+    const handleClick = () => {
+
+
+        chrome.tabs.query({ active: true, lastFocusedWindow: true }, function (tabs) {
+            console.log(tabs[0].title);
+            chrome.scripting.executeScript({
+                target: { tabId: tabs[0].id },
+                files: ['inject.js'],
+            }).then(injectResults => {
+                console.log(injectResults)
+            });
+        });
+    };
+
+    const handleInputChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
+        setInputData(event.target.value);
+    };
+
+    return (
+        <div>
+            <TextArea
+                value={inputData}
+                onChange={handleInputChange}
+                placeholder="Enter your expression (e.g., 22 * 33)"
+            />
+            <Button onClick={handleClick}>eval in tab me</Button>
+        </div>
+    );
+}

src/network/chrome.ts

@@ -1,5 +1,3 @@
-import {chrome} from "./chromeapi";
-
 enum ActionType {
     CONNECT = 'connect',
     DISCONNECT = 'disconnect',

src/network/chromeapi.ts

@@ -1,74 +0,0 @@
-export interface MockMessageSender {
-    id?: string;
-}
-
-export interface MockChromeRuntime {
-    sendMessage: (message: any, responseCallback?: (response: any) => void) => void;
-    onMessage: {
-        addListener: (callback: (message: any, sender: MockMessageSender, sendResponse: (response?: any) => void) => void) => void;
-    };
-}
-
-export interface MockChromeProxy {
-    settings: {
-        set: (value: { value: any, scope: string }) => void;
-        get: (details: { incognito?: boolean }, callback: (config: any) => void) => void;
-    };
-}
-
-export interface MockChromeTabs {
-    query: (queryInfo: any, callback: (result: any) => void) => void;
-    create: (createProperties: any, callback?: (tab: any) => void) => void;
-}
-
-export interface MockChrome {
-    runtime: MockChromeRuntime;
-    proxy: MockChromeProxy;
-    tabs: MockChromeTabs;
-}
-
-declare global {
-    interface Window {
-        chrome?: any;
-    }
-}
-
-export const chrome: MockChrome = typeof window.chrome !== 'undefined' && window.chrome.runtime ? window.chrome : {
-    runtime: {
-        sendMessage: (message, responseCallback) => {
-            console.log('Mock sendMessage called with:', message);
-            if (responseCallback) responseCallback('response from mock');
-        },
-        onMessage: {
-            addListener: (callback) => {
-                console.log('Mock onMessage.addListener called');
-                callback({connected: true}, undefined, undefined)
-                // You can simulate incoming messages here if needed
-            }
-        }
-    },
-    proxy: {
-        settings: {
-            set: (value) => {
-                console.log('Mock proxy settings set with:', value);
-            },
-            get: (details, callback) => {
-                console.log('Mock proxy settings get called');
-                // Simulate proxy settings response
-                callback({mode: 'direct'});
-            }
-        }
-    },
-    tabs: {
-        query: (queryInfo, callback) => {
-            console.log('Mock tabs.query called with:', queryInfo);
-            // Simulate a tab query response
-            callback([{id: 1, url: 'http://example.com', title: 'Example'}]);
-        },
-        create: (createProperties, callback) => {
-            console.log('Mock tabs.create called with:', createProperties);
-            // Simulate creating a tab
-            if (callback) callback({id: 2, url: createProperties.url});
-        }
-    }
-};