调用active tab js func

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.15.3",
+    "antd": "^5.17.0",
     "babel-jest": "^27.4.2",
     "babel-plugin-named-asset-import": "^0.3.8",
     "babel-preset-react-app": "^10.0.1",

public/background.js

@@ -81,16 +81,15 @@ const pageFunction = (code) => {
 //     });
 // });
 
-// chrome.runtime.onConnect.addListener(function (port) {
+chrome.runtime.onConnect.addListener(function (port) {
-//     console.assert(port.name === "content-script");
+    console.assert(port.name === "content-to-ex");
-//     port.onMessage.addListener(function (msg) {
+    port.onMessage.addListener(function (msg) {
-//         console.log("on connect", msg)
+        console.log("[content-to-ex]", msg)
-//     });
+    });
-//     port.onDisconnect.addListener(function () {
+    port.onDisconnect.addListener(function () {
-//         console.error("Disconnected from port.");
+        console.error("[content-to-ex] Disconnected from port.");
-//     });
+    });
-//     // port.postMessage({action: "TEST POST MESSAGE"});
+    // port.postMessage({action: "TEST POST MESSAGE"});
-//
+});
-// });
 
 

public/content.js

@@ -1,14 +1,15 @@
 console.log("Loaded content.js")
 
 window.addEventListener("message", (event) => {
-    if (event.data.type && (event.data.type === "TEST")) {
+    console.log(event)
-        console.log(event)
+    if (event.data.yakitex.msg && (event.data.yakitex.msg.type === "TEST")) {
-        const name = event.data.fn_name
+        const name = event.data.yakitex.msg.fn_name
-        const args = event.data.args
+        const args = event.data.yakitex.msg.args
         const a = (fn, args) => {
             return window[fn](args)
         }
         const zz = a(name, args)
+        console.log("res ", zz)
         window.postMessage({type: "FROM_PAGE", text: zz}, "*")
     }
-}, );
+},);

public/inject.js

@@ -1,54 +1,55 @@
-/**
+function injectScript(src, id, message) {
- * injectScript - Inject internal script to available access to the `window`
+    return new Promise((resolve) => {
- *
+        // Inject a script tag into the page to access methods of the window object
- * @param  {type} file_path Local path of the internal script.
+        const script = document.createElement('script')
- * @param  {type} tag The tag as string, where the script will be append (default: 'body').
- * @see    {@link http://stackoverflow.com/questions/20499994/access-window-variable-from-content-script}
- */
-function injectScript(file_path, tag) {
-    const node = document.getElementsByTagName(tag)[0];
-    if (!node) {
-        console.error('The "' + tag + '" tag is not available in the document.');
-        return;
-    }
-    // 移除之前的脚本
-    const oldScript = document.getElementById('yakit-injected-script');
-    if (oldScript) {
-        node.removeChild(oldScript);
-    }
-    const script = document.createElement('script');
-    script.setAttribute('type', 'text/javascript');
-    script.setAttribute('src', file_path);
-    script.setAttribute('id', 'yakit-injected-script');
 
-    node.appendChild(script);
+        script.onload = () => {
+            const onMessage = ({data}) => {
+                console.log(data)
+                if (!data.yakitex || !data.yakitex.msg) {
+                    return
+                }
+
+                window.removeEventListener('message', onMessage)
+
+                resolve(data.yakitex.msg)
+
+                script.remove()
+            }
+
+            window.addEventListener('message', onMessage)
+
+            window.postMessage({
+                yakitex: message,
+            })
+        }
+
+        script.setAttribute('src', chrome.runtime.getURL(src))
+
+        document.body.appendChild(script)
+    })
 }
 
