From 27f4884216c392da056af1e67ce1d786ba198098 Mon Sep 17 00:00:00 2001 From: xu_yanfeng Date: Tue, 24 Dec 2024 21:09:13 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E8=BE=93=E5=87=BA=E6=97=A5?= =?UTF-8?q?=E5=BF=97=E7=9A=84=E9=A2=9C=E8=89=B2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- cc-inspector/src/core/util.ts | 15 --- .../src/scripts/background/portMan.ts | 11 +- .../src/scripts/background/portMgr.ts | 10 +- cc-inspector/src/scripts/content.ts | 110 +++++++++--------- cc-inspector/src/scripts/inject/index.ts | 10 +- cc-inspector/src/scripts/terminal.ts | 40 +++++-- cc-inspector/src/views/devtools/bridge.ts | 69 +++++++++++ .../src/views/devtools/connectBackground.ts | 69 ----------- cc-inspector/src/views/devtools/index.vue | 28 +++-- .../src/views/devtools/register-panel.ts | 4 +- cc-inspector/src/views/devtools/test/test.vue | 4 +- .../src/views/devtools/ui/property-group.vue | 5 +- .../src/views/devtools/ui/ui-prop.vue | 5 +- 13 files changed, 199 insertions(+), 181 deletions(-) create mode 100644 cc-inspector/src/views/devtools/bridge.ts delete mode 100644 cc-inspector/src/views/devtools/connectBackground.ts diff --git a/cc-inspector/src/core/util.ts b/cc-inspector/src/core/util.ts index 63ad443..487f7be 100644 --- a/cc-inspector/src/core/util.ts +++ b/cc-inspector/src/core/util.ts @@ -1,18 +1,3 @@ -export function injectScript(url: string) { - if (chrome && chrome.runtime && chrome.runtime.getURL) { - let content = chrome.runtime.getURL(url) - const script = document.createElement("script") - script.setAttribute("type", "text/javascript") - script.setAttribute("src", content) - script.onload = function () { - document.head.removeChild(script); - } - document.head.appendChild(script) - console.log(`inject script success: ${content}`); - } else { - console.log("inject script failed") - } -} interface LogOptions { data: any; diff --git a/cc-inspector/src/scripts/background/portMan.ts b/cc-inspector/src/scripts/background/portMan.ts index 8e070b2..68fe092 100644 --- a/cc-inspector/src/scripts/background/portMan.ts +++ b/cc-inspector/src/scripts/background/portMan.ts @@ -20,19 +20,20 @@ export abstract class PortMan { public onDisconnect: (port: chrome.runtime.Port) => void | null = null; public onMessage: (data: PluginEvent) => void | null = null; public terminal: Terminal = null; + public timestamp: number = 0; constructor(tab: chrome.tabs.Tab, port: chrome.runtime.Port) { + this.timestamp = Date.now(); this.port = port; this.tab = tab; this.name = port.name; this.id = tab.id; this.url = tab.url; this.title = tab.title; - this.terminal = new Terminal(`Port-${this.name}/ID-${this.id}`); - port.onMessage.addListener((data: any, sender: any) => { - const str = `${sender.name}\n${JSON.stringify(data)}` - console.log(... this.terminal.green(str)); + this.terminal = new Terminal(`Port-${this.name}`); + port.onMessage.addListener((data: any, port: chrome.runtime.Port) => { + console.log(... this.terminal.message(JSON.stringify(data))); // 如果多个页面都监听 onMessage 事件，对于某一次事件只有第一次调用 sendResponse() 能成功发出回应，所有其他回应将被忽略。 - // sender.postMessage(data); + // port.postMessage(data); const cls = PluginEvent.create(data); if (this.onMessage) { this.onMessage(cls); diff --git a/cc-inspector/src/scripts/background/portMgr.ts b/cc-inspector/src/scripts/background/portMgr.ts index 1cd67ed..36f788f 100644 --- a/cc-inspector/src/scripts/background/portMgr.ts +++ b/cc-inspector/src/scripts/background/portMgr.ts @@ -70,7 +70,7 @@ export class PortMgr { id: port.id, url: port.url }); - str.push(`[${i + 1}] name:${port.name}, id:${port.id}, url:${port.url}`); + str.push(`[${i + 1}] time:${new Date(port.timestamp).toLocaleString()}, name:${port.name}, id:${port.id}, url:${port.url}`); } if (arr.length) { @@ -92,9 +92,11 @@ export class PortMgr { this.getCurrentUseContent()?.postMessage(data); } sendDevtoolMsg(data: PluginEvent) { - const portMan = this.portArray.find(el => el.isDevtoolsPort()); - if (portMan) { - portMan.port.postMessage(data); + const portManArray = this.portArray.filter(el => el.isDevtoolsPort()); + if (portManArray.length) { + portManArray.forEach(portMan => { + portMan.port.postMessage(data); + }) } else { console.log('not find devtools port'); } diff --git a/cc-inspector/src/scripts/content.ts b/cc-inspector/src/scripts/content.ts index d2713ee..829bdd9 100644 --- a/cc-inspector/src/scripts/content.ts +++ b/cc-inspector/src/scripts/content.ts @@ -2,61 +2,67 @@ // 但是不共享js,要想访问页面js,只能通过注入的方式 import { ChromeConst } from "cc-plugin/src/chrome/const"; import { Msg, Page, PluginEvent } from "../core/types"; -import { injectScript } from "../core/util"; -injectScript(ChromeConst.script.inject); +import { Terminal } from "./terminal"; -class Content { - private connect: chrome.runtime.Port | null = null; - - constructor() { - console.log("init content"); - // 接受来自inject.js的消息数据,然后中转到background.js - window.addEventListener("message", (event) => { - let data: PluginEvent = event.data; - if (PluginEvent.check(data, Page.Inject, Page.Content)) { - console.log("[Window-Message]: ", data); - PluginEvent.reset(data, Page.Content, Page.Devtools) - this.connect?.postMessage(data) - } - }, false); - } - - // 和background.js保持长连接通讯，background和content的交互也要通过这个链接进行通讯 - private connectToBackground() { - this.connect = chrome.runtime.connect({ name: Page.Content }) - this.connect.onMessage.addListener((data: PluginEvent, sender) => { - if (PluginEvent.check(data, Page.Background, Page.Content)) { - // console.log(`%c[Connect-Message] ${JSON.stringify(data)}`, "color:green;") - console.log("[Connect-Message]: ", data); - PluginEvent.reset(data, Page.Content, Page.Inject) - window.postMessage(data, "*"); - } - }) - } - - private sendMessageToBackground(data: PluginEvent) { - if (this.connect) { - this.connect.postMessage(data); - } - } - - run() { - this.connectToBackground(); - this.checkGame(); - } - - private checkGame() { - let gameCanvas = document.querySelector("#GameCanvas"); - if (!gameCanvas) { - let sendData = new PluginEvent(Page.Content, Page.Devtools, Msg.Support, { - support: false, - msg: "未发现GameCanvas,不支持调试游戏!" - }) - this.sendMessageToBackground(sendData) +export function injectScript(url: string) { + if (chrome && chrome.runtime && chrome.runtime.getURL) { + let content = chrome.runtime.getURL(url) + const script = document.createElement("script") + script.setAttribute("type", "text/javascript") + script.setAttribute("src", content) + script.onload = function () { + document.head.removeChild(script); } + document.head.appendChild(script) + console.log(...terminal.green(`inject script success: ${content}`)); + } else { + console.log(...terminal.red("inject script failed")); } } +const terminal = new Terminal(Page.Content); +console.log(...terminal.init()); +// 和background.js保持长连接通讯，background和content的交互也要通过这个链接进行通讯 +let connect: chrome.runtime.Port | null = chrome.runtime.connect({ name: Page.Content }) +connect.onDisconnect.addListener(() => { + console.log(...terminal.disconnect("")); + connect = null +}) +connect.onMessage.addListener((data: PluginEvent, sender: chrome.runtime.Port) => { + if (PluginEvent.check(data, Page.Background, Page.Content)) { + console.log(...terminal.message(JSON.stringify(data))); + PluginEvent.reset(data, Page.Content, Page.Inject) + window.postMessage(data, "*"); + } +}) +// 接受来自inject.js的消息数据,然后中转到background.js +window.addEventListener("message", (event) => { + let data: PluginEvent = event.data; + if (PluginEvent.check(data, Page.Inject, Page.Content)) { + console.log(...terminal.message(JSON.stringify(data))); + PluginEvent.reset(data, Page.Content, Page.Devtools) + if (connect) { + connect.postMessage(data) + } else { + console.log(...terminal.log(`connect is null`)); + debugger; + } + } +}, false); -const content = new Content(); -content.run(); +function checkGame() { + let gameCanvas = document.querySelector("#GameCanvas"); + const sendData = new PluginEvent(Page.Content, Page.Devtools, Msg.Support, { + support: !!gameCanvas, + msg: "未发现GameCanvas,不支持调试游戏!" + }) + if (connect) { + connect.postMessage(sendData) + } else { + console.log(...terminal.log(`connect is null`)); + debugger; + } +} + +injectScript(ChromeConst.script.inject); +checkGame(); \ No newline at end of file diff --git a/cc-inspector/src/scripts/inject/index.ts b/cc-inspector/src/scripts/inject/index.ts index 869887d..a5a0ff7 100644 --- a/cc-inspector/src/scripts/inject/index.ts +++ b/cc-inspector/src/scripts/inject/index.ts @@ -5,6 +5,7 @@ import { ArrayData, BoolData, ColorData, DataType, EngineData, Group, ImageData, import { getValue, trySetValueWithConfig } from "./setValue"; import { BuildArrayOptions, BuildImageOptions, BuildObjectOptions, BuildVecOptions } from "./types"; import { isHasProperty } from "./util"; +import { Terminal } from "../terminal"; declare const cc: any; @@ -23,9 +24,9 @@ class CCInspector { } }, 300); } - + private terminal = new Terminal('Inject', 'blue', 'gray'); init() { - console.log("cc-inspector init ~~~"); + console.log(...this.terminal.init()); this.watchIsCocosGame(); window.addEventListener("message", (event) => { // 接受来自content的事件，有可能也会受到其他插件的 @@ -34,10 +35,7 @@ class CCInspector { } let pluginEvent: PluginEvent = event.data; if (PluginEvent.check(pluginEvent, Page.Content, Page.Inject)) { - console.log( - `%c[Inject] ${JSON.stringify(pluginEvent)}`, - "color:green;" - ); + console.log(...this.terminal.message(JSON.stringify(pluginEvent))); PluginEvent.finish(pluginEvent); switch (pluginEvent.msg) { case Msg.Support: { diff --git a/cc-inspector/src/scripts/terminal.ts b/cc-inspector/src/scripts/terminal.ts index 42e8399..bc1185f 100644 --- a/cc-inspector/src/scripts/terminal.ts +++ b/cc-inspector/src/scripts/terminal.ts @@ -1,36 +1,54 @@ export class Terminal { - color = 'red'; - background = 'yellow'; + /** + * 标签 + */ tag = 'terminal'; - constructor(tag: string, color: string = 'red', background: string = 'yellow') { - this.color = color; - this.background = background; + /** + * 标签的颜色 + */ + tagColor = 'red'; + /** + * 标签的背景色 + */ + tagBackground = 'yellow'; + /** + * 日志文本的颜色 + */ + txtColor = 'black'; + + constructor(tag: string, tagColor: string = 'red', tagBackground: string = 'yellow') { + this.tagColor = tagColor; + this.tagBackground = tagBackground; this.tag = tag; } init(): string[] { return this.log(`init`); } public log(message: string, newline: boolean = false): string[] { - return [`%c${this.tag}%c${newline ? '\n' : ''}${message}`, `color:${this.color};background:${this.background};padding:0 4px`, "color:black;margin-left:5px"]; + return [`%c${this.tag}%c${newline ? '\n' : ''}${message}`, `color:${this.tagColor};background:${this.tagBackground};padding:0 4px`, `color:${this.txtColor};margin-left:5px`]; } - - public blue(message: string): string[] { - this.color = 'blue'; + this.txtColor = 'blue'; return this.log(message); } public green(message: string): string[] { - this.color = 'green'; + this.txtColor = 'green'; return this.log(message); } public red(message: string): string[] { - this.color = 'red'; + this.txtColor = 'red'; return this.log(message); } + message(msg: string): string[] { + this.txtColor = 'black'; + return this.log(`[message] ${msg}`); + } connect(msg: string): string[] { + this.txtColor = 'black'; return this.log(`[connect] ${msg}`); } disconnect(msg: string): string[] { + this.txtColor = 'black'; return this.log(`[disconnect] ${msg}`); } } diff --git a/cc-inspector/src/views/devtools/bridge.ts b/cc-inspector/src/views/devtools/bridge.ts new file mode 100644 index 0000000..c58c98a --- /dev/null +++ b/cc-inspector/src/views/devtools/bridge.ts @@ -0,0 +1,69 @@ +import CCP from "cc-plugin/src/ccp/entry-render"; +import { Msg, Page, PluginEvent } from "../../core/types"; +import { TestClient, testServer, TestServer } from "./test/server"; +import { Terminal } from "../../scripts/terminal"; +export type BridgeCallback = (data: PluginEvent, sender: chrome.runtime.Port) => void; +if (chrome.devtools) { + console.log("chrome devtools") +} +class Bridge implements TestClient { + /** + * 把callback保存为变量，方便测试 + */ + public onMessage: BridgeCallback | null = null; + + /** + * 和background建立的链接 + */ + private connect: chrome.runtime.Port | null = null; + private terminal = new Terminal(Page.Devtools); + constructor() { + this.init(); + } + + private init() { + if (CCP.Adaptation.Env.isChromeRuntime) { + this.connect = chrome.runtime.connect({ name: Page.Devtools }); + this.connect.onDisconnect.addListener(() => { + console.log(...this.terminal.disconnect("")) + this.connect = null; + }) + + this.connect.onMessage.addListener((event, sender: chrome.runtime.Port) => { + console.log(...this.terminal.message(JSON.stringify(event))); + const data = PluginEvent.create(event); + if (this.onMessage) { + this.onMessage(data, sender); + } + }); + + } else { + testServer.add(this); + } + } + + recv(event: PluginEvent): void { + this.doMessage(event); + } + doMessage(data: PluginEvent) { + if (this.onMessage) { + this.onMessage(data, null); + } + } + send(msg: Msg, data?: any) { + if (CCP.Adaptation.Env.isChromeDevtools) { + if (this.connect) { + let sendData = new PluginEvent(Page.Devtools, Page.Background, msg, data) + this.connect.postMessage(sendData) + } else { + console.warn(...this.terminal.log("重新和background建立链接")) + this.init(); + this.send(msg, data) + } + } else { + testServer.recv(msg, data); + } + } +} + +export const bridge = new Bridge(); diff --git a/cc-inspector/src/views/devtools/connectBackground.ts b/cc-inspector/src/views/devtools/connectBackground.ts deleted file mode 100644 index 27905d4..0000000 --- a/cc-inspector/src/views/devtools/connectBackground.ts +++ /dev/null @@ -1,69 +0,0 @@ -import CCP from "cc-plugin/src/ccp/entry-render"; -import { Msg, Page, PluginEvent } from "../../core/types"; -import { TestClient, testServer, TestServer } from "./test/server"; -export type BackgroundCallback = (data: PluginEvent, sender: any) => void; -if (chrome.devtools) { - console.log("chrome devtools") -} -class ConnectBackground implements TestClient { - connect: chrome.runtime.Port | null = null; - constructor() { - this._initConnect(); - } - - private _initConnect() { - if (CCP.Adaptation.Env.isChromeRuntime) { - this.connect = chrome.runtime.connect({ name: Page.Devtools }); - this.connect.onDisconnect.addListener(() => { - console.log(`%c[Connect-Dis]`, "color:red;") - this.connect = null; - }) - } else { - testServer.add(this); - } - } - /** - * 把callback保存为变量，方便测试 - */ - private callback: BackgroundCallback | null = null; - onBackgroundMessage(cb: BackgroundCallback) { - this.callback = cb; - if (this.connect) { - this.connect.onMessage.addListener((event, sender) => { - cb && cb(event, sender) - }); - } - } - recv(event: PluginEvent): void { - this.doCallback(event); - } - doCallback(data: PluginEvent) { - if (this.callback) { - this.callback(data, null); - } - } - sendMsgToContentScript(msg: Msg, data?: any) { - if (CCP.Adaptation.Env.isChromeDevtools) { - this.postMessageToBackground(msg, data); - } else { - testServer.recv(msg, data); - } - } - postMessageToBackground(msg: Msg, data?: any) { - if (CCP.Adaptation.Env.isChromeDevtools) { - if (this.connect) { - let sendData = new PluginEvent(Page.Devtools, Page.Background, msg, data) - this.connect.postMessage(sendData) - } else { - console.warn("重新和background建立链接") - this._initConnect(); - this.postMessageToBackground(msg, data) - } - } else { - testServer.recv(msg, data); - } - } - -} - -export const connectBackground = new ConnectBackground(); diff --git a/cc-inspector/src/views/devtools/index.vue b/cc-inspector/src/views/devtools/index.vue index 6959ab7..5e57f1d 100644 --- a/cc-inspector/src/views/devtools/index.vue +++ b/cc-inspector/src/views/devtools/index.vue @@ -48,7 +48,7 @@ import { defineComponent, nextTick, onMounted, PropType, reactive, Ref, ref, toR import PluginConfig from "../../../cc-plugin.config"; import { Msg, Page, PluginEvent } from "../../core/types"; import Bus, { BusMsg } from "./bus"; -import { connectBackground } from "./connectBackground"; +import { bridge } from "./bridge"; import { EngineData, FrameDetails, Info, NodeInfoData, ObjectData, ObjectItemRequestData, TreeData } from "./data"; import { appStore, RefreshType } from "./store"; import Test from "./test/test.vue"; @@ -274,12 +274,12 @@ export default defineComponent({ } }; // 接收来自background.js的消息数据 - connectBackground.onBackgroundMessage((data: PluginEvent, sender: any) => { + bridge.onMessage = (data: PluginEvent, sender: any) => { if (!data) { return; } - if (data.target === Page.Devtools) { - console.log("[Devtools]", data); + debugger; + if (data.isTargetDevtools()) { PluginEvent.finish(data); const { msg } = data; if (msg) { @@ -290,8 +290,10 @@ export default defineComponent({ console.warn(`没有${msg}消息的函数`); } } + } else { + debugger; } - }); + }; } _initChromeRuntimeConnect(); window.addEventListener( @@ -310,13 +312,13 @@ export default defineComponent({ return; } requestList.push({ id: data.id, cb }); - connectBackground.sendMsgToContentScript(Msg.GetObjectItemData, data); + bridge.send(Msg.GetObjectItemData, data); }); Bus.on(BusMsg.UpdateSettings, () => { syncSettings(); }); Bus.on(BusMsg.LogData, (data: string[]) => { - connectBackground.sendMsgToContentScript(Msg.LogData, data); + bridge.send(Msg.LogData, data); }); onMounted(() => { syncSettings(); @@ -381,7 +383,7 @@ export default defineComponent({ } function updateNodeInfo() { if (selectedUUID) { - connectBackground.sendMsgToContentScript(Msg.NodeInfo, selectedUUID); + bridge.send(Msg.NodeInfo, selectedUUID); } } let selectedUUID: string | null = null; @@ -389,10 +391,12 @@ export default defineComponent({ (elTree.value as any)?.filter(val); } function onBtnClickUpdateTree() { - connectBackground.sendMsgToContentScript(Msg.TreeInfo, frameID); + const id = toRaw(frameID.value); + bridge.send(Msg.TreeInfo, id); } function onChangeFrame() { - connectBackground.sendMsgToContentScript(Msg.UseFrame, frameID); + const id = toRaw(frameID.value); + bridge.send(Msg.UseFrame, id); } const elLeft = ref(); const version = ref(PluginConfig.manifest.version); @@ -451,10 +455,10 @@ export default defineComponent({ }, onBtnClickUpdatePage() { - connectBackground.sendMsgToContentScript(Msg.Support); + bridge.send(Msg.Support); }, onMemoryTest() { - connectBackground.sendMsgToContentScript(Msg.MemoryInfo); + bridge.send(Msg.MemoryInfo); }, onChangeFrame, diff --git a/cc-inspector/src/views/devtools/register-panel.ts b/cc-inspector/src/views/devtools/register-panel.ts index 4e7a727..5353467 100644 --- a/cc-inspector/src/views/devtools/register-panel.ts +++ b/cc-inspector/src/views/devtools/register-panel.ts @@ -1,5 +1,7 @@ import CCP from "cc-plugin/src/ccp/entry-render"; import { ChromeConst } from "cc-plugin/src/chrome/const"; +import { bridge } from "./bridge"; +import { Msg } from "../../core/types"; export function init() { if (chrome && chrome.devtools) { // 对应的是Elements面板的边栏 @@ -18,7 +20,7 @@ export function init() { panel.onShown.addListener((window) => { // 面板显示，查询是否是cocos游戏 console.log("panel show"); - // connectBackground.postMessageToBackground(Msg.Support, null) + // bridge.sendToBackground(Msg.Support, null) }); panel.onHidden.addListener(() => { // 面板隐藏 diff --git a/cc-inspector/src/views/devtools/test/test.vue b/cc-inspector/src/views/devtools/test/test.vue index 54ae429..97141c9 100644 --- a/cc-inspector/src/views/devtools/test/test.vue +++ b/cc-inspector/src/views/devtools/test/test.vue @@ -15,7 +15,7 @@ import ccui from "@xuyanfeng/cc-ui"; import { ITreeData } from "@xuyanfeng/cc-ui/types/cc-tree/const"; import { defineComponent, ref } from "vue"; import { Msg, Page, PluginEvent } from "../../../core/types"; -import { connectBackground } from "../connectBackground"; +import { bridge } from "../bridge"; import { FrameDetails, Group, Info, InvalidData, NodeInfoData, TreeData } from "../data"; import { testServer, TestServer } from "./server"; const { CCButton, CCSection } = ccui.components; @@ -70,7 +70,7 @@ export default defineComponent({ children: [], }; const event = new PluginEvent(Page.Inject, Page.Devtools, Msg.TreeInfo, data); - connectBackground.doCallback(event); + bridge.doMessage(event); }, onFrames() { const data: FrameDetails[] = [ diff --git a/cc-inspector/src/views/devtools/ui/property-group.vue b/cc-inspector/src/views/devtools/ui/property-group.vue index bbcde83..62b35f8 100644 --- a/cc-inspector/src/views/devtools/ui/property-group.vue +++ b/cc-inspector/src/views/devtools/ui/property-group.vue @@ -14,7 +14,7 @@