CocosPlugin/cc-inspector-chrome
1
0
Fork 0
mirror of https://github.com/tidys/cc-inspector-chrome synced 2025-12-14 02:38:45 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

梳理事件流

Browse Source
This commit is contained in:
xuyanfeng
2021-04-28 13:59:16 +08:00
parent 7b3ee52a6d
commit c4fb53646f
9 changed files with 167 additions and 141 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
source/src/devtools/connectBackground.ts
View File

@@ -1,12 +1,11 @@
import * as PluginMsg from "@/core/plugin-msg";
import {PluginEvent} from "@/devtools/type";
import {PluginEvent, Page} from "@/core/types";
class ConnectBackground {
connect: chrome.runtime.Port | null = null;
constructor() {
if (chrome && chrome.runtime) {
this.connect = chrome.runtime.connect({name: PluginMsg.Page.Devtools});
this.connect = chrome.runtime.connect({name: Page.Devtools});
this.connect.onDisconnect.addListener(() => {
console.log(`%c[Connect-Dis]`, 'color:red;')
this.connect = null;
@@ -23,7 +22,7 @@ class ConnectBackground {
}
}
postMessage(data: PluginEvent) {
postMessageToBackground(data: PluginEvent) {
if (this.connect) {
this.connect.postMessage(data)
} else {

77
source/src/devtools/index.vue
View File

@@ -45,10 +45,10 @@
import Vue from "vue";
import {Component} from "vue-property-decorator";
import properties from "./propertys.vue";
import {DataSupport, PluginEvent, NodeData} from "@/devtools/type";
import {DataSupport, NodeData} from "@/devtools/type";
import {PluginEvent, Page, Msg} from '@/core/types'
import {connectBackground} from "@/devtools/connectBackground";
const PluginMsg = require("../core/plugin-msg");
@Component({
components: {
properties,
@@ -117,7 +117,7 @@ export default class Index extends Vue {
if (data.support) {
// 如果节点树为空，就刷新一次
if (this.treeData.length === 0) {
this.onBtnClickUpdateTree();
// this.onBtnClickUpdateTree();
}
} else {
this._reset();
@@ -131,39 +131,41 @@ export default class Index extends Vue {
_initChromeRuntimeConnect() {
// 接收来自background.js的消息数据
connectBackground.onBackgroundMessage((data: any, sender: any) => {
connectBackground.onBackgroundMessage((data: PluginEvent, sender: any) => {
if (!data) {
return;
}
let eventData: any = data.data;
console.log(data)
switch (data.msg) {
case PluginMsg.Msg.UrlChange: {
break;
}
case PluginMsg.Msg.TreeInfo: {
this._onMsgListInfo(eventData as Array<NodeData>);
break;
}
case PluginMsg.Msg.Support: {
this._onMsgSupport(eventData as DataSupport)
break;
}
case PluginMsg.Msg.NodeInfo: {
this._onMsgNodeInfo(eventData);
break;
}
case PluginMsg.Msg.MemoryInfo: {
this._onMsgMemory(eventData)
break;
}
case PluginMsg.Msg.TabsInfo: {
debugger
break
if (data.target === Page.Background) {
let eventData: any = data.data;
console.log(data)
switch (data.msg) {
case Msg.UrlChange: {
break;
}
case Msg.TreeInfo: {
this._onMsgListInfo(eventData as Array<NodeData>);
break;
}
case Msg.Support: {
this._onMsgSupport(eventData as DataSupport)
break;
}
case Msg.NodeInfo: {
this._onMsgNodeInfo(eventData);
break;
}
case Msg.MemoryInfo: {
this._onMsgMemory(eventData)
break;
}
case Msg.TabsInfo: {
debugger
break
}
}
}
});
}
handleNodeClick(data: NodeData) {
@@ -172,8 +174,7 @@ export default class Index extends Vue {
// console.log(data);
let uuid = data.uuid;
if (uuid !== undefined) {
PluginMsg.Msg.TabsInfo;
this.runToContentScript(PluginMsg.Msg.NodeInfo, uuid);
this.runToContentScript(Msg.NodeInfo, uuid);
}
}
@@ -188,14 +189,14 @@ export default class Index extends Vue {
}
runToContentScript(msg: string, data?: any) {
runToContentScript(msg: Msg, data?: any) {
if (!chrome || !chrome.devtools) {
console.log("环境异常，无法执行函数");
return;
}
debugger
let sendData = new PluginEvent(msg, data)
connectBackground.postMessage(sendData);
let sendData = new PluginEvent(Page.Background, msg, data)
connectBackground.postMessageToBackground(sendData);
}
// 问题：没有上下文的权限，只能操作DOM
@@ -220,15 +221,15 @@ export default class Index extends Vue {
}
onBtnClickUpdateTree() {
this.runToContentScript(PluginMsg.Msg.TreeInfo);
this.runToContentScript(Msg.TreeInfo);
}
onBtnClickUpdatePage() {
this.runToContentScript(PluginMsg.Msg.Support);
this.runToContentScript(Msg.Support);
}
onMemoryTest() {
this.runToContentScript(PluginMsg.Msg.MemoryInfo);
this.runToContentScript(Msg.MemoryInfo);
}
onNodeExpand(data: NodeData) {

74
source/src/devtools/inject.ts
View File

@@ -1,5 +1,4 @@
// eval 注入脚本的代码,变量尽量使用var,后来发现在import之后,let会自动变为var
import * as PluginMsg from '../core/plugin-msg'
import {
ArrayData,
BoolData,
@@ -13,7 +12,7 @@ import {
Vec3Data
} from "./data";
import {PluginEvent} from './type'
import {PluginEvent, Page, Msg} from '@/core/types'
class CCInspector {
inspectorGameMemoryStorage: Record<string, any> = {}
@@ -27,57 +26,64 @@ class CCInspector {
// }
}, 1000);
// 注册cc_after_render事件
window.addEventListener("message", (event: any) => {
// 接受来自background的事件，有可能也会受到其他插件的
window.addEventListener("message", (event) => {
// 接受来自content的事件，有可能也会受到其他插件的
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: {
if (pluginEvent.target === Page.Inject) {
switch (pluginEvent.msg) {
case Msg.UrlChange:
case Msg.Support: {
let isCocosGame = this._isCocosGame();
this.sendMsgToContent(Msg.Support, {support: isCocosGame});
break;
}
case Msg.TreeInfo: {
debugger
break;
}
case PluginMsg.Msg.NodeInfo: {
debugger
break;
}
case PluginMsg.Msg.SetProperty: {
debugger;
break;
debugger
break;
}
case Msg.NodeInfo: {
debugger
break;
}
case Msg.SetProperty: {
debugger;
break;
}
}
}
});
}
sendMsgToContent(msg: Msg, data: any) {
// 发送给content.js处理，也会导致发送给了自身，死循环
window.postMessage(new PluginEvent(Page.Inject, msg, data), "*");
}
devPageCallEntry(str: string) {
let para: PluginEvent = JSON.parse(str);
debugger
if (this._isCocosGame()) {
switch (para.msg) {
case PluginMsg.Msg.TreeInfo:
case Msg.TreeInfo:
this.updateTreeInfo();
break;
case PluginMsg.Msg.Support:
case Msg.Support:
break;
case PluginMsg.Msg.MemoryInfo:
case Msg.MemoryInfo:
break;
case PluginMsg.Msg.SetProperty:
case Msg.SetProperty:
break;
case PluginMsg.Msg.NodeInfo:
case Msg.NodeInfo:
this.getNodeInfo(para.data as string);
break;
}
} else {
this.sendMsgToContent(PluginMsg.Msg.Support, {support: false});
this.sendMsgToContent(Msg.Support, {support: false});
}
}
@@ -98,9 +104,9 @@ class CCInspector {
let node = sceneChildren[i];
this.getNodeChildren(node, sendData.children);
}
this.sendMsgToContent(PluginMsg.Msg.TreeInfo, sendData);
this.sendMsgToContent(Msg.TreeInfo, sendData);
} else {
this.sendMsgToContent(PluginMsg.Msg.Support, {support: false, msg: "未发现游戏场景,不支持调试游戏!"});
this.sendMsgToContent(Msg.Support, {support: false, msg: "未发现游戏场景,不支持调试游戏!"});
}
}
}
@@ -276,7 +282,7 @@ class CCInspector {
let compGroup = this._getGroupData(itemComp);
groupData.push(compGroup);
}
this.sendMsgToContent(PluginMsg.Msg.NodeInfo, groupData);
this.sendMsgToContent(Msg.NodeInfo, groupData);
} else {
// 未获取到节点数据
console.log("未获取到节点数据");
@@ -297,13 +303,9 @@ class CCInspector {
}
}
sendMsgToContent(msg: string, data: any) {
// 发送给content.js处理
window.postMessage(new PluginEvent(msg, data), "*");
}
onMemoryInfo() {
this.sendMsgToContent(PluginMsg.Msg.MemoryInfo, {
this.sendMsgToContent(Msg.MemoryInfo, {
performance: {
// @ts-ignore
jsHeapSizeLimit: window.performance.memory.jsHeapSizeLimit,

2
source/src/devtools/register-panel.ts
View File

@@ -1,6 +1,4 @@
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() {

8
source/src/devtools/type.ts
View File

@@ -10,12 +10,4 @@ export class DataSupport {
}
export class PluginEvent {
msg: string = '';
data: any = null;
constructor(msg: string, data?: any) {
this.msg = msg;
this.data = data || null;
}
}