eval in page context

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>
+    );
+}