eval done && fix findDOMNode warning

package.json

@@ -9,7 +9,7 @@
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
     "ahooks": "^3.7.10",
-    "antd": "^5.17.0",
+    "antd": "^5.17.2",
     "babel-jest": "^27.4.2",
     "babel-plugin-named-asset-import": "^0.3.8",
     "babel-preset-react-app": "^10.0.1",

public/background.js

@@ -50,24 +50,29 @@ chrome.runtime.onMessage.addListener(function (msg, sender, sendResponse) {
             });
             break;
         case ActionType.INJECT_SCRIPT:
-            chrome.scripting.executeScript({
+            (async () => {
-                target: {tabId: msg.tabId},
+                try {
-                files: ['content.js']
+                    // 注入 JS 脚本
-            }).then(() => {
+                    await chrome.scripting.executeScript({
-                chrome.tabs.sendMessage(msg.tabId,
+                        target: {tabId: msg.tabId},
-                    {type: ActionType.INJECT_SCRIPT, value: msg.value}
+                        files: ['content.js']
-                ).then(response => {
+                    });
-                    console.log("response", response)
+
+                    // 发送消息
+                    const response = await chrome.tabs.sendMessage(msg.tabId, {
+                        type: ActionType.INJECT_SCRIPT,
+                        value: msg.value
+                    });
+
+                    console.log("response", response);
                     if (response && response.action === ActionType.TO_EXTENSION_PAGE) {
-                        chrome.runtime.sendMessage(response)
+                        await chrome.runtime.sendMessage(response);
                     }
-                })
+                } catch (err) {
-            }).catch(err => {
+                    console.error('Script or CSS injection failed:', err);
-                console.error('Script injection failed:', err);
+                }
-            });
+            })();
             break
-        case ActionType.ECHO:
-            console.log("Echo ", msg.result)
     }
 
 })

public/content.js

@@ -3,6 +3,31 @@
         return;
     }
     window.contentScriptInjected = true;
+    // 检查并插入 CSS 样式
+    const styleId = 'injected-css-style';
+    if (!document.getElementById(styleId)) {
+        const style = document.createElement('style');
+        style.id = styleId;
+        style.textContent = `
+            body {
+                border: 3px solid red;
+                position: relative; /* Ensure the body is positioned to allow the pseudo-element */
+            }
+            body::after {
+                content: "Injection successful";
+                display: block;
+                position: fixed;
+                top: 10px;
+                right: 10px;
+                background: green;
+                color: white;
+                padding: 5px 10px;
+                font-size: 16px;
+                z-index: 1000;
+            }
+        `;
+        document.head.appendChild(style);
+    }
     chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
         if (request.type === 'yakit_inject_script') {
             const injectedScriptURL = chrome.runtime.getURL('inject.js');
@@ -14,7 +39,7 @@
             };
             (document.head || document.documentElement).appendChild(script);
             window.addEventListener('message', function onMessage(event) {
-                if (event.source !== window || event.data.type !== 'FROM_PAGE') {
+                if (event.source !== window || event.data.type !== 'FROM_INJECT_JS') {
                     return;
                 }
                 window.removeEventListener('message', onMessage);

public/inject.js

@@ -8,24 +8,30 @@
         if (event.source !== window) {
             return;
         }
-        let result = "";
+        let result
         switch (event.data.type) {
             case 'CONTENT_CALL_FUNCTION':
                 const fn_name = event.data.value.fn_name;
                 const args = event.data.value.args;
                 result = window[fn_name](args);
+                window.postMessage({type: 'FROM_INJECT_JS', result: result}, '*');
                 break;
             case 'CONTENT_EVAL_CODE':
                 const code = event.data.value.code;
-                result = eval(code);
+                result = (() => {
+                    try {
+                        return eval(code);
+                    } catch (e) {
+                        // console.error("Error evaluating code:", e);
+                        return e.toString();
+                    }
+                })();
                 // console.log("CONTENT_EVAL_CODE result: ", result);
+                window.postMessage({type: 'FROM_INJECT_JS', result: result}, '*');
                 break;
             default:
                 break;
         }
-        if (result && typeof result === 'object' && Object.keys(result).length > 0) {
-            window.postMessage({type: 'FROM_PAGE', result: result}, '*');
-        }
     });
 })();
 

public/socket.js

@@ -79,48 +79,5 @@ export class WebSocketManager {
 
     handleMessage(message) {
         console.log("message", message)
-        // 解析消息
-        // try {
-        //     // 解析从WebSocket接收到的JSON数据
-        //     let code = message;
-        //     getTabId().then((tabId) => {
-        //         // 确保tabId和code有效
-        //         if (typeof tabId === 'number' && typeof code === 'string') {
-        //             chrome.webNavigation.getAllFrames({tabId: tabId}, function(frames) {
-        //                 for (let frame of frames) {
-        //                     console.log(`Frame ID: ${frame.frameId} with URL: ${frame.url}`);
-        //                 }
-        //             });
-        //             // 在指定的tabId上执行脚本
-        //             chrome.scripting.executeScript({
-        //                 target: {tabId: tabId},
-        //                 // function: getTitle,
-        //                 function: log,
-        //                 args: [code]
-        //             }, (injectionResults) => {
-        //                 // 处理脚本执行的结果，如日志记录等
-        //                 console.log('Script executed:', injectionResults);
-        //             });
-        //         } else {
-        //             console.error('Received malformed message:', message);
-        //         }
-        //     });
-        // } catch (err) {
-        //     console.error('Error parsing message from WebSocket:', err);
-        // }
     }
-}
+}
-
-function getTitle() {
-    return document.title;
-}
-
-function log(message) {
-    return console.log(message);
-}
-
-// chrome.tabs.query({}, (tabs) => {
-//     tabs.forEach(function (tab) {
-//         console.log(tab.id); // 输出每个标签页的ID
-//     });
-// })

