打通流程

source/src/background.ts

@@ -1,4 +1,4 @@
-import {PluginEvent, Page, Msg} from "@/core/types";
+import {Page, PluginEvent} from "@/core/types";
 
 let Devtools: chrome.runtime.Port | null = null;
 let Content: chrome.runtime.Port | null = null;
@@ -11,8 +11,8 @@ chrome.runtime.onConnect.addListener((port: chrome.runtime.Port) => {
       onPortConnect(port,
         (data: PluginEvent) => {
           // 从devtools过来的消息统一派发到Content中
-          if (data.target === Page.Background) {
-            data.target = Page.Content;
+          if (PluginEvent.check(data, Page.Devtools, Page.Background)) {
+            PluginEvent.reset(data, Page.Background, Page.Content);
             Content && Content.postMessage(data)
           }
         },
@@ -54,8 +54,8 @@ function onPortConnect(port: chrome.runtime.Port, onMsg: Function, onDisconnect:
 // background.js 更像是一个主进程,负责整个插件的调度,生命周期和chrome保持一致
 //  监听来自content.js发来的事件，将消息转发到devtools
 chrome.runtime.onMessage.addListener((request: PluginEvent, sender: any, sendResponse: any) => {
-    if (request.target === Page.Background) {
-      request.target = Page.Devtools;
+    if (PluginEvent.check(request, Page.Content, Page.Background)) {
+      PluginEvent.reset(request, Page.Background, Page.Devtools)
       console.log(`%c[Message]url:${sender.url}]\n${JSON.stringify(request)}`, 'color:green')
       sendResponse && sendResponse(request);
       Devtools && Devtools.postMessage(request);

source/src/content.ts

@@ -1,7 +1,7 @@
 // content.js 和原始界面共享DOM，具有操作dom的能力
 // 但是不共享js,要想访问页面js,只能通过注入的方式
 import {injectScript} from "@/core/util";
-import {PluginEvent, Page, Msg} from "@/core/types";
+import {Msg, Page, PluginEvent} from "@/core/types";
 
 injectScript("js/inject.js");
 
@@ -9,9 +9,9 @@ injectScript("js/inject.js");
 let conn = chrome.runtime.connect({name: Page.Content})
 conn.onMessage.addListener((data: PluginEvent, sender) => {
   // 将background.js的消息返回到injection.js
+  if (PluginEvent.check(data, Page.Background, Page.Content)) {
     console.log(`%c[Connect-Message] ${JSON.stringify(data)}`, "color:green;")
-  if (data.target === Page.Content) {
-    data.target = Page.Inject;
+    PluginEvent.reset(data, Page.Content, Page.Inject)
     window.postMessage(data, "*");
   }
 })
@@ -19,9 +19,9 @@ conn.onMessage.addListener((data: PluginEvent, sender) => {
 // 接受来自inject.js的消息数据,然后中转到background.js
 window.addEventListener('message', function (event) {
   let data: PluginEvent = event.data;
+  if (PluginEvent.check(data, Page.Inject, Page.Content)) {
     console.log(`%c[Window-Message] ${JSON.stringify(data)}`, "color:green;");
-  if (data.target === Page.Inject) {
-    data.target = Page.Background;
+    PluginEvent.reset(data, Page.Content, Page.Background)
     chrome.runtime.sendMessage(data);
   }
 }, false);
@@ -29,7 +29,7 @@ window.addEventListener('message', function (event) {
 
 let gameCanvas = document.querySelector("#GameCanvas");
 if (!gameCanvas) {
-  let sendData = new PluginEvent(Page.Background, Msg.Support, {
+  let sendData = new PluginEvent(Page.Content, Page.Background, Msg.Support, {
     support: false,
     msg: "未发现GameCanvas,不支持调试游戏!"
   })

source/src/core/types.ts

@@ -20,10 +20,28 @@ export enum Msg {
 export class PluginEvent {
   msg: Msg | null = null;
   data: any = null;
+
+  source: Page | null = null; // 事件发送的源头
   target: Page | null = null; // 事件要发送的目标
 
-  constructor(target: Page, msg: Msg, data?: any) {
+  static check(event: PluginEvent, source: Page, target: Page) {
+    return event && source && target && event.source === source && event.target === target;
+  }
+
+  static reset(event: PluginEvent, source: Page | null, target: Page | null) {
+    if (event && source && target) {
+      event.source = source;
+      event.target = target;
+    }
+  }
+
+  static finish(event: PluginEvent) {
+    event.source = event.target = null;
+  }
+
+  constructor(source: Page, target: Page, msg: Msg, data?: any) {
     if (PageInclude(target)) {
+      this.source = source;
       this.target = target;
       this.msg = msg;
       this.data = data || null;

source/src/devtools/connectBackground.ts

@@ -16,7 +16,6 @@ class ConnectBackground {
   onBackgroundMessage(cb: Function) {
     if (this.connect) {
       this.connect.onMessage.addListener((event, sender) => {
-        console.log(`[Message] ${JSON.stringify(event)}`);
         cb && cb(event, sender)
       });
     }

source/src/devtools/index.vue

@@ -45,8 +45,8 @@
 import Vue from "vue";
 import {Component} from "vue-property-decorator";
 import properties from "./propertys.vue";
-import {DataSupport, NodeData} from "@/devtools/type";
-import {PluginEvent, Page, Msg} from '@/core/types'
+import { NodeData} from "@/devtools/type";
+import {Msg, Page, PluginEvent} from '@/core/types'
 import {connectBackground} from "@/devtools/connectBackground";
 
 @Component({
@@ -80,7 +80,6 @@ export default class Index extends Vue {
     }
 
     window.addEventListener("message", function (event) {
-      console.log("on vue:" + JSON.stringify(event.data));
       console.log("on vue:" + JSON.stringify(event));
     }, false);
   }
@@ -112,9 +111,9 @@ export default class Index extends Vue {
     this.memory = eventData;
   }
 
-  _onMsgSupport(data: DataSupport) {
-    this.isShowDebug = data.support;
-    if (data.support) {
+  _onMsgSupport(data:boolean) {
+    this.isShowDebug = data;
+    if (data) {
       // 如果节点树为空，就刷新一次
       if (this.treeData.length === 0) {
         // this.onBtnClickUpdateTree();
@@ -135,9 +134,10 @@ export default class Index extends Vue {
       if (!data) {
         return;
       }
-      if (data.target === Page.Background) {
+      if (PluginEvent.check(data, Page.Background, Page.Devtools)) {
+        console.log(`[Devtools] ${JSON.stringify(data)}`);
+        PluginEvent.finish(data);
         let eventData: any = data.data;
-        console.log(data)
         switch (data.msg) {
           case Msg.UrlChange: {
             break;
@@ -147,7 +147,7 @@ export default class Index extends Vue {
             break;
           }
           case Msg.Support: {
-            this._onMsgSupport(eventData as DataSupport)
+            this._onMsgSupport(!!eventData)
             break;
           }
           case Msg.NodeInfo: {
@@ -194,8 +194,7 @@ export default class Index extends Vue {
       console.log("环境异常，无法执行函数");
       return;
     }
-    debugger
-    let sendData = new PluginEvent(Page.Background, msg, data)
+    let sendData = new PluginEvent(Page.Devtools, Page.Background, msg, data)
     connectBackground.postMessageToBackground(sendData);
   }
 

source/src/devtools/inject.ts

@@ -32,21 +32,25 @@ class CCInspector {
         return
       }
       let pluginEvent: PluginEvent = event.data;
-      if (pluginEvent.target === Page.Inject) {
+      if (PluginEvent.check(pluginEvent, Page.Content, Page.Inject)) {
+        console.log(`[Inject] ${JSON.stringify(pluginEvent)}`, 'color:green;');
+        PluginEvent.finish(pluginEvent)
         switch (pluginEvent.msg) {
           case Msg.UrlChange:
           case Msg.Support: {
             let isCocosGame = this._isCocosGame();
-            this.sendMsgToContent(Msg.Support, {support: isCocosGame});
+            this.notifySupportGame(isCocosGame)
             break;
           }
           case Msg.TreeInfo: {
-
             debugger
+            this.updateTreeInfo();
             break;
           }
           case Msg.NodeInfo: {
             debugger
+            let nodeUUID = pluginEvent.data;
+            this.getNodeInfo(nodeUUID);
             break;
           }
           case Msg.SetProperty: {
@@ -60,31 +64,11 @@ class CCInspector {
 
   sendMsgToContent(msg: Msg, data: any) {
     // 发送给content.js处理，也会导致发送给了自身，死循环
-    window.postMessage(new PluginEvent(Page.Inject, msg, data), "*");
+    window.postMessage(new PluginEvent(Page.Inject, Page.Content, msg, data), "*");
   }
 
-  devPageCallEntry(str: string) {
-    let para: PluginEvent = JSON.parse(str);
-    debugger
-    if (this._isCocosGame()) {
-      switch (para.msg) {
-        case Msg.TreeInfo:
-          this.updateTreeInfo();
-          break;
-        case Msg.Support:
-
-          break;
-        case Msg.MemoryInfo:
-          break;
-        case Msg.SetProperty:
-          break;
-        case Msg.NodeInfo:
-          this.getNodeInfo(para.data as string);
-          break;
-      }
-    } else {
-      this.sendMsgToContent(Msg.Support, {support: false});
-    }
+  notifySupportGame(b: boolean) {
+    this.sendMsgToContent(Msg.Support, b);
   }
 
   updateTreeInfo() {
@@ -108,6 +92,8 @@ class CCInspector {
       } else {
         this.sendMsgToContent(Msg.Support, {support: false, msg: "未发现游戏场景,不支持调试游戏!"});
       }
+    } else {
+      this.notifySupportGame(false)
     }
   }
 

source/src/devtools/type.ts

@@ -4,10 +4,7 @@ export class NodeData {
   children: Array<NodeData> = []
 }
 
-export class DataSupport {
-  support: boolean = false;
-  msg?: string;
-}
+