From 30e51657ae92b267cc071058c2157be1962d925d Mon Sep 17 00:00:00 2001 From: xu_yanfeng Date: Wed, 8 Jan 2025 16:38:43 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E5=A4=9A=E4=B8=AAtab?= =?UTF-8?q?=E6=A0=87=E7=AD=BE=E4=B8=8B=EF=BC=8Cdevtool=E4=BC=9A=E9=94=99?= =?UTF-8?q?=E8=AF=AF=E5=B1=95=E7=A4=BAcontent=E7=9A=84=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- cc-inspector/src/core/types.ts | 4 ++ cc-inspector/src/scripts/background/index.ts | 10 ++--- .../src/scripts/background/portContent.ts | 6 ++- .../src/scripts/background/portDevtools.ts | 4 +- .../src/scripts/background/portMan.ts | 4 +- .../src/scripts/background/portMgr.ts | 39 +++++++++---------- cc-inspector/src/views/devtools/data.ts | 1 + cc-inspector/src/views/devtools/index.vue | 13 +++++-- cc-inspector/src/views/devtools/test/test.vue | 4 +- 9 files changed, 46 insertions(+), 39 deletions(-) diff --git a/cc-inspector/src/core/types.ts b/cc-inspector/src/core/types.ts index 4c03352..5798ebe 100644 --- a/cc-inspector/src/core/types.ts +++ b/cc-inspector/src/core/types.ts @@ -45,6 +45,9 @@ export type ResponseUpdateFramesData = FrameDetails[]; export interface RequestUseFrameData { id: number; } +export interface ResponseUseFrameData { + id: number; +} export type RequestSetPropertyData = Info; export type ResponseSetPropertyData = Info; export type RequestLogData = string[]; @@ -82,6 +85,7 @@ export enum Msg { */ ResponseUpdateFrames = "response-update-frames", RequestUseFrame = "request-use-frame", + ResponseUseFrame = "response-use-frame", RequestLogData = "request-log-data", diff --git a/cc-inspector/src/scripts/background/index.ts b/cc-inspector/src/scripts/background/index.ts index e9f48d4..49ccfa7 100644 --- a/cc-inspector/src/scripts/background/index.ts +++ b/cc-inspector/src/scripts/background/index.ts @@ -1,5 +1,5 @@ import { ChromeConst } from "cc-plugin/src/chrome/const"; -import { debugLog, Msg, Page, PluginEvent, RequestSupportData } from "../../core/types"; +import { debugLog, Page, PluginEvent } from "../../core/types"; import { Terminal } from "../terminal"; import { PortMan } from "./portMan"; import { portMgr } from "./portMgr"; @@ -42,7 +42,7 @@ chrome.runtime.onMessage.addListener((request: PluginEvent, sender: any, sendRes // 监听来自content.js发来的事件，将消息转发到devtools event.reset(Page.Background, Page.Devtools); console.log(`%c[Message]url:${sender.url}]\n${JSON.stringify(request)}`, "color:green"); - portMgr.sendDevtoolMsg(request); + portMgr.sendDevtoolMsg(request, tabID); } } }); @@ -53,11 +53,7 @@ chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => { const { id } = tab; // -1为自己 if (id && id > -1) { - let portMan = portMgr.findPort(id); - if (portMan) { - const data = new PluginEvent(Page.Background, Page.Content, Msg.RequestSupport, {} as RequestSupportData); - portMgr.sendContentMsg(data); - } + portMgr.useFrame(0, id); } } }); diff --git a/cc-inspector/src/scripts/background/portContent.ts b/cc-inspector/src/scripts/background/portContent.ts index a0ca495..758b085 100644 --- a/cc-inspector/src/scripts/background/portContent.ts +++ b/cc-inspector/src/scripts/background/portContent.ts @@ -11,6 +11,7 @@ export class PortContent extends PortMan { } getFrameDetais(): FrameDetails { return { + tabID: this.tabID, url: this.url, frameID: this.frameID, }; @@ -20,11 +21,14 @@ export class PortContent extends PortMan { this.onDisconnect = (disPort: chrome.runtime.Port) => { // content失去链接需要更新Devtools portMgr.removePort(this); + if (portMgr.currentUseContentFrameID === this.frameID) { + portMgr.useFrame(0, this.tabID); + } }; this.onMessage = (data: PluginEvent) => { // content的数据一般都是要同步到devtools if (data.isTargetDevtools()) { - portMgr.sendDevtoolMsg(data); + portMgr.sendDevtoolMsg(data, this.tabID); } else { debugger; } diff --git a/cc-inspector/src/scripts/background/portDevtools.ts b/cc-inspector/src/scripts/background/portDevtools.ts index fadd13d..cc22dd4 100644 --- a/cc-inspector/src/scripts/background/portDevtools.ts +++ b/cc-inspector/src/scripts/background/portDevtools.ts @@ -10,12 +10,12 @@ export class PortDevtools extends PortMan { this.onMessage = (data: PluginEvent) => { if (data.msg === Msg.RequestUseFrame) { // 因为devtool是定时器驱动，这里改变了content，后续就会将数据派发到对应的content中去 - portMgr.useFrame((data.data as RequestUseFrameData).id); + portMgr.useFrame((data.data as RequestUseFrameData).id, this.tabID); } else { // 从devtools过来的消息统一派发到目标content中 if (data.check(Page.Devtools, Page.Background)) { data.reset(Page.Background, Page.Content); - const port = portMgr.getCurrentUsePort(); + const port = portMgr.getCurrentUsePort(this.tabID); if (port) { port.send(data); } else { diff --git a/cc-inspector/src/scripts/background/portMan.ts b/cc-inspector/src/scripts/background/portMan.ts index 2a65f72..37f27a4 100644 --- a/cc-inspector/src/scripts/background/portMan.ts +++ b/cc-inspector/src/scripts/background/portMan.ts @@ -9,7 +9,7 @@ export abstract class PortMan { /** * tab.id作为唯一标识 */ - public id: number | null = null; + public tabID: number | null = null; public title: string = ""; public url: string = ""; protected port: chrome.runtime.Port | null = null; @@ -23,7 +23,7 @@ export abstract class PortMan { this.port = port; this.tab = tab; this.name = port.name; - this.id = tab.id; + this.tabID = tab.id; this.url = port.sender.url; this.title = tab.title; this.terminal = new Terminal(`Port-${this.name}`); diff --git a/cc-inspector/src/scripts/background/portMgr.ts b/cc-inspector/src/scripts/background/portMgr.ts index 1d72b6a..8c5619a 100644 --- a/cc-inspector/src/scripts/background/portMgr.ts +++ b/cc-inspector/src/scripts/background/portMgr.ts @@ -1,4 +1,4 @@ -import { debugLog, Msg, Page, PluginEvent, RequestSupportData, ResponseUpdateFramesData } from "../../core/types"; +import { debugLog, Msg, Page, PluginEvent, ResponseUpdateFramesData, ResponseUseFrameData } from "../../core/types"; import { FrameDetails } from "../../views/devtools/data"; import { Terminal } from "../terminal"; import { PortContent } from "./portContent"; @@ -14,28 +14,26 @@ export class PortMgr { /** * 当前正在通讯的frameID，因为游戏可能被好几个iframe嵌套 */ - private currentUseContentFrameID = 0; + public currentUseContentFrameID = 0; private terminal = new Terminal("PortMgr"); - public findDevtoolsPort() { - return this.portArray.find((el) => el.name === Page.Devtools); - } + public findPort(id: number): PortMan | null { - return this.portArray.find((el) => el.id === id) || null; + return this.portArray.find((el) => el.tabID === id) || null; } /** * 通知devtools更新 */ - public updateFrames() { + public updateFrames(tabID: number) { // 将content类型的port收集起来，同步到devtools const data: FrameDetails[] = []; this.portArray.forEach((item) => { - if (item.isContent()) { + if (item.isContent() && item.tabID === tabID) { const frame = (item as PortContent).getFrameDetais(); data.push(frame); } }); const event = new PluginEvent(Page.Background, Page.Devtools, Msg.ResponseUpdateFrames, data as ResponseUpdateFramesData); - this.sendDevtoolMsg(event); + this.sendDevtoolMsg(event, tabID); } addPort(tab: chrome.tabs.Tab, port: chrome.runtime.Port): PortMan | null { @@ -56,7 +54,7 @@ export class PortMgr { } if (portMan) { this.portArray.push(portMan); - this.updateFrames(); + this.updateFrames(tab.id); this.logState(); return portMan; } @@ -69,10 +67,10 @@ export class PortMgr { const port = this.portArray[i]; arr.push({ name: port.name, - id: port.id, + id: port.tabID, url: port.url, }); - str.push(`[${i + 1}] time:${new Date(port.timestamp).toLocaleString()}, name:${port.name}, id:${port.id}, url:${port.url}`); + str.push(`[${i + 1}] time:${new Date(port.timestamp).toLocaleString()}, name:${port.name}, id:${port.tabID}, url:${port.url}`); } if (arr.length) { @@ -86,16 +84,13 @@ export class PortMgr { let index = this.portArray.findIndex((el) => el === item); if (index > -1) { this.portArray.splice(index, 1); - this.updateFrames(); + this.updateFrames(item.tabID); this.logState(); } } - sendContentMsg(data: PluginEvent) { - this.getCurrentUsePort()?.send(data); - } - sendDevtoolMsg(data: PluginEvent) { - const portManArray = this.portArray.filter((el) => el.isDevtools()); + sendDevtoolMsg(data: PluginEvent, tabID: number) { + const portManArray = this.portArray.filter((el) => el.isDevtools() && el.tabID === tabID); if (portManArray.length) { portManArray.forEach((portMan) => { portMan.send(data); @@ -104,14 +99,16 @@ export class PortMgr { console.log("not find devtools port"); } } - getCurrentUsePort(): PortMan | null { + getCurrentUsePort(tabID: number): PortMan | null { const portMan = this.portArray.find((portMan: PortMan) => { - return portMan.isContent() && portMan.isUseing(this.currentUseContentFrameID); + return portMan.isContent() && portMan.tabID === tabID && portMan.isUseing(this.currentUseContentFrameID); }); return portMan || null; } - useFrame(id: number) { + useFrame(id: number, tabID: number) { this.currentUseContentFrameID = id; + const event = new PluginEvent(Page.Background, Page.Devtools, Msg.ResponseUpdateFrames, { id } as ResponseUseFrameData); + this.sendDevtoolMsg(event, tabID); } } export const portMgr = new PortMgr(); diff --git a/cc-inspector/src/views/devtools/data.ts b/cc-inspector/src/views/devtools/data.ts index 6a0c463..2c7cf68 100644 --- a/cc-inspector/src/views/devtools/data.ts +++ b/cc-inspector/src/views/devtools/data.ts @@ -109,6 +109,7 @@ export interface ObjectItemRequestData { } export interface FrameDetails { + tabID: number; /** * 网页的frameID */ diff --git a/cc-inspector/src/views/devtools/index.vue b/cc-inspector/src/views/devtools/index.vue index 91a2fbf..eaca8cb 100644 --- a/cc-inspector/src/views/devtools/index.vue +++ b/cc-inspector/src/views/devtools/index.vue @@ -29,7 +29,7 @@ import { Option } from "@xuyanfeng/cc-ui/types/cc-select/const"; import { storeToRefs } from "pinia"; import { defineComponent, onMounted, onUnmounted, ref, toRaw } from "vue"; import PluginConfig from "../../../cc-plugin.config"; -import { Msg, PluginEvent, RequestUseFrameData, ResponseSupportData } from "../../core/types"; +import { Msg, PluginEvent, RequestUseFrameData, ResponseSupportData, ResponseUseFrameData } from "../../core/types"; import { bridge } from "./bridge"; import { Bus, BusMsg } from "./bus"; import { FrameDetails, NodeInfoData, TreeData } from "./data"; @@ -61,6 +61,9 @@ export default defineComponent({ checkSupport(); }); onMounted(() => { + ccui.footbar.showTipsArray({ + tips: ["press space in the hierarchy to quickly control the display and hiding of nodes"], + }); Bus.on(BusMsg.EnableSchedule, funcEnableSchedule); timer.create(); }); @@ -74,9 +77,7 @@ export default defineComponent({ const tabID = chrome.devtools.inspectedWindow.tabId; chrome.scripting.executeScript({ files: ["js/execute.js"], target: { tabId: tabID } }, (results: chrome.scripting.InjectionResult[]) => {}); } - ccui.footbar.showTipsArray({ - tips: ["press space in the hierarchy to quickly control the display and hiding of nodes"], - }); + function _inspectedCode() { let injectCode = ""; chrome.devtools.inspectedWindow.eval(injectCode, (result, isException) => { @@ -103,6 +104,10 @@ export default defineComponent({ const isCocosGame: boolean = data.support; isShowDebug.value = isCocosGame; }); + bridge.on(Msg.ResponseUseFrame, (event: PluginEvent) => { + const data: ResponseUseFrameData = event.data; + frameID.value = data.id; + }); bridge.on(Msg.ResponseNodeInfo, (event: PluginEvent) => { let eventData: NodeInfoData = event.data; isShowDebug.value = true; diff --git a/cc-inspector/src/views/devtools/test/test.vue b/cc-inspector/src/views/devtools/test/test.vue index bfe0c51..ab39f5c 100644 --- a/cc-inspector/src/views/devtools/test/test.vue +++ b/cc-inspector/src/views/devtools/test/test.vue @@ -129,8 +129,8 @@ export default defineComponent({ }, onFrames() { const data: FrameDetails[] = [ - { url: "url1", frameID: 1 }, - { url: "url2", frameID: 2 }, + { url: "url1", tabID: 1, frameID: 1 }, + { url: "url2", tabID: 1, frameID: 2 }, ]; const event = new PluginEvent(Page.Background, Page.Devtools, Msg.ResponseUpdateFrames, data as ResponseUpdateFramesData); testServer.send(event);