src/App.tsx

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

src/components/Contro.tsx

@@ -10,7 +10,6 @@ import {
 } from "@assets/icon/icon";
 import {wsc} from "@network/chrome";
 import "./Contro.css";
-import {ActionType} from "@network/chrome";
 
 interface ControProps {
 }
@@ -39,7 +38,7 @@ export const Contro: React.FC<ControProps> = () => {
         }
 
         wsc.onWSCMessage((message) => {
-            if (message.action === ActionType.STATUS) {
+            if (message.action === wsc.ActionType.STATUS) {
                 if (message.connected === false) {
                     handleConnectFail();
                 } else {

src/components/EvalInTab.tsx

@@ -2,7 +2,6 @@ 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 "@network/chrome";
 
 interface EvalInTabProps {
 }
@@ -14,7 +13,7 @@ export const EvalInTab: React.FC<EvalInTabProps> = () => {
 
     useEffect(() => {
         wsc.onWSCMessage((message) => {
-            if (message.action === ActionType.TO_EXTENSION_PAGE) {
+            if (message.action === wsc.ActionType.TO_EXTENSION_PAGE) {
                 console.log("res:", message.result);
                 alert("from content script: " + JSON.stringify(message.result));
             }
@@ -23,10 +22,10 @@ export const EvalInTab: React.FC<EvalInTabProps> = () => {
 
     const handleClick = async () => {
         try {
-            const tabId = await wsc.getTabId();
+            const [tab] = await wsc.getTab();
             await chrome.runtime.sendMessage({
-                action: ActionType.INJECT_SCRIPT,
+                action: wsc.ActionType.INJECT_SCRIPT,
-                tabId: tabId,
+                tabId: tab.id,
                 value: {mode: "CONTENT_CALL_FUNCTION", fn_name: funcName, args: inputArgsData},
             });
         } catch (error) {
@@ -40,10 +39,10 @@ export const EvalInTab: React.FC<EvalInTabProps> = () => {
 
     const handleEvalCodeClick = async () => {
         try {
-            const tabId = await wsc.getTabId();
+            const [tab] = await wsc.getTab();
             await chrome.runtime.sendMessage({
-                action: ActionType.INJECT_SCRIPT,
+                action: wsc.ActionType.INJECT_SCRIPT,
-                tabId: tabId,
+                tabId: tab.id,
                 value: {mode: "CONTENT_EVAL_CODE", code: code},
             });
         } catch (error) {

src/components/Proxifier.tsx

@@ -268,13 +268,13 @@ export const Proxifier: React.FC<ProxifierProps> = () => {
                   item.port === ""
                 }
                 onChange={(checked: boolean) => {
-                  wsc.clearproxy();
+                  wsc.clearProxy();
                   const copyProxyList = structuredClone(proxyList);
                   copyProxyList.forEach((i) => {
                     if (i.id === item.id) {
                       i.open = checked;
                       if (checked) {
-                        wsc.setproxy(item.scheme, item.host, Number(item.port));
+                        wsc.setProxy(item.scheme, item.host, Number(item.port));
                       }
                     } else {
                       i.open = false;

src/network/chrome.ts

@@ -1,15 +1,16 @@
-export enum ActionType {
-    CONNECT = 'connect',
-    DISCONNECT = 'disconnect',
-    STATUS = 'status',
-    PROXY_STATUS = 'proxy_status',
-    SET_PROXY = 'set_proxy',
-    CLEAR_PROXY = 'clear_proxy',
-    INJECT_SCRIPT = 'yakit_inject_script',
-    TO_EXTENSION_PAGE = "yakit_to_extension_page",
-}
-
 export namespace wsc {
+    export enum ActionType {
+        CONNECT = 'connect',
+        DISCONNECT = 'disconnect',
+        STATUS = 'status',
+        PROXY_STATUS = 'proxy_status',
+        SET_PROXY = 'set_proxy',
+        CLEAR_PROXY = 'clear_proxy',
+        INJECT_SCRIPT = 'yakit_inject_script',
+        // 用于接收来自content script的消息
+        TO_EXTENSION_PAGE = "yakit_to_extension_page",
+    }
+
     export function connect(port: number, host?: string) {
         chrome.runtime.sendMessage({
             action: ActionType.CONNECT,
@@ -44,23 +45,16 @@ export namespace wsc {
         chrome.runtime.onMessage.addListener(onMessage)
     }
 
-    export function setproxy(scheme: string, host: string, port: number) {
+    export function setProxy(scheme: string, host: string, port: number) {
         chrome.runtime.sendMessage({action: ActionType.SET_PROXY, scheme, host, port})
     }
 
-    export function clearproxy() {
+    export function clearProxy() {
         chrome.runtime.sendMessage({action: ActionType.CLEAR_PROXY})
     }
 
-    export function getTabId() {
+    // 获取当前tab
-        return new Promise<number>((resolve, reject) => {
+    export async function getTab() {
-            chrome.tabs.query({active: true, currentWindow: true}, function (tabs) {
+        return chrome.tabs.query({active: true, currentWindow: true})
-                if (tabs.length) {
-                    resolve(tabs[0].id);
-                } else {
-                    reject('No active tab found');
-                }
-            });
-        });
     }
 }