-// document.addEventListener('DOMContentLoaded', function () {
+chrome.runtime.onConnect.addListener(function (port) {
-injectScript(chrome.runtime.getURL('content.js'), 'body');
+    console.assert(port.name === "ex-to-content");
+    port.onMessage.addListener(function (msg) {
+        injectScript('content.js', 'sender', {yakitex: "123", id: "yakit", msg: msg}).then((res) => {
+            window.addEventListener("message", (event) => {
+                // if (event.source !== window) {
+                //     return;
+                // }
+                if (event.data.type && (event.data.type === "FROM_PAGE")) {
+                    console.log(event)
+                    const port2 = chrome.runtime.connect({name: "content-to-ex"});
+                    port2.postMessage(event.data.text);
+                    port2.disconnect();
+                }
+            },);
 
-const port = chrome.runtime.connect({name: "content-script"});
+        })
+    });
 
-port.onDisconnect.addListener(function () {
+    port.onDisconnect.addListener(function () {
-    console.error("Disconnected from port.");
+        console.error("[ex-to-content] Disconnected from port.");
-});
+    });
-
+});
-port.onMessage.addListener(function (msg) {
-    console.log("我听到了成功的回响 :", msg);
-    window.postMessage(msg, "*")
-});
-
-window.addEventListener("message", (event) => {
-    // We only accept messages from ourselves
-    if (event.source !== window) {
-        return;
-    }
-    if (event.data.type && (event.data.type === "FROM_PAGE")) {
-        console.log(event)
-        console.log("Content script received: " + event.data.text);
-        if (port && port.postMessage) {
-            port.postMessage(event.data.text);
-        }
-    }
-}, );
-// });

src/App.tsx

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

src/components/EvalInTab.tsx

@@ -10,26 +10,27 @@ export const EvalInTab: React.FC<EvalInTabProps> = () => {
     const [inputData, setInputData] = useState("");
     const [isScriptInjected, setIsScriptInjected] = useState(false);
 
-    useEffect(() => {
+    // useEffect(() => {
-        const onConnectListener = (port: chrome.runtime.Port) => {
+    //     // const onConnectListener = (port: chrome.runtime.Port) => {
-            console.assert(port.name === "content-script");
+    //     //     console.assert(port.name === "content-script");
-            port.onMessage.addListener(function (msg) {
+    //     //     port.onMessage.addListener(function (msg) {
-                console.log("on connect", msg)
+    //     //         console.log("on connect", msg)
-            });
+    //     //     });
-            port.onDisconnect.addListener(function () {
+    //     //     port.onDisconnect.addListener(function () {
-                console.error("Disconnected from port.");
+    //     //         console.error("Disconnected from port.");
-            });
+    //     //     });
-            port.postMessage({type: "TEST", fn_name: "Encrypt", args: inputData});
+    //     //     port.postMessage({type: "TEST", fn_name: "Encrypt", args: inputData});
-        };
+    //     // };
-
+    //     //
-        chrome.runtime.onConnect.addListener(onConnectListener);
+    //     // chrome.runtime.onConnect.addListener(onConnectListener);
-
+    //
-        // return () => {
+    //     // return () => {
-        //     chrome.runtime.onConnect.removeListener(onConnectListener);
+    //     //     chrome.runtime.onConnect.removeListener(onConnectListener);
-        // };
+    //     // };
-    }, [inputData]);
+    // }, [inputData]);
 
     const handleClick = async () => {
+        const tabId = await wsc.getTabId();
         if (!isScriptInjected) {
             chrome.scripting.executeScript({
                 target: {tabId: await wsc.getTabId()},
@@ -37,10 +38,20 @@ export const EvalInTab: React.FC<EvalInTabProps> = () => {
             }).then(injectResults => {
                 console.log(injectResults)
                 setIsScriptInjected(true);
+
+                const port = chrome.tabs.connect(tabId, {name: "ex-to-content"})
+                port.postMessage({type: "TEST", fn_name: "Encrypt", args: inputData});
+                port.onMessage.addListener(function (msg) {
+                    console.log(msg)
+                })
             });
         }
         console.log("injected script")
-
+        const port = chrome.tabs.connect(tabId, {name: "ex-to-content"})
+        port.postMessage({type: "TEST", fn_name: "Encrypt", args: inputData});
+        port.onMessage.addListener(function (msg) {
+            console.log(msg)
+        })
     };
 
     const handleInputChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {