完善一下

src/components/Contro.tsx

@@ -1,190 +1,192 @@
-import React, { useEffect, useMemo, useRef, useState } from "react";
-import { Divider, Tooltip, Input } from "antd";
+import React, {useEffect, useMemo, useRef, useState} from "react";
+import {Divider, Tooltip, Input} from "antd";
 import classNames from "classnames";
 import {
-  CheckIcon,
-  ExitIcon,
-  PencilAltIcon,
-  RefreshIcon,
-  XIcon,
+    CheckIcon,
+    ExitIcon,
+    PencilAltIcon,
+    RefreshIcon,
+    XIcon,
 } from "@assets/icon/icon";
-import { wsc } from "@network/chrome";
+import {wsc} from "@network/chrome";
 import "./Contro.css";
-import { ActionType } from "../../public/socket";
+import {ActionType} from "@network/chrome";
+
+interface ControProps {
+}
 
-interface ControProps {}
 export const Contro: React.FC<ControProps> = () => {
-  const [isEdit, setIsEdit] = useState<boolean>(false);
-  const [connected, setConnected] = useState(false);
-  const [autoFindFailedReason, setAutoFindFailedReason] = useState<string>("");
-  const [enginePort, setEnginePort] = useState<string>("");
-  const [enginePortTemp, setEnginePortTemp] = useState<string>(enginePort);
-  const enginePortRef = useRef<string>(enginePort);
+    const [isEdit, setIsEdit] = useState<boolean>(false);
+    const [connected, setConnected] = useState(false);
+    const [autoFindFailedReason, setAutoFindFailedReason] = useState<string>("");
+    const [enginePort, setEnginePort] = useState<string>("");
+    const [enginePortTemp, setEnginePortTemp] = useState<string>(enginePort);
+    const enginePortRef = useRef<string>(enginePort);
 
-  useEffect(() => {
-    enginePortRef.current = enginePort;
-  }, [enginePort]);
+    useEffect(() => {
+        enginePortRef.current = enginePort;
+    }, [enginePort]);
 
-  useEffect(() => {
-    const yakitConnectInfo = localStorage.getItem("yakit-connect");
-    if (!yakitConnectInfo) {
-      findPort(11212, 11222);
-    } else {
-      const { port, connected } = JSON.parse(yakitConnectInfo);
-      setConnected(connected);
-      setEnginePort(port + "");
-      setAutoFindFailedReason("");
-    }
-
-    wsc.onWSCMessage((message) => {
-      if (message.action === ActionType.STATUS) {
-        if (message.connected === false) {
-          handleConnectFail();
+    useEffect(() => {
+        const yakitConnectInfo = localStorage.getItem("yakit-connect");
+        if (!yakitConnectInfo) {
+            findPort(11212, 11222);
         } else {
-          localStorage.setItem(
-            "yakit-connect",
-            JSON.stringify({ connected: true, port: message.port })
-          );
-          setEnginePort(message.port + "");
-          setConnected(true);
-          setAutoFindFailedReason("");
+            const {port, connected} = JSON.parse(yakitConnectInfo);
+            setConnected(connected);
+            setEnginePort(port + "");
+            setAutoFindFailedReason("");
         }
-      }
-    });
-  }, []);
 
-  const findPort = (port: number, max: number) => {
-    const ws = new WebSocket(`ws://127.0.0.1:${port}`);
-    ws.onclose = (e: CloseEvent) => {
-      if (enginePortRef.current) {
-        handleConnectFail();
-        return;
-      }
-      if (e.reason !== `FoundYakitWebSocketController` && port + 1 <= max) {
-        setTimeout(() => findPort(port + 1, max), 200);
-      }
+        wsc.onWSCMessage((message) => {
+            if (message.action === ActionType.STATUS) {
+                if (message.connected === false) {
+                    handleConnectFail();
+                } else {
+                    localStorage.setItem(
+                        "yakit-connect",
+                        JSON.stringify({connected: true, port: message.port})
+                    );
+                    setEnginePort(message.port + "");
+                    setConnected(true);
+                    setAutoFindFailedReason("");
+                }
+            }
+        });
+    }, []);
 
-      if (port + 1 > max) {
+    const findPort = (port: number, max: number) => {
+        const ws = new WebSocket(`ws://127.0.0.1:${port}`);
+        ws.onclose = (e: CloseEvent) => {
+            if (enginePortRef.current) {
+                handleConnectFail();
+                return;
+            }
+            if (e.reason !== `FoundYakitWebSocketController` && port + 1 <= max) {
+                setTimeout(() => findPort(port + 1, max), 200);
+            }
+
+            if (port + 1 > max) {
+                setConnected(false);
+                setEnginePort("");
+                setAutoFindFailedReason("Cannot found Yakit");
+                localStorage.setItem("yakit-connect", "");
+            }
+        };
+        ws.onopen = () => {
+            setConnected(true);
+            setEnginePort(port + "");
+            ws.close(1000, "FoundYakitWebSocketController");
+            connectPort(port);
+        };
+    };
+
+    const handleConnectFail = () => {
         setConnected(false);
-        setEnginePort("");
-        setAutoFindFailedReason("Cannot found Yakit");
+        setAutoFindFailedReason("Yakit WebSocket Controller Connect Fail");
         localStorage.setItem("yakit-connect", "");
-      }
     };
-    ws.onopen = () => {
-      setConnected(true);
-      setEnginePort(port + "");
-      ws.close(1000, "FoundYakitWebSocketController");
-      connectPort(port);
+
+    const connectPort = (port: number) => {
+        setAutoFindFailedReason("");
+        wsc.connect(port);
     };
-  };
 
-  const handleConnectFail = () => {
-    setConnected(false);
-    setAutoFindFailedReason("Yakit WebSocket Controller Connect Fail");
-    localStorage.setItem("yakit-connect", "");
-  };
+    const safeConnected = useMemo(() => {
+        return connected && enginePort;
+    }, [connected, enginePort]);
 
-  const connectPort = (port: number) => {
-    setAutoFindFailedReason("");
-    wsc.connect(port);
-  };
+    const failConnected = useMemo(() => {
+        return !connected && autoFindFailedReason;
+    }, [connected, autoFindFailedReason]);
 
-  const safeConnected = useMemo(() => {
-    return connected && enginePort;
-  }, [connected, enginePort]);
-
-  const failConnected = useMemo(() => {
-    return !connected && autoFindFailedReason;
-  }, [connected, autoFindFailedReason]);
-
-  return (
-    <>
-      {safeConnected || failConnected ? (
-        <div
-          className={classNames("Contro", {
-            ["Contro-success-bg"]: safeConnected,
-            ["Contro-error-bg"]: failConnected,
-          })}
-        >
-          <div className="Contro-lable">Yakit 引擎连接状态：</div>
-          <div className="Contro-cont">
-            {isEdit ? (
-              <>
-                <Input
-                  rootClassName="Contro-cont-input"
-                  value={enginePortTemp}
-                  placeholder="输入范围 11212 - 11222"
-                  onChange={(e) => {
-                    const value = e.target.value;
-                    setEnginePortTemp(value);
-                  }}
-                />
-                <div className="Contro-handle-icon">
-                  <XIcon
-                    className="grey-icon icon-p icon-active"
-                    onClick={() => {
-                      setIsEdit(false);
-                    }}
-                  />
-                  <CheckIcon
-                    className="contro-handle-icon-check icon-p"
-                    onClick={() => {
-                      if (enginePortTemp) {
-                        setIsEdit(false);
-                        setEnginePort(enginePortTemp);
-                        connectPort(Number(enginePortTemp));
-                      }
-                    }}
-                  />
-                </div>
-              </>
-            ) : (
-              <>
+    return (
+        <>
+            {safeConnected || failConnected ? (
                 <div
-                  className={classNames("Contro-cont-text", {
-                    ["Contro-cont-text-success"]: safeConnected,
-                    ["Contro-cont-text-error"]: failConnected,
-                  })}
+                    className={classNames("Contro", {
+                        ["Contro-success-bg"]: safeConnected,
+                        ["Contro-error-bg"]: failConnected,
+                    })}
                 >
-                  {safeConnected && "已连接（" + enginePort + "）"}
-                  {failConnected &&
-                    (enginePort
-                      ? autoFindFailedReason + "（" + enginePort + "）"
-                      : autoFindFailedReason)}
+                    <div className="Contro-lable">Yakit 引擎连接状态：</div>
+                    <div className="Contro-cont">
+                        {isEdit ? (
+                            <>
+                                <Input
+                                    rootClassName="Contro-cont-input"
+                                    value={enginePortTemp}
+                                    placeholder="输入范围 11212 - 11222"
+                                    onChange={(e) => {
+                                        const value = e.target.value;
+                                        setEnginePortTemp(value);
+                                    }}
+                                />
+                                <div className="Contro-handle-icon">
+                                    <XIcon
+                                        className="grey-icon icon-p icon-active"
+                                        onClick={() => {
+                                            setIsEdit(false);
+                                        }}
+                                    />
+                                    <CheckIcon
+                                        className="contro-handle-icon-check icon-p"
+                                        onClick={() => {
+                                            if (enginePortTemp) {
+                                                setIsEdit(false);
+                                                setEnginePort(enginePortTemp);
+                                                connectPort(Number(enginePortTemp));
+                                            }
+                                        }}
+                                    />
+                                </div>
+                            </>
+                        ) : (
+                            <>
+                                <div
+                                    className={classNames("Contro-cont-text", {
+                                        ["Contro-cont-text-success"]: safeConnected,
+                                        ["Contro-cont-text-error"]: failConnected,
+                                    })}
+                                >
+                                    {safeConnected && "已连接（" + enginePort + "）"}
+                                    {failConnected &&
+                                        (enginePort
+                                            ? autoFindFailedReason + "（" + enginePort + "）"
+                                            : autoFindFailedReason)}
+                                </div>
+                                <div className="Contro-handle-icon">
+                                    <Tooltip title="修改监听端口">
+                                        <PencilAltIcon
+                                            className="grey-icon icon-p icon-active"
+                                            onClick={() => {
+                                                setIsEdit(true);
+                                                setEnginePortTemp(enginePort);
+                                            }}
+                                        />
+                                    </Tooltip>
+                                    <Divider type="vertical" style={{height: 16}}/>
+                                    {safeConnected && (
+                                        <ExitIcon onClick={() => wsc.disconnect()}/>
+                                    )}
+                                    {failConnected && (
+                                        <RefreshIcon
+                                            className="grey-icon icon-active"
+                                            onClick={() => {
+                                                if (enginePort) {
+                                                    connectPort(Number(enginePort));
+                                                } else {
+                                                    findPort(11212, 11222);
+                                                }
+                                            }}
+                                        />
+                                    )}
+                                </div>
+                            </>
+                        )}
+                    </div>
                 </div>
-                <div className="Contro-handle-icon">
-                  <Tooltip title="修改监听端口">
-                    <PencilAltIcon
-                      className="grey-icon icon-p icon-active"
-                      onClick={() => {
-                        setIsEdit(true);
-                        setEnginePortTemp(enginePort);
-                      }}
-                    />
-                  </Tooltip>
-                  <Divider type="vertical" style={{ height: 16 }} />
-                  {safeConnected && (
-                    <ExitIcon onClick={() => wsc.disconnect()} />
-                  )}
-                  {failConnected && (
-                    <RefreshIcon
-                      className="grey-icon icon-active"
-                      onClick={() => {
-                        if (enginePort) {
-                          connectPort(Number(enginePort));
-                        } else {
-                          findPort(11212, 11222);
-                        }
-                      }}
-                    />
-                  )}
-                </div>
-              </>
-            )}
-          </div>
-        </div>
-      ) : null}
-    </>
-  );
+            ) : null}
+        </>
+    );
 };

src/components/Eval.tsx

@@ -1,51 +0,0 @@
-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

@@ -1,64 +1,75 @@
-import React, { useEffect, useState } from "react";
-import { Button } from "antd";
+import React, {useEffect, useState} from "react";
+import {Button, Input} from "antd";
 import TextArea from "antd/lib/input/TextArea";
-import { wsc } from "@network/chrome";
-import { ActionType } from "../../public/socket";
+import {wsc} from "@network/chrome";
+import {ActionType} from "@network/chrome";
 
-interface EvalInTabProps {}
+interface EvalInTabProps {
+}
 
 export const EvalInTab: React.FC<EvalInTabProps> = () => {
-  const [inputData, setInputData] = useState("");
+    const [funcName, setFuncName] = useState("");
+    const [inputArgsData, setInputArgsData] = useState("");
+    const [code, setCode] = useState("");
 
-  // 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]);
+    useEffect(() => {
+        wsc.onWSCMessage((message) => {
+            if (message.action === ActionType.TO_EXTENSION_PAGE) {
+                console.log("res:", message.result);
+                alert("from content script: " + JSON.stringify(message.result));
+            }
+        });
+    }, []);
 
-  useEffect(() => {
-    wsc.onWSCMessage((message) => {
-      if (message.action === ActionType.RESTOEVALINTAB) {
-        console.log("res:", message.result);
-      }
-    });
-  }, []);
+    const handleClick = async () => {
+        try {
+            const tabId = await wsc.getTabId();
+            await chrome.runtime.sendMessage({
+                action: ActionType.INJECT_SCRIPT,
+                tabId: tabId,
+                value: {mode: "CONTENT_CALL_FUNCTION", fn_name: funcName, args: inputArgsData},
+            });
+        } catch (error) {
+        }
+    };
 
-  const handleClick = async () => {
-    try {
-      const tabId = await wsc.getTabId();
-      chrome.runtime.sendMessage({
-        action: ActionType.INJECTSCRIPT,
-        tabId: tabId,
-        value: { fn_name: "Encrypt", args: inputData },
-      });
-    } catch (error) {}
-  };
+    const handleInputChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
+        setInputArgsData(event.target.value);
+    };
 
-  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>
-  );
+    const handleEvalCodeClick = async () => {
+        try {
+            const tabId = await wsc.getTabId();
+            await chrome.runtime.sendMessage({
+                action: ActionType.INJECT_SCRIPT,
+                tabId: tabId,
+                value: {mode: "CONTENT_EVAL_CODE", code: code},
+            });
+        } catch (error) {
+        }
+    }
+
+    return (
+        <div>
+            <Input
+                value={funcName}
+                onChange={(e) => setFuncName(e.target.value)}
+                placeholder="Enter function name"
+            ></Input>
+            <TextArea
+                value={inputArgsData}
+                onChange={handleInputChange}
+                placeholder="Enter your expression (e.g., 22 * 33)"
+            />
+            <Button onClick={handleClick}>eval func in tab</Button>
+
+            <TextArea
+                value={code}
+                onChange={(e) => setCode(e.target.value)}
+                placeholder="Enter your expression (e.g., 22 * 33)"
+            />
+            <Button onClick={handleEvalCodeClick}>eval code in tab</Button>
+        </div>
+    );
 };