From 9ec28b510b82c8858726fae028b43932283faa07 Mon Sep 17 00:00:00 2001 From: xuyanfeng Date: Wed, 28 Apr 2021 19:49:26 +0800 Subject: [PATCH] =?UTF-8?q?=E6=89=93=E9=80=9A=E6=B5=81=E7=A8=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- source/src/background.ts | 10 +++---- source/src/content.ts | 16 +++++----- source/src/core/types.ts | 20 ++++++++++++- source/src/devtools/connectBackground.ts | 1 - source/src/devtools/index.vue | 21 +++++++------ source/src/devtools/inject.ts | 38 ++++++++---------------- source/src/devtools/type.ts | 5 +--- 7 files changed, 55 insertions(+), 56 deletions(-) diff --git a/source/src/background.ts b/source/src/background.ts index f95bf78..14431d9 100644 --- a/source/src/background.ts +++ b/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); diff --git a/source/src/content.ts b/source/src/content.ts index 147c221..1a188f4 100644 --- a/source/src/content.ts +++ b/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 - console.log(`%c[Connect-Message] ${JSON.stringify(data)}`, "color:green;") - if (data.target === Page.Content) { - data.target = Page.Inject; + if (PluginEvent.check(data, Page.Background, Page.Content)) { + console.log(`%c[Connect-Message] ${JSON.stringify(data)}`, "color:green;") + 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; - console.log(`%c[Window-Message] ${JSON.stringify(data)}`, "color:green;"); - if (data.target === Page.Inject) { - data.target = Page.Background; + if (PluginEvent.check(data, Page.Inject, Page.Content)) { + console.log(`%c[Window-Message] ${JSON.stringify(data)}`, "color:green;"); + 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,不支持调试游戏!" }) diff --git a/source/src/core/types.ts b/source/src/core/types.ts index c7638e9..2c9ab81 100644 --- a/source/src/core/types.ts +++ b/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; diff --git a/source/src/devtools/connectBackground.ts b/source/src/devtools/connectBackground.ts index f7eb7c1..bdd8f87 100644 --- a/source/src/devtools/connectBackground.ts +++ b/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) }); } diff --git a/source/src/devtools/index.vue b/source/src/devtools/index.vue index d9ff8c5..987d6b9 100644 --- a/source/src/devtools/index.vue +++ b/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); } diff --git a/source/src/devtools/inject.ts b/source/src/devtools/inject.ts index 3073709..abc22c6 100644 --- a/source/src/devtools/inject.ts +++ b/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) } } diff --git a/source/src/devtools/type.ts b/source/src/devtools/type.ts index 58368e1..bfb18ed 100644 --- a/source/src/devtools/type.ts +++ b/source/src/devtools/type.ts @@ -4,10 +4,7 @@ export class NodeData { children: Array = [] } -export class DataSupport { - support: boolean = false; - msg?: string; -} +