diff --git a/package.json b/package.json index 316eef9..aa03281 100644 --- a/package.json +++ b/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", diff --git a/public/background.js b/public/background.js index 0b92d99..a2764e2 100644 --- a/public/background.js +++ b/public/background.js @@ -81,16 +81,15 @@ const pageFunction = (code) => { // }); // }); -// chrome.runtime.onConnect.addListener(function (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({action: "TEST POST MESSAGE"}); -// -// }); +chrome.runtime.onConnect.addListener(function (port) { + console.assert(port.name === "content-to-ex"); + port.onMessage.addListener(function (msg) { + console.log("[content-to-ex]", msg) + }); + port.onDisconnect.addListener(function () { + console.error("[content-to-ex] Disconnected from port."); + }); + // port.postMessage({action: "TEST POST MESSAGE"}); +}); diff --git a/public/content.js b/public/content.js index 1e13876..252852d 100644 --- a/public/content.js +++ b/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) - const name = event.data.fn_name - const args = event.data.args + console.log(event) + if (event.data.yakitex.msg && (event.data.yakitex.msg.type === "TEST")) { + const name = event.data.yakitex.msg.fn_name + 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}, "*") } -}, ); \ No newline at end of file +},); \ No newline at end of file diff --git a/public/inject.js b/public/inject.js index a4fed7a..3dde74f 100644 --- a/public/inject.js +++ b/public/inject.js @@ -1,54 +1,55 @@ -/** - * injectScript - Inject internal script to available access to the `window` - * - * @param {type} file_path Local path of the internal 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'); +function injectScript(src, id, message) { + return new Promise((resolve) => { + // Inject a script tag into the page to access methods of the window object + const script = document.createElement('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 () { -injectScript(chrome.runtime.getURL('content.js'), 'body'); +chrome.runtime.onConnect.addListener(function (port) { + 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 () { - console.error("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); - } - } -}, ); -// }); \ No newline at end of file + port.onDisconnect.addListener(function () { + console.error("[ex-to-content] Disconnected from port."); + }); +}); \ No newline at end of file diff --git a/src/App.tsx b/src/App.tsx index 61370e7..795418f 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -17,8 +17,8 @@ function App() { }} >
- - + {/**/} + {/**/} diff --git a/src/components/EvalInTab.tsx b/src/components/EvalInTab.tsx index fffab70..a6b47ec 100644 --- a/src/components/EvalInTab.tsx +++ b/src/components/EvalInTab.tsx @@ -10,26 +10,27 @@ export const EvalInTab: React.FC = () => { 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]); + // 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 = 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 = () => { }).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) => {