修复多个tab标签下，devtool会错误展示content的问题

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",
 

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

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

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 {

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

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

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

@@ -109,6 +109,7 @@ export interface ObjectItemRequestData {
 }
 
 export interface FrameDetails {
+  tabID: number;
   /**
    * 网页的frameID
    */

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;

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