将消息的请求和响应分离，便于维护

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",// 
+  RequestSupport = "request-support",
-  MemoryInfo = "memory-info",//
+  ResponseSupport = "response-support",
+
+  ResponseMemoryInfo = "response-memory-info",
+  MemoryInfo = "memory-info",
   /**
    * 当前页面信息
    */
@@ -36,18 +81,16 @@ export enum Msg {
   /**
    * 更新页面的frame
    */
-  UpdateFrames = "UpdateFrames",
+  ResponseUpdateFrames = "response-update-frames",
-  UseFrame = "UseFrame",
+  RequestUseFrame = "request-use-frame",
-  GetObjectItemData = "GetObjectItemData",
+
-  LogData = "LogData",
+  RequestObjectItemData = "request-object-item-data",
-  /**
+  ResponseObjectItemData = "response-object-item-data",
-   * 设置node属性
+
-   */
+  RequestLogData = "request-log-data",
-  SetProperty = "set-property",
+
-  /**
+  RequestSetProperty = "request-set-property",
-   * 更新属性
+  ResponseSetProperty = "update-property",
-   */
-  UpdateProperty = "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 {
@@ -130,14 +173,7 @@ export class PluginEvent {
     event.source = event.target = null;
   }
   toChunk(): Chunk[] {
-    return [
+    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))];
-      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);
 }

cc-inspector/src/i18n/en.ts

@@ -1 +1 @@
-export const title = 'my first plugin'
+export const title = "CCInspector";

cc-inspector/src/i18n/zh.ts

@@ -1 +1 @@
-export const title = '我的第一个插件'
+export const title = "CCInspector";

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);
+  const portMan = portMgr.addPort(tab, port);
-  if (portMan) {
-    // 一个port发起多次发起链接，以最后一次的为数据通讯基准
-    // portMgr.removePort(portMan);
-  }
-  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);
       }
     }

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更新
+    // 使用新连上来的content
-    portMgr._updateFrames();
+    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

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) {
+      if (data.msg === Msg.RequestUseFrame) {
-        portMgr.useFrame(data.data);
+        portMgr.useFrame((data.data as RequestUseFrameData).id);
       } else {
         // 从devtools过来的消息统一派发到Content中
         if (data.check(Page.Devtools, Page.Background)) {
-          if (data.msg === Msg.TreeInfo) {
+          if (data.msg === Msg.RequstTreeInfo) {
-            if (portMgr.isCurrentFrme(data.data)) {
+            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;
         }
       }
     };

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);
+    }
+  }
 }

cc-inspector/src/scripts/background/portMgr.ts

@@ -1,5 +1,5 @@
-import { FrameDetails } from "views/devtools/data";
+import { Msg, Page, PluginEvent, RequestSupportData, ResponseUpdateFramesData } from "../../core/types";
-import { Msg, Page, PluginEvent } 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()) {
+      if (item.isContent()) {
-        data.push({
+        const frame = (item as PortContent).getFrameDetais();
-          url: item.port.sender?.url || "",
+        data.push(frame);
-          frameID: item.port.sender?.frameId || 0,
-        });
       }
     });
-    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;
+      return portMan.isContent() && portMan.isUseing(this.currentUseContentFrameID);
-      const b1 = el.sender?.frameId !== undefined;
-      const b2 = el.sender.frameId === this.currentUseContentFrameID;
-      return b1 && b2;
     });
-    if (portMan) {
+    return portMan || null;
-      return portMan.port;
-    } else {
-      return null;
-    }
   }
   useFrame(id: number) {
     this.currentUseContentFrameID = id;
     // 更新这个frame的tree
-    const sendData = new PluginEvent(Page.Background, Page.Content, Msg.Support);
+    const sendData = new PluginEvent(Page.Background, Page.Content, Msg.RequestSupport, {} as RequestSupportData);
-    this.getCurrentUseContent()?.postMessage(sendData);
+    this.getCurrentUsePort()?.send(sendData);
   }
   isCurrentFrme(id: number) {
+    if (typeof id !== "number") {
+      throw new Error("id must be number");
+    }
     return this.currentUseContentFrameID === id;
   }
 }

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();

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: {
+      case Msg.RequestSupport: {
-        let isCocosGame = this._isCocosGame();
+        const isCocosGame = this._isCocosGame();
         this.notifySupportGame(isCocosGame);
         break;
       }
-      case Msg.TreeInfo: {
+      case Msg.RequstTreeInfo: {
         this.updateTreeInfo();
         break;
       }
-      case Msg.NodeInfo: {
+      case Msg.RequestNodeInfo: {
-        let nodeUUID = pluginEvent.data;
+        const data = pluginEvent.data as RequestNodeInfoData;
-        this.getNodeInfo(nodeUUID);
+        this.getNodeInfo(data.uuid);
         break;
       }
-      case Msg.SetProperty: {
+      case Msg.RequestSetProperty: {
-        const data: Info = pluginEvent.data;
+        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: {
+      case Msg.RequestLogData: {
-        const data: string[] = pluginEvent.data;
+        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: {
+      case Msg.RequestObjectItemData: {
-        const data: ObjectData = pluginEvent.data;
+        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("未获取到节点数据");

cc-inspector/src/views/devtools/data.ts

@@ -105,7 +105,13 @@ export interface ObjectItemRequestData {
 }
 
 export interface FrameDetails {
+  /**
+   * 网页的frameID
+   */
   frameID: number;
+  /**
+   * 网页的url
+   */
   url: string;
 }
 

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<typeof CCTree>();
     function _initChromeRuntimeConnect() {
       const msgFunctionMap: Record<string, Function> = {};
-      msgFunctionMap[Msg.TreeInfo] = (data: Array<TreeData>) => {
+      msgFunctionMap[Msg.ResponseTreeInfo] = (data: Array<TreeData>) => {
         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<HTMLDivElement>();
     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);

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.send(Msg.RequestSupport, {} as RequestSupportData);
-        // bridge.sendToBackground(Msg.Support, null)
       });
       panel.onHidden.addListener(() => {
         // 面板隐藏

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: {
+      case Msg.RequestNodeInfo: {
-        const id: string = data as string;
+        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: {
+      case Msg.RequestObjectItemData: {
-        const objData = data as ObjectData;
+        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;
       }

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);
       },
     };

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);
         }
       },
     };