重构

source/src/devtools/connectBackground.ts

@@ -0,0 +1,36 @@
+import * as PluginMsg from "@/core/plugin-msg";
+import {PluginEvent} from "@/devtools/type";
+
+class ConnectBackground {
+  connect: chrome.runtime.Port | null = null;
+
+  constructor() {
+    if (chrome && chrome.runtime) {
+      this.connect = chrome.runtime.connect({name: PluginMsg.Page.Devtools});
+      this.connect.onDisconnect.addListener(() => {
+        console.log(`%c[Connect-Dis]`, 'color:red;')
+        this.connect = null;
+      })
+    }
+  }
+
+  onBackgroundMessage(cb: Function) {
+    if (this.connect) {
+      this.connect.onMessage.addListener((event, sender) => {
+        console.log(`[Message] ${JSON.stringify(event)}`);
+        cb && cb(event, sender)
+      });
+    }
+  }
+
+  postMessage(data: PluginEvent) {
+    if (this.connect) {
+      this.connect.postMessage(data)
+    } else {
+      console.warn('没有和background建立链接')
+    }
+  }
+
+}
+
+export const connectBackground = new ConnectBackground();

source/src/devtools/evalCodeString.js

@@ -1,3 +0,0 @@
-export default function () {
-  console.log("11")
-}

source/src/devtools/execute.ts

@@ -1,18 +0,0 @@
-interface ICCInspector extends Object {
-  devPageCallEntry(para: string): void;
-
-  init(): void;
-}
-
-declare interface Window {
-  CCInspector: ICCInspector;
-  CCInspectorPara: string;
-}
-debugger
-if (window.hasOwnProperty('CCInspector')) {
-  if (window.CCInspector.hasOwnProperty('devPageCallEntry')) {
-    window.CCInspector.devPageCallEntry(window.CCInspectorPara);
-  } else {
-    console.log("脚本inject.js未注入")
-  }
-}

source/src/devtools/index.ts

@@ -3,7 +3,9 @@ import ElementUI from "element-ui"
 import "element-ui/lib/theme-chalk/index.css"
 import "./global.less"
 import index from "./index.vue";
