重构

source/src/background.ts

@@ -1,54 +1,62 @@
 import * as  PluginMsg from "./core/plugin-msg"
+import {PluginEvent} from "@/devtools/type";
+import {MsgInclude} from "./core/plugin-msg";
 
 let Devtools: chrome.runtime.Port | null = null;
-let DevtoolsPanel: chrome.runtime.Port | null = null;
 let Content: chrome.runtime.Port | null = null;
 console.log('on background')
 
 chrome.runtime.onConnect.addListener((port: chrome.runtime.Port) => {
-  console.log(`%c[Connect] ${port.name}`, "color:blue;");
+  switch (port.name) {
-  port.onMessage.addListener((data: any, sender: any) => {
+    case PluginMsg.Page.Devtools: {
-    console.log(`%c[Connect-Message] ${sender.name}\n${JSON.stringify(data)}`, "color:green;")
-    sender.postMessage(data);
-    if (data.msg === PluginMsg.Msg.UrlChange) {
-      if (sender.name === PluginMsg.Page.DevToolsPanel) {
-        Content && Content.postMessage({msg: PluginMsg.Msg.UrlChange, data: {}})
-      }
-    }
-    // chrome.tabs.executeScript(message.tabId, {code: message.content});
-    // port.postMessage(message);
-  });
-  port.onDisconnect.addListener(function (port: chrome.runtime.Port) {
-    console.log(`%c[Connect-Dis] ${port.name}`, "color:red");
-    // port.onMessage.removeListener(longConnectionLink);
-    if (port.name === PluginMsg.Page.Devtools) {
-      Devtools = null;
-    } else if (port.name === PluginMsg.Page.Content) {
-      Content = null;
-    } else if (port.name === PluginMsg.Page.DevToolsPanel) {
-      DevtoolsPanel = null;
-    }
-  });
-
-  // 缓存
-  if (port.name === PluginMsg.Page.Devtools) {
       Devtools = port;
-  } else if (port.name === PluginMsg.Page.Content) {
+      onPortConnect(port,
+        (data: PluginEvent) => {
+          // 从devtools过来的消息统一派发到Content中
+          if (MsgInclude(data.msg)) {
+            Content && Content.postMessage(data)
+          }
+        },
+        () => {
+          Devtools = null;
+        })
+      break;
+    }
+    case PluginMsg.Page.Content: {
       Content = port;
-  } else if (port.name === PluginMsg.Page.DevToolsPanel) {
+      onPortConnect(port,
-    DevtoolsPanel = port;
+        () => {
+
+        },
+        () => {
+          Content = null;
+
+        })
+      break
+    }
   }
 });
 
+function onPortConnect(port: chrome.runtime.Port, onMsg: Function, onDisconnect: Function) {
+  console.log(`%c[Connect] ${port.name}`, "color:blue;");
+  port.onMessage.addListener((data: any, sender: any) => {
+    console.log(`%c[Connect-Message] ${sender.name}\n${JSON.stringify(data)}`, "color:green;")
+    // sender.postMessage(data);
+    onMsg && onMsg(data);
+  });
+  port.onDisconnect.addListener((port: chrome.runtime.Port) => {
+    console.log(`%c[Connect-Dis] ${port.name}`, "color:red");
+    onDisconnect && onDisconnect()
+  });
+}
+
+
 // background.js 更像是一个主进程,负责整个插件的调度,生命周期和chrome保持一致
-//  监听来自content.js发来的事件
+//  监听来自content.js发来的事件，将消息转发到devtools
 chrome.runtime.onMessage.addListener((request: any, sender: any, sendResponse: any) => {
     console.log(`%c[Message]url:${sender.url}]\n${JSON.stringify(request)}`, 'color:green')
     sendResponse && sendResponse(request);
-    if (request.msg === PluginMsg.Msg.Support ||
+    if (MsgInclude(request.msg)) {
-      request.msg === PluginMsg.Msg.ListInfo ||
-      request.msg === PluginMsg.Msg.NodeInfo) {
-      // 将消息转发到devtools
       Devtools && Devtools.postMessage(request);
     }
   }
@@ -58,8 +66,7 @@ chrome.tabs.onUpdated.addListener(function (tabId, changeInfo, tab) {
   if (changeInfo.status === "complete") {
     // 加载新的url
     if (Content) {
-      let data = {msg: PluginMsg.Msg.UrlChange, data: {url: tab.favIconUrl}}
+      Content.postMessage(new PluginEvent(PluginMsg.Msg.UrlChange, {url: tab.favIconUrl}));
-      Content.postMessage(data);
     }
   }
 })

source/src/content.ts

@@ -1,20 +1,10 @@
 // content.js 和原始界面共享DOM，具有操作dom的能力
 // 但是不共享js,要想访问页面js,只能通过注入的方式
 import * as PluginMsg from './core/plugin-msg'
+import {injectScript} from "@/core/util";
+import {PluginEvent} from "@/devtools/type";
 
-function injectScriptToPage(url: string) {
+injectScript("js/inject.js");
-  let content = chrome.extension.getURL(url)
-  console.log(`[cc-inspector]注入脚本:${content}`);
-  let script = document.createElement('script')
-  script.setAttribute('type', 'text/javascript')
-  script.setAttribute('src', content)
-  script.onload = function () {
-    document.body.removeChild(script);
-  }
-  document.body.appendChild(script)
-}
-
-injectScriptToPage("js/inject.js");
 
 // 和background.js保持长连接通讯
 let conn = chrome.runtime.connect({name: PluginMsg.Page.Content})
@@ -24,30 +14,20 @@ conn.onMessage.addListener(function (data) {
   window.postMessage(data, "*");
 })
 // 接受来自inject.js的消息数据,然后中转到background.js
-window.addEventListener('message', function (event) {
+// window.addEventListener('message', function (event) {
-  let data = event.data;
+//   let data = event.data;
-  console.log(`%c[Window-Message] ${JSON.stringify(data)}`, "color:green;");
+//   console.log(`%c[Window-Message] ${JSON.stringify(data)}`, "color:green;");
-  chrome.runtime.sendMessage(data);
+//   chrome.runtime.sendMessage(data);
-}, false);
+// }, false);
 
 
 let gameCanvas = document.querySelector("#GameCanvas");
-if (gameCanvas) {
+if (!gameCanvas) {
-  // console.log('find GameCanvas element');
+  let sendData = new PluginEvent(PluginMsg.Msg.Support, {
-  // gameCanvas.addEventListener('click', function () {
-  //   console.log("click canvas");
-  // });
-  // gameCanvas.style.display = 'none';
-} else {
-  // console.log("can't find GameCanvas element");
-  // 和background.js保持短连接通讯
-  chrome.runtime.sendMessage({
-    msg: PluginMsg.Msg.Support,
-    data: {
     support: false,
     msg: "未发现GameCanvas,不支持调试游戏!"
-    }
+  })
-  }, function (data) {
+  chrome.runtime.sendMessage(sendData, (ret) => {
-    // console.log(data)
+    console.log(ret)
   });
 }

source/src/core/plugin-msg.ts

@@ -1,15 +1,29 @@
 export const Page = {
   Inject: "Inject",
   Devtools: "Devtools",
-  DevToolsPanel: "DevToolsPanel",
   Content: "Content",
   Popup: "Popup",
   Options: "Options",
 }
 export const Msg = {
-  NodeInfo: "node_info",// 具体的节点信息
+  NodeInfo: "node-info",// 具体的节点信息
-  ListInfo: "list_info",// 节点树信息
+  TreeInfo: "tree-info",// 节点树信息
-  Support: "game_support",// 游戏支持信息
+  Support: "game-support",// 游戏支持信息
-  MemoryInfo: "memory_info",//
+  MemoryInfo: "memory-info",//
-  UrlChange: "url_change",
+  TabsInfo: "tabs_info", // 当前页面信息
+  UrlChange: "url_change", // 网址发生变化
+  SetProperty: "set-property", // 设置node属性
+}
+
+export function MsgInclude(msg: string) {
+  for (let key in Msg) {
+    if (Msg.hasOwnProperty(key)) {
+      //@ts-ignore
+      let m = Msg[key] as string;
+      if (m === msg) {
+        return true
+      }
+    }
+  }
+  return false;
 }

source/src/core/util.ts

@@ -0,0 +1,13 @@
+export function injectScript(url: string) {
+  if (chrome && chrome.extension && chrome.extension.getURL) {
+    let content = chrome.extension.getURL(url)
+    console.log(`[cc-inspector]注入脚本:${content}`);
+    let script = document.createElement('script')
+    script.setAttribute('type', 'text/javascript')
+    script.setAttribute('src', content)
+    script.onload = function () {
+      document.body.removeChild(script);
+    }
+    document.body.appendChild(script)
+  }
+}

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) {
+      // 如果节点树为空，就刷新一次
+      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});
+    connectBackground.onBackgroundMessage((data: any, sender: any) => {
-    this.bgConn.onMessage.addListener((data, sender) => {
       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) {
+      // 接受来自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.sendMsgToDevTools(PluginMsg.Msg.Support, {support: 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) {
+      switch (para.msg) {
-        case ExecuteParaType.None:
+        case PluginMsg.Msg.TreeInfo:
-          break;
-        case ExecuteParaType.UpdateTreeInfo:
           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,39 +1,23 @@
 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) {
+  if (chrome && chrome.devtools) {
     // 对应的是Elements面板的边栏
     chrome.devtools.panels.elements.createSidebarPane('Cocos', function (sidebar) {
       sidebar.setObject({some_data: "some data to show!"});
     });
 
-  // 和background建立连接
+    // 创建devtools-panel
-  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!");
-      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) {
+          // let sendData = new PluginEvent(PluginMsg.Msg.Support);
-          connect.postMessage({msg: PluginMsg.Msg.UrlChange, data: {}})
+          // connectBackground.postMessage(sendData)
-        }
         });
         panel.onHidden.addListener(() => {
           // 面板隐藏
@@ -41,11 +25,11 @@ if (chrome && chrome.devtools) {
         });
         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 {
+export class PluginEvent {
-  static Type = ExecuteParaType;
+  msg: string = '';
+  data: any = null;
 
-  type: ExecuteParaType = ExecuteParaType.None;
+  constructor(msg: string, data?: any) {
-  data: any;
+    this.msg = msg;
-
+    this.data = data || null;
-  constructor(type: ExecuteParaType, data?: any) {
-    this.type = type;
-    this.data = data;
   }
 }

source/src/manifest.json

@@ -38,8 +38,7 @@
         "<all_urls>"
       ],
       "js": [
-        "js/content.js",
+        "js/content.js"
-        "js/execute.js"
       ],
       "run_at": "document_end",
       "all_frames": true

source/vue.config.js

@@ -18,7 +18,6 @@ module.exports = {
         contentScripts: {
           entries: {
             content: "src/content.ts",
-            execute: "src/devtools/execute.ts",
             inject: "src/devtools/inject.ts",
           },
         },