From dd1b2a9513e95ee6df3a43fbe1b60824fa5201e5 Mon Sep 17 00:00:00 2001 From: go0p Date: Tue, 14 May 2024 23:02:40 +0800 Subject: [PATCH] eval done && fix findDOMNode warning --- package.json | 2 +- public/background.js | 35 ++++++++++++++++------------ public/content.js | 27 +++++++++++++++++++++- public/inject.js | 16 +++++++++---- public/socket.js | 45 +----------------------------------- src/App.tsx | 2 +- src/components/Contro.tsx | 3 +-- src/components/EvalInTab.tsx | 15 ++++++------ src/components/Proxifier.tsx | 4 ++-- src/network/chrome.ts | 40 ++++++++++++++------------------ 10 files changed, 87 insertions(+), 102 deletions(-) diff --git a/package.json b/package.json index aa03281..4a19aa0 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.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", diff --git a/public/background.js b/public/background.js index cebbcf9..868273a 100644 --- a/public/background.js +++ b/public/background.js @@ -50,24 +50,29 @@ chrome.runtime.onMessage.addListener(function (msg, sender, sendResponse) { }); break; case ActionType.INJECT_SCRIPT: - chrome.scripting.executeScript({ - target: {tabId: msg.tabId}, - files: ['content.js'] - }).then(() => { - chrome.tabs.sendMessage(msg.tabId, - {type: ActionType.INJECT_SCRIPT, value: msg.value} - ).then(response => { - console.log("response", response) + (async () => { + try { + // 注入 JS 脚本 + await chrome.scripting.executeScript({ + target: {tabId: msg.tabId}, + files: ['content.js'] + }); + + // 发送消息 + 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 => { - console.error('Script injection failed:', err); - }); + } catch (err) { + console.error('Script or CSS injection failed:', err); + } + })(); break - case ActionType.ECHO: - console.log("Echo ", msg.result) } }) diff --git a/public/content.js b/public/content.js index 29eb0bb..fc46a8c 100644 --- a/public/content.js +++ b/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); diff --git a/public/inject.js b/public/inject.js index 6da0c39..ed5c0ab 100644 --- a/public/inject.js +++ b/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}, '*'); - } }); })(); diff --git a/public/socket.js b/public/socket.js index 400054f..5529545 100644 --- a/public/socket.js +++ b/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 -// }); -// }) \ No newline at end of file +} \ No newline at end of file diff --git a/src/App.tsx b/src/App.tsx index 3d91c4f..d01344b 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -15,7 +15,7 @@ function App() { }} >
- + {/**/} diff --git a/src/components/Contro.tsx b/src/components/Contro.tsx index fe50e85..4f92995 100644 --- a/src/components/Contro.tsx +++ b/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 = () => { } wsc.onWSCMessage((message) => { - if (message.action === ActionType.STATUS) { + if (message.action === wsc.ActionType.STATUS) { if (message.connected === false) { handleConnectFail(); } else { diff --git a/src/components/EvalInTab.tsx b/src/components/EvalInTab.tsx index 5e1027a..f473627 100644 --- a/src/components/EvalInTab.tsx +++ b/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 = () => { 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 = () => { const handleClick = async () => { try { - const tabId = await wsc.getTabId(); + const [tab] = await wsc.getTab(); await chrome.runtime.sendMessage({ - action: ActionType.INJECT_SCRIPT, - tabId: tabId, + action: wsc.ActionType.INJECT_SCRIPT, + tabId: tab.id, value: {mode: "CONTENT_CALL_FUNCTION", fn_name: funcName, args: inputArgsData}, }); } catch (error) { @@ -40,10 +39,10 @@ export const EvalInTab: React.FC = () => { const handleEvalCodeClick = async () => { try { - const tabId = await wsc.getTabId(); + const [tab] = await wsc.getTab(); await chrome.runtime.sendMessage({ - action: ActionType.INJECT_SCRIPT, - tabId: tabId, + action: wsc.ActionType.INJECT_SCRIPT, + tabId: tab.id, value: {mode: "CONTENT_EVAL_CODE", code: code}, }); } catch (error) { diff --git a/src/components/Proxifier.tsx b/src/components/Proxifier.tsx index 05c49d9..3d3d26e 100644 --- a/src/components/Proxifier.tsx +++ b/src/components/Proxifier.tsx @@ -268,13 +268,13 @@ export const Proxifier: React.FC = () => { 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; diff --git a/src/network/chrome.ts b/src/network/chrome.ts index 89f248f..855b960 100644 --- a/src/network/chrome.ts +++ b/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() { - return new Promise((resolve, reject) => { - chrome.tabs.query({active: true, currentWindow: true}, function (tabs) { - if (tabs.length) { - resolve(tabs[0].id); - } else { - reject('No active tab found'); - } - }); - }); + // 获取当前tab + export async function getTab() { + return chrome.tabs.query({active: true, currentWindow: true}) } }