-import './register-panel';
+import {init} from './register-panel';
+
+init();
 
 Vue.use(ElementUI, {size: "mini"});
 new Vue({

source/src/devtools/index.vue

@@ -45,7 +45,8 @@
 import Vue from "vue";
 import {Component} from "vue-property-decorator";
 import properties from "./propertys.vue";
-import {DataSupport, ExecutePara, ExecuteParaType, NodeData} from "@/devtools/type";
+import {DataSupport, PluginEvent, NodeData} from "@/devtools/type";
+import {connectBackground} from "@/devtools/connectBackground";
 
 const PluginMsg = require("../core/plugin-msg");
 @Component({
@@ -57,7 +58,6 @@ export default class Index extends Vue {
   private isShowDebug: boolean = false;
   treeItemData: Array<Record<string, any>> = [];
   treeData: Array<NodeData> = []
-  bgConn: chrome.runtime.Port | null = null// 与background.js的链接
   expandedKeys: Array<string> = [];
   selectedUUID: string | null = null;
 
@@ -115,7 +115,10 @@ export default class Index extends Vue {
   _onMsgSupport(data: DataSupport) {
     this.isShowDebug = data.support;
     if (data.support) {
-      this.onBtnClickUpdateTree();
+      // 如果节点树为空，就刷新一次
+      if (this.treeData.length === 0) {
+        this.onBtnClickUpdateTree();
+      }
     } else {
       this._reset();
     }
@@ -127,10 +130,8 @@ export default class Index extends Vue {
   }
 
   _initChromeRuntimeConnect() {
-    // chrome.devtools.inspectedWindow.tabId
     // 接收来自background.js的消息数据
-    this.bgConn = chrome.runtime.connect({name: PluginMsg.Page.Devtools});
-    this.bgConn.onMessage.addListener((data, sender) => {
+    connectBackground.onBackgroundMessage((data: any, sender: any) => {
       if (!data) {
         return;
       }
@@ -138,7 +139,10 @@ export default class Index extends Vue {
       let eventData: any = data.data;
       console.log(data)
       switch (data.msg) {
-        case PluginMsg.Msg.ListInfo: {
+        case PluginMsg.Msg.UrlChange: {
+          break;
+        }
+        case PluginMsg.Msg.TreeInfo: {
           this._onMsgListInfo(eventData as Array<NodeData>);
           break;
         }
@@ -154,6 +158,10 @@ export default class Index extends Vue {
           this._onMsgMemory(eventData)
           break;
         }
+        case PluginMsg.Msg.TabsInfo: {
+          debugger
+          break
+        }
       }
     });
   }
@@ -164,7 +172,8 @@ export default class Index extends Vue {
     // console.log(data);
     let uuid = data.uuid;
     if (uuid !== undefined) {
-      this.runToContentScript(ExecuteParaType.GetNodeInfo, uuid);
+      PluginMsg.Msg.TabsInfo;
+      this.runToContentScript(PluginMsg.Msg.NodeInfo, uuid);
     }
   }
 
@@ -179,16 +188,23 @@ export default class Index extends Vue {
 
   }
 
-  runToContentScript(type: ExecuteParaType, data?: any) {
+  runToContentScript(msg: string, data?: any) {
     if (!chrome || !chrome.devtools) {
       console.log("环境异常，无法执行函数");
       return;
     }
-    let para: ExecutePara = new ExecutePara(type, data);
+    debugger
+    let sendData = new PluginEvent(msg, data)
+    connectBackground.postMessage(sendData);
+  }
+
+  // 问题：没有上下文的权限，只能操作DOM
+  _executeScript(para: Object) {
+    let tabID = chrome.devtools.inspectedWindow.tabId;
     //@ts-ignore
-    chrome.tabs.executeScript(null, {code: `var CCInspectorPara='${JSON.stringify(para)}';`}, () => {
+    chrome.tabs.executeScript(tabID, {code: `var CCInspectorPara='${JSON.stringify(para)}';`}, () => {
       //@ts-ignore
-      chrome.tabs.executeScript(null, {file: "js/execute.js"})
+      chrome.tabs.executeScript(tabID, {file: "js/execute.js"})
     });
   }
 
@@ -204,15 +220,15 @@ export default class Index extends Vue {
   }
 
   onBtnClickUpdateTree() {
-    this.runToContentScript(ExecuteParaType.UpdateTreeInfo);
+    this.runToContentScript(PluginMsg.Msg.TreeInfo);
   }
 
   onBtnClickUpdatePage() {
-    this.runToContentScript(ExecuteParaType.CheckGamePage, true);
+    this.runToContentScript(PluginMsg.Msg.Support);
   }
 
   onMemoryTest() {
-    this.runToContentScript(ExecuteParaType.MemoryInfo);
+    this.runToContentScript(PluginMsg.Msg.MemoryInfo);
   }
 
   onNodeExpand(data: NodeData) {

source/src/devtools/inject.ts

@@ -13,12 +13,13 @@ import {
   Vec3Data
 } from "./data";
 
-import {ExecutePara, ExecuteParaType} from './type'
+import {PluginEvent} from './type'
 
-class CCInspector implements ICCInspector {
+class CCInspector {
   inspectorGameMemoryStorage: Record<string, any> = {}
 
   init() {
+    console.log('cc-inspector init ~~~');
     setInterval(() => {
       // this.checkIsGamePage(true);
       // if (this.stop) {
@@ -27,36 +28,56 @@ class CCInspector implements ICCInspector {
     }, 1000);
     // 注册cc_after_render事件
     window.addEventListener("message", (event: any) => {
-      if (event.data.msg === PluginMsg.Msg.UrlChange) {
-        let isCocosGame = this._isCocosGame();
-        this.sendMsgToDevTools(PluginMsg.Msg.Support, {support: isCocosGame});
+      // 接受来自background的事件，有可能也会受到其他插件的
+      if (!event || !event.data) {
+        return
+      }
+      let pluginEvent: PluginEvent = event.data;
+      switch (pluginEvent.msg) {
+        case PluginMsg.Msg.UrlChange:
+        case PluginMsg.Msg.Support: {
+          let isCocosGame = this._isCocosGame();
+          this.sendMsgToContent(PluginMsg.Msg.Support, {support: isCocosGame});
+          break;
+        }
+        case PluginMsg.Msg.TreeInfo: {
+
+          debugger
+          break;
+        }
+        case PluginMsg.Msg.NodeInfo: {
+          debugger
+          break;
+        }
+        case PluginMsg.Msg.SetProperty: {
+          debugger;
+          break;
+        }
       }
     });
   }
 
   devPageCallEntry(str: string) {
-    let para: ExecutePara = JSON.parse(str);
+    let para: PluginEvent = JSON.parse(str);
     debugger
     if (this._isCocosGame()) {
-      switch (para.type) {
-        case ExecuteParaType.None:
-          break;
-        case ExecuteParaType.UpdateTreeInfo:
+      switch (para.msg) {
+        case PluginMsg.Msg.TreeInfo:
           this.updateTreeInfo();
           break;
-        case ExecuteParaType.CheckGamePage:
+        case PluginMsg.Msg.Support:
 
           break;
-        case ExecuteParaType.MemoryInfo:
+        case PluginMsg.Msg.MemoryInfo:
           break;
-        case ExecuteParaType.SetProperty:
+        case PluginMsg.Msg.SetProperty:
           break;
-        case ExecuteParaType.GetNodeInfo:
+        case PluginMsg.Msg.NodeInfo:
           this.getNodeInfo(para.data as string);
           break;
       }
     } else {
-      this.sendMsgToDevTools(PluginMsg.Msg.Support, {support: false});
+      this.sendMsgToContent(PluginMsg.Msg.Support, {support: false});
     }
   }
 
@@ -77,9 +98,9 @@ class CCInspector implements ICCInspector {
           let node = sceneChildren[i];
           this.getNodeChildren(node, sendData.children);
         }
-        this.sendMsgToDevTools(PluginMsg.Msg.ListInfo, sendData);
+        this.sendMsgToContent(PluginMsg.Msg.TreeInfo, sendData);
       } else {
-        this.sendMsgToDevTools(PluginMsg.Msg.Support, {support: false, msg: "未发现游戏场景,不支持调试游戏!"});
+        this.sendMsgToContent(PluginMsg.Msg.Support, {support: false, msg: "未发现游戏场景,不支持调试游戏!"});
       }
     }
   }
@@ -255,7 +276,7 @@ class CCInspector implements ICCInspector {
         let compGroup = this._getGroupData(itemComp);
         groupData.push(compGroup);
       }
-      this.sendMsgToDevTools(PluginMsg.Msg.NodeInfo, groupData);
+      this.sendMsgToContent(PluginMsg.Msg.NodeInfo, groupData);
     } else {
       // 未获取到节点数据
       console.log("未获取到节点数据");
@@ -276,13 +297,13 @@ class CCInspector implements ICCInspector {
     }
   }
 
-  sendMsgToDevTools(msg: string, data: any) {
+  sendMsgToContent(msg: string, data: any) {
     // 发送给content.js处理
-    window.postMessage({msg: msg, data: data}, "*");
+    window.postMessage(new PluginEvent(msg, data), "*");
   }
 
   onMemoryInfo() {
-    this.sendMsgToDevTools(PluginMsg.Msg.MemoryInfo, {
+    this.sendMsgToContent(PluginMsg.Msg.MemoryInfo, {
       performance: {
         // @ts-ignore
         jsHeapSizeLimit: window.performance.memory.jsHeapSizeLimit,
@@ -300,11 +321,9 @@ class CCInspector implements ICCInspector {
   }
 }
 
-window.addEventListener("message", (a: any) => {
-  console.log(a);
-});
 let inspector = new CCInspector();
 inspector.init();
+//@ts-ignore
 window.CCInspector = inspector;
 
 

source/src/devtools/register-panel.ts

@@ -1,51 +1,35 @@
 import * as PluginMsg from '../core/plugin-msg'
 import Manifest from '../manifest.json'
+import {PluginEvent} from "@/devtools/type";
+import {connectBackground} from "@/devtools/connectBackground";
 
+export function init() {
+  if (chrome && chrome.devtools) {
+    // 对应的是Elements面板的边栏
+    chrome.devtools.panels.elements.createSidebarPane('Cocos', function (sidebar) {
+      sidebar.setObject({some_data: "some data to show!"});
+    });
 
-if (chrome && chrome.devtools) {
-  // 对应的是Elements面板的边栏
-  chrome.devtools.panels.elements.createSidebarPane('Cocos', function (sidebar) {
-    sidebar.setObject({some_data: "some data to show!"});
-  });
-
-  // 和background建立连接
-  let connect: chrome.runtime.Port | null = null;
-  if (chrome && chrome.runtime) {
-    connect = chrome.runtime.connect({name: PluginMsg.Page.DevToolsPanel});
+    // 创建devtools-panel
+    chrome.devtools.panels.create("Cocos", "icons/48.png", Manifest.devtools_page, (panel: chrome.devtools.panels.ExtensionPanel) => {
+        console.log("[CC-Inspector] Dev Panel Created!");
+        panel.onShown.addListener((window) => {
+          // 面板显示，查询是否是cocos游戏
+          console.log("panel show");
+          // let sendData = new PluginEvent(PluginMsg.Msg.Support);
+          // connectBackground.postMessage(sendData)
+        });
+        panel.onHidden.addListener(() => {
+          // 面板隐藏
+          console.log("panel hide");
+        });
+        panel.onSearch.addListener(function (action, query) {
+          // ctrl+f 查找触发
+          console.log("panel search!");
+        });
+      }
+    );
   }
 
-
-// 创建devtools-panel
-  chrome.devtools.panels.create("Cocos", "icons/48.png", Manifest.devtools_page, (panel: chrome.devtools.panels.ExtensionPanel) => {
-      console.log("[CC-Inspector] Dev Panel Created!");
-      if (!connect) {
-        return;
-      }
-      connect.onDisconnect.addListener(() => {
-        console.log(`%c[Connect-Dis]`, 'color:red;')
-      })
-      connect.onMessage.addListener((event, sender) => {
-        console.log(`[Message] ${JSON.stringify(event)}`);
-      });
-
-      panel.onShown.addListener((window) => {
-        // 面板显示，查询是否是cocos游戏
-        console.log("panel show");
-        if (connect) {
-          connect.postMessage({msg: PluginMsg.Msg.UrlChange, data: {}})
-        }
-      });
-      panel.onHidden.addListener(() => {
-        // 面板隐藏
-        console.log("panel hide");
-      });
-      panel.onSearch.addListener(function (action, query) {
-        // ctrl+f 查找触发
-        if (connect) {
-          console.log("panel search!");
-        }
-      });
-    }
-  );
 }
 

source/src/devtools/type.ts

@@ -9,23 +9,13 @@ export class DataSupport {
   msg?: string;
 }
 
-export enum ExecuteParaType {
-  None,
-  UpdateTreeInfo,
-  CheckGamePage,
-  MemoryInfo,
-  SetProperty,
-  GetNodeInfo,
-}
 
-export class ExecutePara {
-  static Type = ExecuteParaType;
+export class PluginEvent {
+  msg: string = '';
+  data: any = null;
 
-  type: ExecuteParaType = ExecuteParaType.None;
-  data: any;
-
-  constructor(type: ExecuteParaType, data?: any) {
-    this.type = type;
-    this.data = data;
+  constructor(msg: string, data?: any) {
+    this.msg = msg;
+    this.data = data || null;
   }
 }