From 3e9d259b2c1e14e67aef1b3df22970992188f18b Mon Sep 17 00:00:00 2001 From: xu_yanfeng Date: Fri, 27 Dec 2024 19:20:22 +0800 Subject: [PATCH] =?UTF-8?q?=E5=B0=86=E6=B6=88=E6=81=AF=E7=9A=84=E8=AF=B7?= =?UTF-8?q?=E6=B1=82=E5=92=8C=E5=93=8D=E5=BA=94=E5=88=86=E7=A6=BB=EF=BC=8C?= =?UTF-8?q?=E4=BE=BF=E4=BA=8E=E7=BB=B4=E6=8A=A4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- cc-inspector/src/core/types.ts | 95 +++++++++++++------ cc-inspector/src/i18n/en.ts | 2 +- cc-inspector/src/i18n/zh.ts | 2 +- cc-inspector/src/scripts/background/index.ts | 11 +-- .../src/scripts/background/portContent.ts | 23 ++++- .../src/scripts/background/portDevtools.ts | 20 ++-- .../src/scripts/background/portMan.ts | 27 ++++-- .../src/scripts/background/portMgr.ts | 45 ++++----- cc-inspector/src/scripts/content/index.ts | 8 +- cc-inspector/src/scripts/inject/inspector.ts | 36 +++---- cc-inspector/src/views/devtools/data.ts | 6 ++ cc-inspector/src/views/devtools/index.vue | 34 +++---- .../src/views/devtools/register-panel.ts | 5 +- .../src/views/devtools/test/server.ts | 22 ++--- cc-inspector/src/views/devtools/test/test.vue | 15 +-- .../src/views/devtools/ui/ui-prop.vue | 5 +- 16 files changed, 214 insertions(+), 142 deletions(-) diff --git a/cc-inspector/src/core/types.ts b/cc-inspector/src/core/types.ts index fb8c778..c04e6d0 100644 --- a/cc-inspector/src/core/types.ts +++ b/cc-inspector/src/core/types.ts @@ -1,4 +1,5 @@ import { Chunk } from "../scripts/terminal"; +import { FrameDetails, Info, NodeInfoData, ObjectData, ObjectItemRequestData, TreeData } from "../views/devtools/data"; export enum Page { None = "None", @@ -10,21 +11,65 @@ export enum Page { Options = "Options", } +// #region 定义接受发送的数据声明，方便定位 +export interface RequestTreeInfoData { + /** + * 当前正在使用的frameID + */ + frameID: number; +} +export type ResponseTreeInfoData = TreeData; + +export interface RequestNodeInfoData { + /** + * 节点的UUID + */ + uuid: string; +} +export type ResponseNodeInfoData = NodeInfoData; + +export interface RequestSupportData {} +export interface ResponseSupportData { + /** + * 是否支持 + */ + support: boolean; + /** + * 消息 + */ + msg: string; +} + +export type ResponseUpdateFramesData = FrameDetails[]; + +export interface RequestUseFrameData { + id: number; +} +export type RequestSetPropertyData = Info; +export type ResponseSetPropertyData = Info; +export type RequestLogData = string[]; +export type RequestObjectData = ObjectData; +export type ResponseObjectData = ObjectItemRequestData; export enum Msg { None = "None", /** * 具体的节点信息 */ - NodeInfo = "node-info", + RequestNodeInfo = "request-node-info", + ResponseNodeInfo = "response-node-info", /** * 节点树信息 */ - TreeInfo = "tree-info", + RequstTreeInfo = "request-tree-info", + ResponseTreeInfo = "response-tree-info", /** * 游戏支持信息 */ - Support = "game-support",// - MemoryInfo = "memory-info",// + RequestSupport = "request-support", + ResponseSupport = "response-support", + + ResponseMemoryInfo = "response-memory-info", + MemoryInfo = "memory-info", /** * 当前页面信息 */ @@ -36,18 +81,16 @@ export enum Msg { /** * 更新页面的frame */ - UpdateFrames = "UpdateFrames", - UseFrame = "UseFrame", - GetObjectItemData = "GetObjectItemData", - LogData = "LogData", - /** - * 设置node属性 - */ - SetProperty = "set-property", - /** - * 更新属性 - */ - UpdateProperty = "update-property", + ResponseUpdateFrames = "response-update-frames", + RequestUseFrame = "request-use-frame", + + RequestObjectItemData = "request-object-item-data", + ResponseObjectItemData = "response-object-item-data", + + RequestLogData = "request-log-data", + + RequestSetProperty = "request-set-property", + ResponseSetProperty = "update-property", } export class PluginEvent { @@ -92,7 +135,7 @@ export class PluginEvent { static create(data: any): PluginEvent { let obj = data; if (typeof data === "string") { - obj = JSON.stringify(data) + obj = JSON.stringify(data); } else if (typeof data === "object") { obj = data; } else { @@ -124,20 +167,13 @@ export class PluginEvent { } /** - * + * */ static finish(event: PluginEvent) { event.source = event.target = null; } toChunk(): Chunk[] { - return [ - new Chunk(new Date().toLocaleString()).color("white").background("black").padding('0 4px'), - new Chunk(this.source).color('white').background("red").padding('0 4px').margin('0 0 0 5px'), - new Chunk('=>').color('black').background("yellow").bold(), - new Chunk(this.target, false).color("white").background("green").padding('0 4px'), - new Chunk(this.msg, true).color("white").background("black").margin('0 0 0 5px').padding("0 6px"), - new Chunk(JSON.stringify(this.data)) - ]; + return [new Chunk(new Date().toLocaleString()).color("white").background("black").padding("0 4px"), new Chunk(this.source).color("white").background("red").padding("0 4px").margin("0 0 0 5px"), new Chunk("=>").color("black").background("yellow").bold(), new Chunk(this.target, false).color("white").background("green").padding("0 4px"), new Chunk(this.msg, true).color("white").background("black").margin("0 0 0 5px").padding("0 6px"), new Chunk(JSON.stringify(this.data))]; } constructor(source: Page, target: Page, msg: Msg, data?: any) { if (PageInclude(target)) { @@ -146,7 +182,7 @@ export class PluginEvent { this.msg = msg; this.data = data; } else { - console.warn(`无效的target: ${target}`) + console.warn(`无效的target: ${target}`); } } } @@ -157,7 +193,7 @@ function inEnum(enumValues: any, value: Page | Msg) { //@ts-ignore let itemEnum = enumValues[key] as string; if (itemEnum === value) { - return true + return true; } } } @@ -168,7 +204,6 @@ export function PageInclude(page: Page) { return inEnum(Page, page); } - export function MsgInclude(msg: Msg) { - return inEnum(Msg, msg) + return inEnum(Msg, msg); } diff --git a/cc-inspector/src/i18n/en.ts b/cc-inspector/src/i18n/en.ts index 6934842..c7e35e7 100644 --- a/cc-inspector/src/i18n/en.ts +++ b/cc-inspector/src/i18n/en.ts @@ -1 +1 @@ -export const title = 'my first plugin' +export const title = "CCInspector"; diff --git a/cc-inspector/src/i18n/zh.ts b/cc-inspector/src/i18n/zh.ts index 3d5c8f3..c7e35e7 100644 --- a/cc-inspector/src/i18n/zh.ts +++ b/cc-inspector/src/i18n/zh.ts @@ -1 +1 @@ -export const title = '我的第一个插件' +export const title = "CCInspector"; diff --git a/cc-inspector/src/scripts/background/index.ts b/cc-inspector/src/scripts/background/index.ts index 833b41e..9f7b16d 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 { Msg, Page, PluginEvent } from "../../core/types"; +import { Msg, Page, PluginEvent, RequestSupportData } from "../../core/types"; import { Terminal } from "../terminal"; import { PortMan } from "./portMan"; import { portMgr } from "./portMgr"; @@ -15,12 +15,7 @@ function onTabConnect(tab: chrome.tabs.Tab, port: chrome.runtime.Port) { debugger; return; } - let portMan = portMgr.findPort(tab.id); - if (portMan) { - // 一个port发起多次发起链接，以最后一次的为数据通讯基准 - // portMgr.removePort(portMan); - } - portMan = portMgr.addPort(tab, port); + const portMan = portMgr.addPort(tab, port); portMan.init(); } chrome.runtime.onConnect.addListener((port: chrome.runtime.Port) => { @@ -60,7 +55,7 @@ chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => { if (id && id > -1) { let portMan = portMgr.findPort(id); if (portMan) { - let data = new PluginEvent(Page.Background, Page.Content, Msg.Support); + const data = new PluginEvent(Page.Background, Page.Content, Msg.RequestSupport, {} as RequestSupportData); portMgr.sendContentMsg(data); } } diff --git a/cc-inspector/src/scripts/background/portContent.ts b/cc-inspector/src/scripts/background/portContent.ts index af75906..e78fcf9 100644 --- a/cc-inspector/src/scripts/background/portContent.ts +++ b/cc-inspector/src/scripts/background/portContent.ts @@ -1,11 +1,28 @@ import { PluginEvent } from "../../core/types"; +import { FrameDetails } from "../../views/devtools/data"; import { PortMan } from "./portMan"; import { portMgr } from "./portMgr"; export class PortContent extends PortMan { + protected frameID: number = 0; + constructor(tab: chrome.tabs.Tab, port: chrome.runtime.Port) { + super(tab, port); + this.frameID = port.sender.frameId || 0; + } + getFrameDetais(): FrameDetails { + return { + url: this.url, + frameID: this.frameID, + }; + } init(): void { - // content连上来要同时devtools更新 - portMgr._updateFrames(); + // 使用新连上来的content + const { frameId } = this.port.sender; + if (frameId !== undefined) { + portMgr.useFrame(frameId); + } + // 新的content连上来，需要更新devtools + portMgr.updateFrames(); this.onDisconnect = (disPort: chrome.runtime.Port) => { /** * const index = this.content.findIndex((el) => @@ -16,7 +33,7 @@ export class PortContent extends PortMan { */ // content失去链接需要更新Devtools portMgr.removePort(this); - portMgr._updateFrames(); + portMgr.updateFrames(); }; this.onMessage = (data: PluginEvent) => { // content的数据一般都是要同步到devtools diff --git a/cc-inspector/src/scripts/background/portDevtools.ts b/cc-inspector/src/scripts/background/portDevtools.ts index 514d5ca..31b37d4 100644 --- a/cc-inspector/src/scripts/background/portDevtools.ts +++ b/cc-inspector/src/scripts/background/portDevtools.ts @@ -1,32 +1,36 @@ -import { Msg, Page, PluginEvent } from "../../core/types"; +import { Msg, Page, PluginEvent, RequestTreeInfoData, RequestUseFrameData } from "../../core/types"; import { PortMan } from "./portMan"; import { portMgr } from "./portMgr"; export class PortDevtools extends PortMan { init(): void { // 当devtools链接后，主动同步frames数据 - portMgr._updateFrames(); + portMgr.updateFrames(); this.onDisconnect = () => { portMgr.removePort(this); }; this.onMessage = (data: PluginEvent) => { - if (data.msg === Msg.UseFrame) { - portMgr.useFrame(data.data); + if (data.msg === Msg.RequestUseFrame) { + portMgr.useFrame((data.data as RequestUseFrameData).id); } else { // 从devtools过来的消息统一派发到Content中 if (data.check(Page.Devtools, Page.Background)) { - if (data.msg === Msg.TreeInfo) { - if (portMgr.isCurrentFrme(data.data)) { + if (data.msg === Msg.RequstTreeInfo) { + const d = data.data as RequestTreeInfoData; + if (!portMgr.isCurrentFrme(d.frameID)) { console.log(`frameID[${data.data}]不一致`); + debugger; } } data.reset(Page.Background, Page.Content); - const port = portMgr.getCurrentUseContent(); + const port = portMgr.getCurrentUsePort(); if (!port) { console.warn(`not find andy port`); return; } - port.postMessage(data); + port.send(data); + } else { + debugger; } } }; diff --git a/cc-inspector/src/scripts/background/portMan.ts b/cc-inspector/src/scripts/background/portMan.ts index 31a3bff..187a192 100644 --- a/cc-inspector/src/scripts/background/portMan.ts +++ b/cc-inspector/src/scripts/background/portMan.ts @@ -12,7 +12,7 @@ export abstract class PortMan { public id: number | null = null; public title: string = ""; public url: string = ""; - public port: chrome.runtime.Port | null = null; + protected port: chrome.runtime.Port | null = null; public tab: chrome.tabs.Tab | null = null; public onDisconnect: (port: chrome.runtime.Port) => void | null = null; public onMessage: (data: PluginEvent) => void | null = null; @@ -24,14 +24,12 @@ export abstract class PortMan { this.tab = tab; this.name = port.name; this.id = tab.id; - this.url = tab.url; + this.url = port.sender.url; this.title = tab.title; this.terminal = new Terminal(`Port-${this.name}`); port.onMessage.addListener((data: any, port: chrome.runtime.Port) => { const event = PluginEvent.create(data); console.log(...this.terminal.chunkMessage(event.toChunk())); - // 如果多个页面都监听 onMessage 事件，对于某一次事件只有第一次调用 sendResponse() 能成功发出回应，所有其他回应将被忽略。 - // port.postMessage(data); if (event.valid && this.onMessage) { this.onMessage(event); } else { @@ -47,10 +45,27 @@ export abstract class PortMan { } abstract init(): void; - isConnectPort() { + isContent() { return this.name === Page.Content; } - isDevtoolsPort() { + isDevtools() { return this.name === Page.Devtools; } + isUseing(id: number) { + if (!this.port) { + return false; + } + if (!this.port.sender) { + return false; + } + if (this.port.sender.frameId === undefined) { + return false; + } + return this.port.sender.frameId === id; + } + send(data: PluginEvent) { + if (this.port) { + this.port.postMessage(data); + } + } } diff --git a/cc-inspector/src/scripts/background/portMgr.ts b/cc-inspector/src/scripts/background/portMgr.ts index b310fa4..eac8642 100644 --- a/cc-inspector/src/scripts/background/portMgr.ts +++ b/cc-inspector/src/scripts/background/portMgr.ts @@ -1,5 +1,5 @@ -import { FrameDetails } from "views/devtools/data"; -import { Msg, Page, PluginEvent } from "../../core/types"; +import { Msg, Page, PluginEvent, RequestSupportData, ResponseUpdateFramesData } from "../../core/types"; +import { FrameDetails } from "../../views/devtools/data"; import { Terminal } from "../terminal"; import { PortContent } from "./portContent"; import { PortDevtools } from "./portDevtools"; @@ -22,18 +22,19 @@ export class PortMgr { public findPort(id: number): PortMan | null { return this.portArray.find((el) => el.id === id) || null; } - public _updateFrames() { + /** + * 通知devtools更新 + */ + public updateFrames() { // 将content类型的port收集起来，同步到devtools const data: FrameDetails[] = []; this.portArray.forEach((item) => { - if (item.isConnectPort()) { - data.push({ - url: item.port.sender?.url || "", - frameID: item.port.sender?.frameId || 0, - }); + if (item.isContent()) { + const frame = (item as PortContent).getFrameDetais(); + data.push(frame); } }); - const event = new PluginEvent(Page.Background, Page.Devtools, Msg.UpdateFrames, data); + const event = new PluginEvent(Page.Background, Page.Devtools, Msg.ResponseUpdateFrames, data as ResponseUpdateFramesData); this.sendDevtoolMsg(event); } @@ -89,38 +90,34 @@ export class PortMgr { } sendContentMsg(data: PluginEvent) { - this.getCurrentUseContent()?.postMessage(data); + this.getCurrentUsePort()?.send(data); } sendDevtoolMsg(data: PluginEvent) { - const portManArray = this.portArray.filter((el) => el.isDevtoolsPort()); + const portManArray = this.portArray.filter((el) => el.isDevtools()); if (portManArray.length) { portManArray.forEach((portMan) => { - portMan.port.postMessage(data); + portMan.send(data); }); } else { console.log("not find devtools port"); } } - getCurrentUseContent(): chrome.runtime.Port | null { + getCurrentUsePort(): PortMan | null { const portMan = this.portArray.find((portMan: PortMan) => { - const el = portMan.port; - const b1 = el.sender?.frameId !== undefined; - const b2 = el.sender.frameId === this.currentUseContentFrameID; - return b1 && b2; + return portMan.isContent() && portMan.isUseing(this.currentUseContentFrameID); }); - if (portMan) { - return portMan.port; - } else { - return null; - } + return portMan || null; } useFrame(id: number) { this.currentUseContentFrameID = id; // 更新这个frame的tree - const sendData = new PluginEvent(Page.Background, Page.Content, Msg.Support); - this.getCurrentUseContent()?.postMessage(sendData); + const sendData = new PluginEvent(Page.Background, Page.Content, Msg.RequestSupport, {} as RequestSupportData); + this.getCurrentUsePort()?.send(sendData); } isCurrentFrme(id: number) { + if (typeof id !== "number") { + throw new Error("id must be number"); + } return this.currentUseContentFrameID === id; } } diff --git a/cc-inspector/src/scripts/content/index.ts b/cc-inspector/src/scripts/content/index.ts index 3c50bae..beb889f 100644 --- a/cc-inspector/src/scripts/content/index.ts +++ b/cc-inspector/src/scripts/content/index.ts @@ -1,7 +1,7 @@ // content.js 和原始界面共享DOM，具有操作dom的能力 // 但是不共享js,要想访问页面js,只能通过注入的方式 import { ChromeConst } from "cc-plugin/src/chrome/const"; -import { Msg, Page, PluginEvent } from "../../core/types"; +import { Msg, Page, PluginEvent, ResponseSupportData } from "../../core/types"; import { DocumentEvent } from "../const"; import { Terminal } from "../terminal"; @@ -63,10 +63,10 @@ connect.onMessage.addListener((data: PluginEvent, sender: chrome.runtime.Port) = function checkGame() { let gameCanvas = document.querySelector("#GameCanvas"); - const sendData = new PluginEvent(Page.Content, Page.Devtools, Msg.Support, { + const sendData = new PluginEvent(Page.Content, Page.Devtools, Msg.ResponseSupport, { support: !!gameCanvas, msg: "未发现GameCanvas,不支持调试游戏!", - }); + } as ResponseSupportData); if (connect) { connect.postMessage(sendData); } else { @@ -76,4 +76,4 @@ function checkGame() { } injectScript(ChromeConst.script.inject); -checkGame(); +// checkGame(); diff --git a/cc-inspector/src/scripts/inject/inspector.ts b/cc-inspector/src/scripts/inject/inspector.ts index 869d80e..1a8880e 100644 --- a/cc-inspector/src/scripts/inject/inspector.ts +++ b/cc-inspector/src/scripts/inject/inspector.ts @@ -1,6 +1,6 @@ // eval 注入脚本的代码,变量尽量使用var,后来发现在import之后,let会自动变为var import { uniq } from "lodash"; -import { Msg, PluginEvent } from "../../core/types"; +import { Msg, PluginEvent, RequestNodeInfoData, RequestLogData, RequestObjectData, RequestSetPropertyData, ResponseNodeInfoData, ResponseObjectData, ResponseSetPropertyData, ResponseSupportData, ResponseTreeInfoData } from "../../core/types"; import { ArrayData, BoolData, ColorData, DataType, EngineData, Group, ImageData, Info, InvalidData, NodeInfoData, NumberData, ObjectData, ObjectItemRequestData, Property, StringData, TreeData, Vec2Data, Vec3Data } from "../../views/devtools/data"; import { InjectEvent } from "./event"; import { getValue, trySetValueWithConfig } from "./setValue"; @@ -25,22 +25,22 @@ export class Inspector extends InjectEvent { } onMessage(pluginEvent: PluginEvent): void { switch (pluginEvent.msg) { - case Msg.Support: { - let isCocosGame = this._isCocosGame(); + case Msg.RequestSupport: { + const isCocosGame = this._isCocosGame(); this.notifySupportGame(isCocosGame); break; } - case Msg.TreeInfo: { + case Msg.RequstTreeInfo: { this.updateTreeInfo(); break; } - case Msg.NodeInfo: { - let nodeUUID = pluginEvent.data; - this.getNodeInfo(nodeUUID); + case Msg.RequestNodeInfo: { + const data = pluginEvent.data as RequestNodeInfoData; + this.getNodeInfo(data.uuid); break; } - case Msg.SetProperty: { - const data: Info = pluginEvent.data; + case Msg.RequestSetProperty: { + const data: RequestSetPropertyData = pluginEvent.data; let value = data.data; if (data.type === DataType.Color) { // @ts-ignore @@ -48,22 +48,22 @@ export class Inspector extends InjectEvent { } if (this.setValue(data.path, value)) { - this.sendMsgToContent(Msg.UpdateProperty, data); + this.sendMsgToContent(Msg.ResponseSetProperty, data as ResponseSetPropertyData); } else { console.warn(`设置失败：${data.path}`); } break; } - case Msg.LogData: { - const data: string[] = pluginEvent.data; + case Msg.RequestLogData: { + const data: RequestLogData = pluginEvent.data; const value = getValue(this.inspectorGameMemoryStorage, data); // 直接写console.log会被tree shaking const logFunction = console.log; logFunction(value); break; } - case Msg.GetObjectItemData: { - const data: ObjectData = pluginEvent.data; + case Msg.RequestObjectItemData: { + const data: RequestObjectData = pluginEvent.data; let val = getValue(this.inspectorGameMemoryStorage, data.path); if (val) { let itemData: Property[] = this._buildObjectItemData({ @@ -76,7 +76,7 @@ export class Inspector extends InjectEvent { id: data.id, data: itemData, }; - this.sendMsgToContent(Msg.GetObjectItemData, result); + this.sendMsgToContent(Msg.ResponseObjectItemData, result as ResponseObjectData); } break; } @@ -88,7 +88,7 @@ export class Inspector extends InjectEvent { } notifySupportGame(b: boolean) { - this.sendMsgToContent(Msg.Support, b); + this.sendMsgToContent(Msg.ResponseSupport, { support: b, msg: "" } as ResponseSupportData); } updateTreeInfo() { @@ -99,7 +99,7 @@ export class Inspector extends InjectEvent { if (scene) { let treeData = new TreeData(); this.getNodeChildren(scene, treeData); - this.sendMsgToContent(Msg.TreeInfo, treeData); + this.sendMsgToContent(Msg.ResponseTreeInfo, treeData as ResponseTreeInfoData); } else { console.warn("can't execute api : cc.director.getScene"); this.notifySupportGame(false); @@ -588,7 +588,7 @@ export class Inspector extends InjectEvent { groupData.push(compGroup); } const data: NodeInfoData = new NodeInfoData(uuid, groupData); - this.sendMsgToContent(Msg.NodeInfo, data); + this.sendMsgToContent(Msg.ResponseNodeInfo, data as ResponseNodeInfoData); } else { // 未获取到节点数据 console.log("未获取到节点数据"); diff --git a/cc-inspector/src/views/devtools/data.ts b/cc-inspector/src/views/devtools/data.ts index 0f73f86..603c8f8 100644 --- a/cc-inspector/src/views/devtools/data.ts +++ b/cc-inspector/src/views/devtools/data.ts @@ -105,7 +105,13 @@ export interface ObjectItemRequestData { } export interface FrameDetails { + /** + * 网页的frameID + */ frameID: number; + /** + * 网页的url + */ url: string; } diff --git a/cc-inspector/src/views/devtools/index.vue b/cc-inspector/src/views/devtools/index.vue index aa29f8f..e745053 100644 --- a/cc-inspector/src/views/devtools/index.vue +++ b/cc-inspector/src/views/devtools/index.vue @@ -45,10 +45,10 @@ import { Option } from "@xuyanfeng/cc-ui/types/cc-select/const"; import { storeToRefs } from "pinia"; import { defineComponent, nextTick, onMounted, reactive, ref, toRaw, watch } from "vue"; import PluginConfig from "../../../cc-plugin.config"; -import { Msg, PluginEvent } from "../../core/types"; +import { Msg, PluginEvent, RequestNodeInfoData, RequestSupportData, RequestTreeInfoData, RequestLogData, RequestObjectData, RequestUseFrameData, ResponseObjectData, ResponseSetPropertyData, ResponseSupportData } from "../../core/types"; import { bridge } from "./bridge"; import Bus, { BusMsg } from "./bus"; -import { EngineData, FrameDetails, Info, NodeInfoData, ObjectData, ObjectItemRequestData, TreeData } from "./data"; +import { EngineData, FrameDetails, NodeInfoData, ObjectData, TreeData } from "./data"; import { appStore, RefreshType } from "./store"; import Test from "./test/test.vue"; import Properties from "./ui/propertys.vue"; @@ -174,7 +174,7 @@ export default defineComponent({ const elTree = ref(); function _initChromeRuntimeConnect() { const msgFunctionMap: Record = {}; - msgFunctionMap[Msg.TreeInfo] = (data: Array) => { + msgFunctionMap[Msg.ResponseTreeInfo] = (data: Array) => { isShowDebug.value = true; if (!Array.isArray(data)) { data = [data]; @@ -189,7 +189,9 @@ export default defineComponent({ }); } }; - msgFunctionMap[Msg.Support] = (isCocosGame: boolean) => { + msgFunctionMap[Msg.ResponseSupport] = (data: ResponseSupportData) => { + debugger; + const isCocosGame: boolean = data.support; isShowDebug.value = isCocosGame; if (isCocosGame) { syncSettings(); @@ -201,9 +203,10 @@ export default defineComponent({ selectedUUID = null; } }; - msgFunctionMap[Msg.NodeInfo] = (eventData: NodeInfoData) => { + msgFunctionMap[Msg.ResponseNodeInfo] = (eventData: NodeInfoData) => { isShowDebug.value = true; try { + // 因为要用到class的一些属性，传递过来的是纯数据，所以需要重新序列化一下 const nodeInfo = new NodeInfoData(eventData.uuid, eventData.group).parse(eventData); treeItemData.value = nodeInfo; } catch (error) { @@ -214,7 +217,7 @@ export default defineComponent({ msgFunctionMap[Msg.MemoryInfo] = (eventData: any) => { memory.value = eventData; }; - msgFunctionMap[Msg.UpdateProperty] = (data: Info) => { + msgFunctionMap[Msg.ResponseSetProperty] = (data: ResponseSetPropertyData) => { const uuid = data.path[0]; const key = data.path[1]; const value = data.data; @@ -239,7 +242,7 @@ export default defineComponent({ } } }; - msgFunctionMap[Msg.UpdateFrames] = (details: FrameDetails[]) => { + msgFunctionMap[Msg.ResponseUpdateFrames] = (details: FrameDetails[]) => { // 先把iframes里面无效的清空了 iframes.value = iframes.value.filter((item) => { details.find((el) => el.frameID === item.value); @@ -263,7 +266,7 @@ export default defineComponent({ onChangeFrame(); } }; - msgFunctionMap[Msg.GetObjectItemData] = (requestData: ObjectItemRequestData) => { + msgFunctionMap[Msg.ResponseObjectItemData] = (requestData: ResponseObjectData) => { if (requestData.id !== null) { let findIndex = requestList.findIndex((el) => el.id === requestData.id); if (findIndex > -1) { @@ -277,7 +280,6 @@ export default defineComponent({ if (!data) { return; } - debugger; if (data.isTargetDevtools()) { PluginEvent.finish(data); const { msg } = data; @@ -303,7 +305,7 @@ export default defineComponent({ false ); Bus.on(BusMsg.ShowPlace, (data: EngineData) => { - console.log(data); + console.log(toRaw(data)); _expand(data.engineUUID); }); Bus.on(BusMsg.RequestObjectData, (data: ObjectData, cb: Function) => { @@ -311,13 +313,13 @@ export default defineComponent({ return; } requestList.push({ id: data.id, cb }); - bridge.send(Msg.GetObjectItemData, data); + bridge.send(Msg.RequestObjectItemData, data as RequestObjectData); }); Bus.on(BusMsg.UpdateSettings, () => { syncSettings(); }); Bus.on(BusMsg.LogData, (data: string[]) => { - bridge.send(Msg.LogData, data); + bridge.send(Msg.RequestLogData, data as RequestLogData); }); onMounted(() => { syncSettings(); @@ -382,7 +384,7 @@ export default defineComponent({ } function updateNodeInfo() { if (selectedUUID) { - bridge.send(Msg.NodeInfo, selectedUUID); + bridge.send(Msg.RequestNodeInfo, { uuid: selectedUUID } as RequestNodeInfoData); } } let selectedUUID: string | null = null; @@ -391,11 +393,11 @@ export default defineComponent({ } function onBtnClickUpdateTree() { const id = toRaw(frameID.value); - bridge.send(Msg.TreeInfo, id); + bridge.send(Msg.RequstTreeInfo, { frameID: id } as RequestTreeInfoData); } function onChangeFrame() { const id = Number(toRaw(frameID.value)); - bridge.send(Msg.UseFrame, id); + bridge.send(Msg.RequestUseFrame, { id } as RequestUseFrameData); } const elLeft = ref(); const version = ref(PluginConfig.manifest.version); @@ -454,7 +456,7 @@ export default defineComponent({ }, onBtnClickUpdatePage() { - bridge.send(Msg.Support); + bridge.send(Msg.RequestSupport, {} as RequestSupportData); }, onMemoryTest() { bridge.send(Msg.MemoryInfo); diff --git a/cc-inspector/src/views/devtools/register-panel.ts b/cc-inspector/src/views/devtools/register-panel.ts index 644ac42..4f363ba 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 { Msg, RequestSupportData } from "../../core/types"; +import { bridge } from "./bridge"; export function init() { if (chrome && chrome.devtools) { // 对应的是Elements面板的边栏 @@ -17,8 +19,7 @@ export function init() { console.log("[CC-Inspector] Dev Panel Created!"); panel.onShown.addListener((window) => { // 面板显示，查询是否是cocos游戏 - console.log("panel show"); - // bridge.sendToBackground(Msg.Support, null) + bridge.send(Msg.RequestSupport, {} as RequestSupportData); }); panel.onHidden.addListener(() => { // 面板隐藏 diff --git a/cc-inspector/src/views/devtools/test/server.ts b/cc-inspector/src/views/devtools/test/server.ts index e1e9d05..51a6d29 100644 --- a/cc-inspector/src/views/devtools/test/server.ts +++ b/cc-inspector/src/views/devtools/test/server.ts @@ -1,5 +1,5 @@ import { v4 } from "uuid"; -import { Msg, Page, PluginEvent } from "../../../core/types"; +import { Msg, Page, PluginEvent, RequestNodeInfoData, RequestObjectData, ResponseNodeInfoData, ResponseObjectData, ResponseTreeInfoData } from "../../../core/types"; import { ArrayData, BoolData, ColorData, EngineData, EnumData, Group, ImageData, Info, InvalidData, NodeInfoData, NumberData, ObjectData, ObjectItemRequestData, Property, StringData, TextData, TreeData, Vec2Data, Vec3Data, Vec4Data } from "../data"; export class TestClient { recv(event: PluginEvent) {} @@ -100,8 +100,8 @@ export class TestServer { } recv(msg: string, data: any) { switch (msg) { - case Msg.NodeInfo: { - const id: string = data as string; + case Msg.RequestNodeInfo: { + const id: string = (data as RequestNodeInfoData).uuid; const node: Node = this.testData.findNode(id); let group = []; if (node) { @@ -111,37 +111,37 @@ export class TestServer { group.push(g); } const ret: NodeInfoData = new NodeInfoData(id, group); - const event = new PluginEvent(Page.Background, Page.Devtools, Msg.NodeInfo, ret); + const event = new PluginEvent(Page.Background, Page.Devtools, Msg.ResponseNodeInfo, ret as ResponseNodeInfoData); this.send(event); break; } - case Msg.TreeInfo: { + case Msg.RequstTreeInfo: { const ret: TreeData = new TreeData(); this.testData.toTreeData(ret); - const event = new PluginEvent(Page.Inject, Page.Devtools, Msg.TreeInfo, ret); + const event = new PluginEvent(Page.Inject, Page.Devtools, Msg.ResponseTreeInfo, ret as ResponseTreeInfoData); this.send(event); break; } - case Msg.SetProperty: { + case Msg.RequestSetProperty: { console.log(data); break; } - case Msg.GetObjectItemData: { - const objData = data as ObjectData; + case Msg.RequestObjectItemData: { + const objData: RequestObjectData = data as ObjectData; const info = this.testData.findInfo(objData.id); if (info && info instanceof ObjectData) { const ret: ObjectItemRequestData = { id: objData.id, data: info.testProperty(), }; - const event = new PluginEvent(Page.Inject, Page.Devtools, Msg.GetObjectItemData, ret); + const event = new PluginEvent(Page.Inject, Page.Devtools, Msg.ResponseObjectItemData, ret as ResponseObjectData); this.send(event); } else { console.warn("not found data: ", objData.id); } break; } - case Msg.LogData: { + case Msg.RequestLogData: { console.log(data); break; } diff --git a/cc-inspector/src/views/devtools/test/test.vue b/cc-inspector/src/views/devtools/test/test.vue index 1c18eda..0ebe105 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 { storeToRefs } from "pinia"; import { defineComponent, ref } from "vue"; -import { Msg, Page, PluginEvent } from "../../../core/types"; +import { Msg, Page, PluginEvent, ResponseUpdateFramesData } from "../../../core/types"; import { Terminal } from "../../../scripts/terminal"; import { bridge } from "../bridge"; import { FrameDetails, Group, InvalidData, NodeInfoData, TreeData } from "../data"; @@ -31,7 +31,8 @@ export default defineComponent({ }, setup(props, { emit }) { const { config } = storeToRefs(appStore()); - const show = ref(__DEV__); + // 仅在web环境显示 + const show = ref(__DEV__ && !(chrome && chrome.runtime)); // 测试发送的是纯数据 const testData = { uuid: "d1NHXHs35F1rbFJZKeigkl", @@ -74,7 +75,7 @@ export default defineComponent({ }, onTerminal() { const t = new Terminal("flag"); - const event = new PluginEvent(Page.Background, Page.Background, Msg.NodeInfo, ""); + const event = new PluginEvent(Page.Background, Page.Background, Msg.ResponseTreeInfo, ""); console.log(...t.message("1")); console.log(...t.log("newline", true)); console.log(...t.log("oneline", false)); @@ -92,7 +93,7 @@ export default defineComponent({ active: true, children: [], }; - const event = new PluginEvent(Page.Inject, Page.Devtools, Msg.TreeInfo, data); + const event = new PluginEvent(Page.Inject, Page.Devtools, Msg.ResponseTreeInfo, data); bridge.doMessage(event); }, onFrames() { @@ -100,16 +101,16 @@ export default defineComponent({ { url: "url1", frameID: 1 }, { url: "url2", frameID: 2 }, ]; - const event = new PluginEvent(Page.Background, Page.Devtools, Msg.UpdateFrames, data); + const event = new PluginEvent(Page.Background, Page.Devtools, Msg.ResponseUpdateFrames, data as ResponseUpdateFramesData); testServer.send(event); }, onTestNodeInfo() { - const event = new PluginEvent(Page.Background, Page.Devtools, Msg.NodeInfo, testData); + const event = new PluginEvent(Page.Background, Page.Devtools, Msg.ResponseTreeInfo, testData); testServer.send(event); }, onNull() { const data = new NodeInfoData("", [new Group("", "1").buildProperty("dependAssets", new InvalidData("Null"))]); - const event = new PluginEvent(Page.Background, Page.Devtools, Msg.NodeInfo, data); + const event = new PluginEvent(Page.Background, Page.Devtools, Msg.ResponseTreeInfo, data); testServer.send(event); }, }; diff --git a/cc-inspector/src/views/devtools/ui/ui-prop.vue b/cc-inspector/src/views/devtools/ui/ui-prop.vue index a4c5127..4ecdac1 100644 --- a/cc-inspector/src/views/devtools/ui/ui-prop.vue +++ b/cc-inspector/src/views/devtools/ui/ui-prop.vue @@ -32,7 +32,7 @@ import ccui from "@xuyanfeng/cc-ui"; import { Option } from "@xuyanfeng/cc-ui/types/cc-select/const"; import { defineComponent, onMounted, PropType, ref, toRaw, watch } from "vue"; -import { Msg } from "../../../core/types"; +import { Msg, RequestSetPropertyData } from "../../../core/types"; import { bridge } from "../bridge"; import Bus, { BusMsg } from "../bus"; import { EngineData, EnumData, ImageData, Info, NumberData, Property, StringData, TextData, Vec2Data, Vec3Data } from "../data"; @@ -81,7 +81,6 @@ export default defineComponent({ expand, subData, formatValue(data: any) { - console.log(data); if (data === null) { return "null"; } else if (data === undefined) { @@ -139,7 +138,7 @@ export default defineComponent({ onChangeValue() { if (!props.value.readonly) { const raw = toRaw(props.value); - bridge.send(Msg.SetProperty, raw); + bridge.send(Msg.RequestSetProperty, raw as RequestSetPropertyData); } }, };