From 1af9abfb2de08df9bf71e3cbf197d5b9d32d9344 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=AE=B8=E5=BD=A6=E5=B3=B0?= <774177933@qq.com> Date: Mon, 18 Mar 2019 12:05:07 +0800 Subject: [PATCH] no message --- CocosCreatorInspector/src/background/index.js | 22 ++- CocosCreatorInspector/src/content/index.js | 26 +-- CocosCreatorInspector/src/content/inject.js | 166 ++++++++++-------- CocosCreatorInspector/src/core/event-mgr.js | 4 + CocosCreatorInspector/src/core/page.ejs | 6 +- CocosCreatorInspector/src/core/plugin-msg.js | 14 ++ .../src/devtools/panel/evalCodeString.js | 3 + .../src/devtools/panel/index.vue | 112 ++++++++---- 8 files changed, 223 insertions(+), 130 deletions(-) create mode 100644 CocosCreatorInspector/src/core/plugin-msg.js create mode 100644 CocosCreatorInspector/src/devtools/panel/evalCodeString.js diff --git a/CocosCreatorInspector/src/background/index.js b/CocosCreatorInspector/src/background/index.js index 192167b..354d09f 100644 --- a/CocosCreatorInspector/src/background/index.js +++ b/CocosCreatorInspector/src/background/index.js @@ -1,6 +1,19 @@ +let PluginMsg = require("../core/plugin-msg"); +// 链接池子 +let ConnPool = { + Devtools: null, + +}; + function shortConnectionLink(request, sender, sendResponse) { console.log(`%c[短连接|id:${sender.id}|url:${sender.url}]\n${JSON.stringify(request)}`, 'background:#aaa;color:#BD4E19') sendResponse && sendResponse(request); + if (request.msg === PluginMsg.Msg.Support || + request.msg === PluginMsg.Msg.ListInfo || + request.msg === PluginMsg.Msg.NodeInfo) { + // 将消息转发到devtools + ConnPool.Devtools && ConnPool.Devtools.postMessage(request); + } } function longConnectionLink(data, sender) { @@ -14,11 +27,18 @@ function longConnectionLink(data, sender) { chrome.runtime.onConnect.addListener(function (port) { console.log(`%c[长连接:${port.name}] 建立链接!`, 'background:#aaa;color:#ff0000'); port.onMessage.addListener(longConnectionLink); - port.postMessage("ok"); port.onDisconnect.addListener(function (port) { console.log(`%c[长连接:${port.name}] 断开链接!`, 'background:#aaa;color:#00ff00'); port.onMessage.removeListener(longConnectionLink); + if (port.name === PluginMsg.Page.Devtools) { + ConnPool.Devtools = null; + } }); + + // 缓存 + if (port.name === PluginMsg.Page.Devtools) { + ConnPool.Devtools = port; + } }); // background.js 更像是一个主进程,负责整个插件的调度,生命周期和chrome保持一致 diff --git a/CocosCreatorInspector/src/content/index.js b/CocosCreatorInspector/src/content/index.js index 132edba..069a0a3 100644 --- a/CocosCreatorInspector/src/content/index.js +++ b/CocosCreatorInspector/src/content/index.js @@ -1,6 +1,8 @@ // 具有操作dom的能力 // 加载其他脚本 // content.js 和原始界面共享DOM,但是不共享js,要想访问页面js,只能通过注入的方式 +const PluginMsg = require("../core/plugin-msg"); + function injectScriptToPage(url) { let content = chrome.extension.getURL(url) console.log(`[cc-inspector]注入脚本:${content}`); @@ -19,17 +21,15 @@ injectScriptToPage("js/inject.js"); // 和background.js保持长连接通讯 let conn = chrome.runtime.connect({name: "connect.js"}) // conn.postMessage('test'); -let EventMgr=require("../core/event-mgr"); -debugger -EventMgr.id="inject-id"; -conn.onMessage.addListener(function (port) { - debugger +conn.onMessage.addListener(function (data) { + console.log(data) }) -// 接受来自inject.js的消息数据 +// 接受来自inject.js的消息数据,然后中转到background.js window.addEventListener('message', function (event) { - debugger let data = event.data; - // console.log("[contentScripts] " + JSON.stringify(data)); + if (data.data.log) { + console.log(`%c[content] ${JSON.stringify(data)}`, "color:#BD4E19"); + } chrome.runtime.sendMessage(data); }, false); @@ -44,7 +44,13 @@ if (gameCanvas) { } else { // console.log("can't find GameCanvas element"); // 和background.js保持短连接通讯 - chrome.runtime.sendMessage({type: 0, msg: "no creator game!"}, function (data) { - console.log(data) + chrome.runtime.sendMessage({ + msg: PluginMsg.Msg.Support, + data: { + support: false, + msg: "未发现GameCanvas,不支持调试游戏!" + } + }, function (data) { + // console.log(data) }); } diff --git a/CocosCreatorInspector/src/content/inject.js b/CocosCreatorInspector/src/content/inject.js index 1b78703..8e6e3a9 100644 --- a/CocosCreatorInspector/src/content/inject.js +++ b/CocosCreatorInspector/src/content/inject.js @@ -1,20 +1,81 @@ // eval 注入脚本的代码,变量尽量使用var,后来发现在import之后,let会自动变为var -export default function () { - let msgType = { +const PluginMsg = require("../core/plugin-msg"); + +let cc_inspector = { + inspectorGameMemoryStorage: {}, + msgType: { nodeInfo: 2,//节点信息 nodeListInfo: 1,// 节点列表信息 notSupport: 0,// 不支持的游戏 - }; - let postData = { + }, + postData: { scene: { name: "", children: [] }, - }; - window.inspectorGameMemoryStorage = window.inspectorGameMemoryStorage || {}; + }, + init() { + setInterval(function () { + // this.checkIsGamePage(false); + // if (this.stop) { + // } else { + // } + }.bind(this), 1000); + let isCocosCreatorGame = this.checkIsGamePage(true); + if (isCocosCreatorGame) { + let scene = cc.director.getScene(); + if (scene) { + this.postData.scene = { + type: 1,// 标识类型 + uuid: scene.uuid, + name: scene.name, + children: [], + }; + this.inspectorGameMemoryStorage[scene.uuid] = scene; + let sceneChildren = scene.getChildren(); + for (let i = 0; i < sceneChildren.length; i++) { + let node = sceneChildren[i]; + this.getNodeChildren(node, this.postData.scene.children); + } + // console.log(postData); + this.sendMsgToDevTools(PluginMsg.Msg.ListInfo, {data: this.postData}); + } else { + this.postData.scene = null; + this.sendMsgToDevTools(PluginMsg.Msg.Support, {support: false, msg: "未发现游戏场景,不支持调试游戏!"}); + } + } else { + console.log("未发现cocos creator game"); + } + }, + checkIsGamePage(isLog) { + debugger + // 检测是否包含cc变量 + let isCocosCreatorGame = true; + try { + cc + } catch (e) { + isCocosCreatorGame = false; + this.sendMsgToDevTools(PluginMsg.Msg.Support, {support: false, msg: "不支持调试游戏!",log:isLog}); + } + return isCocosCreatorGame; + }, + testEval() { + console.log("hello devtools eval") + }, + testMsg1() { + window.postMessage("testMsg1") + }, + testMsg2() { + debugger + chrome.runtime.connect({name: "inject"}); + }, + testMsg3() { + debugger + chrome.runtime.sendMessage("ffff"); + }, // 收集组件信息 - function getNodeComponentsInfo(node) { + getNodeComponentsInfo(node) { let ret = []; let nodeComp = node._components; for (let i = 0; i < nodeComp.length; i++) { @@ -27,36 +88,36 @@ export default function () { }); } return ret; - } + }, - window.pluginSetNodeColor = function (uuid, colorHex) { + pluginSetNodeColor(uuid, colorHex) { let node = window.inspectorGameMemoryStorage[uuid]; if (node) { node.color = cc.hexToColor(colorHex); } - }; - window.pluginSetNodeRotation = function (uuid, rotation) { + }, + pluginSetNodeRotation(uuid, rotation) { let node = window.inspectorGameMemoryStorage[uuid]; if (node) { node.rotation = rotation; } - }; - window.pluginSetNodePosition = function (uuid, x, y) { + }, + pluginSetNodePosition(uuid, x, y) { let node = window.inspectorGameMemoryStorage[uuid]; if (node) { node.x = x; node.y = y; } - }; - window.pluginSetNodeSize = function (uuid, width, height) { + }, + pluginSetNodeSize(uuid, width, height) { let node = window.inspectorGameMemoryStorage[uuid]; if (node) { node.width = width; node.height = height; } - }; + }, // 设置节点是否可视 - window.pluginSetNodeActive = function (uuid, isActive) { + pluginSetNodeActive(uuid, isActive) { let node = window.inspectorGameMemoryStorage[uuid]; if (node) { if (isActive === 1) { @@ -65,9 +126,9 @@ export default function () { node.active = false; } } - }; + }, // 获取节点信息 - window.getNodeInfo = function (uuid) { + getNodeInfo(uuid) { let node = window.inspectorGameMemoryStorage[uuid]; if (node) { let nodeComp = getNodeComponentsInfo(node); @@ -106,10 +167,10 @@ export default function () { // 未获取到节点数据 console.log("未获取到节点数据"); } - }; + }, // 收集节点信息 - function getNodeChildren(node, data) { + getNodeChildren(node, data) { // console.log("nodeName: " + node.name); let nodeData = { uuid: node.uuid, @@ -124,65 +185,14 @@ export default function () { getNodeChildren(childItem, nodeData.children); } data.push(nodeData); - } - - window.sendMsgToDevTools = function (type, msg) { - window.postMessage({type: type, msg: msg}, "*"); - }; - // 检测是否包含cc变量 - let isCocosCreatorGame = true; - try { - let cocosInspectorTestVar = cc; - } catch (e) { - isCocosCreatorGame = false; - window.sendMsgToDevTools(msgType.notSupport, "不支持调试游戏!"); - } - - if (isCocosCreatorGame) { - let scene = cc.director.getScene(); - if (scene) { - postData.scene = { - type: 1,// 标识类型 - uuid: scene.uuid, - name: scene.name, - children: [], - }; - window.inspectorGameMemoryStorage[scene.uuid] = scene; - - let sceneChildren = scene.getChildren(); - for (let i = 0; i < sceneChildren.length; i++) { - let node = sceneChildren[i]; - getNodeChildren(node, postData.scene.children); - } - // console.log(postData); - window.sendMsgToDevTools(msgType.nodeListInfo, postData); - } else { - postData.scene = null; - window.sendMsgToDevTools(msgType.notSupport, "不支持调试游戏!"); - } - } else { - console.log("未发现cocos creator game"); - } + }, + sendMsgToDevTools(msg, data) { + window.postMessage({msg: msg, data: data}, "*"); + }, } +window.ccinspector = window.ccinspector || cc_inspector; +window.ccinspector.init && window.ccinspector.init();// 执行初始化函数 -window.ccinspector = window.ccinspector || {test: 1}; -setInterval(function () { - if (window.ccinspector.stop) { - } else { - console.log("我是注入的脚本"); - } -}, 1000); -window.ccinspector.testMsg1 = function () { - window.postMessage("testMsg1") -} -window.ccinspector.testMsg2 = function () { - debugger - chrome.runtime.connect({name: "inject"}); -} -window.ccinspector.testMsg3=function () { - debugger - chrome.runtime.sendMessage("ffff"); -} diff --git a/CocosCreatorInspector/src/core/event-mgr.js b/CocosCreatorInspector/src/core/event-mgr.js index e432721..e11630c 100644 --- a/CocosCreatorInspector/src/core/event-mgr.js +++ b/CocosCreatorInspector/src/core/event-mgr.js @@ -1,3 +1,7 @@ +const PluginMsg = require("./plugin-msg"); module.exports = { id: "event-mgr", + testInit(name) { + chrome.runtime.connect({name: name}) + } } diff --git a/CocosCreatorInspector/src/core/page.ejs b/CocosCreatorInspector/src/core/page.ejs index da78023..5497d40 100644 --- a/CocosCreatorInspector/src/core/page.ejs +++ b/CocosCreatorInspector/src/core/page.ejs @@ -1,10 +1,10 @@ - + <%= htmlWebpackPlugin.options.title %> - -
+ +
diff --git a/CocosCreatorInspector/src/core/plugin-msg.js b/CocosCreatorInspector/src/core/plugin-msg.js new file mode 100644 index 0000000..e79cffc --- /dev/null +++ b/CocosCreatorInspector/src/core/plugin-msg.js @@ -0,0 +1,14 @@ +module.exports = { + Page: { + Inject: "inject.js", + Devtools: "devtools.js", + Content: "content.js", + Popup: "popup.js", + Options: "options.js", + }, + Msg: { + NodeInfo: "node_info",// 具体的节点信息 + ListInfo: "list_info",// 节点树信息 + Support: "game_support",// 游戏支持信息 + } +} diff --git a/CocosCreatorInspector/src/devtools/panel/evalCodeString.js b/CocosCreatorInspector/src/devtools/panel/evalCodeString.js new file mode 100644 index 0000000..3196c0b --- /dev/null +++ b/CocosCreatorInspector/src/devtools/panel/evalCodeString.js @@ -0,0 +1,3 @@ +export default function () { + console.log("11") +} diff --git a/CocosCreatorInspector/src/devtools/panel/index.vue b/CocosCreatorInspector/src/devtools/panel/index.vue index 5b036ea..affb3b9 100644 --- a/CocosCreatorInspector/src/devtools/panel/index.vue +++ b/CocosCreatorInspector/src/devtools/panel/index.vue @@ -1,10 +1,12 @@