no message

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保持一致

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)
   });
 }

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);
+  },
+  sendMsgToDevTools(msg, data) {
+    window.postMessage({msg: msg, data: data}, "*");
+  },
 }
+window.ccinspector = window.ccinspector || cc_inspector;
+window.ccinspector.init && window.ccinspector.init();// 执行初始化函数
 
-  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");
-  }
-}
 
-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");
-}

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})
+  }
 }

CocosCreatorInspector/src/core/page.ejs

@@ -1,10 +1,10 @@
 <!DOCTYPE html>
-<html>
+<html style="width: 100%;height: 100%;">
 <head>
   <meta charset="utf-8">
   <title><%= htmlWebpackPlugin.options.title %></title>
 </head>
-<body>
-  <div id="app"></div>
+<body style="width: 100%;height: 100%;">
+<div id="app" style="width: 100%;height: 100%;"></div>
 </body>
 </html>

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",// 游戏支持信息
+  }
+}

CocosCreatorInspector/src/devtools/panel/evalCodeString.js

@@ -0,0 +1,3 @@
+export default function () {
+  console.log("11")
+}

CocosCreatorInspector/src/devtools/panel/index.vue

@@ -1,10 +1,12 @@
 <template>
-  <div id="app">
+  <div style="display: flex;width: 100%; height: 100%;flex-direction: column">
+    <div v-show="isShowDebug">
+      <div>
         <el-button type="success" class="el-icon-refresh" size="mini" @click="onBtnClickUpdatePage">刷新</el-button>
         <el-button type="success" size="mini" @click="onBtnClickTest1">Test1</el-button>
         <el-button type="success" size="mini" @click="onBtnClickTest2">Test2</el-button>
         <el-button type="success" size="mini" @click="onBtnClickTest3">Test3</el-button>
-    <div v-show="isShowDebug">
+      </div>
       <el-row>
         <el-col :span="8">
           <div class="grid-content treeList">
@@ -23,48 +25,50 @@
         </el-col>
       </el-row>
     </div>
-    <div v-show="!isShowDebug">
-      未发现cocos creator的游戏!
+    <div v-show="!isShowDebug" style="display: flex; flex: 1;" class="center-center horizontal">
+      <span style="margin-right: 20px;">未发现cocos creator的游戏!</span>
+      <el-button type="success" class="el-icon-refresh" size="mini" @click="onBtnClickUpdatePage">刷新</el-button>
     </div>
   </div>
 </template>
 
 <script>
   // import injectScript from '../injectScript.js'
+  // import EvalCode from "./evalCodeString.js";
+
   let injectScript = "";
+  const PluginMsg = require("../../core/plugin-msg");
 
   export default {
-    name: "app",
     data() {
       return {
         isShowDebug: false,
         treeItemData: {},
         treeData: [],
         treeDataMap: {},
+        bgConn: null,// 与background.js的链接
+
+        defaultProps: null,
       }
     },
     created() {
       // chrome.devtools.inspectedWindow.tabId
-      let conn = chrome.runtime.connect({name: "devtools"});
-      conn.onMessage.addListener(function (data, sender) {
-        debugger
-        if (data !== null) {
-          let msgType = {
-            nodeInfo: 2,//节点信息
-            nodeListInfo: 1,// 节点列表信息
-            notSupport: 0,// 不支持的游戏
-          };
-          if (data.type === msgType.nodeListInfo) {// 游戏节点
-            this.isShowDebug = true;
-            // let str = JSON.stringify(message.msg);
-            // console.log("onMessage: " + str);
-            this._updateView(data.msg);
-          } else if (data.type === msgType.notSupport) {// 不支持调试
-            this.isShowDebug = false;
-          } else if (data.type === msgType.nodeInfo) {
-            this.isShowDebug = true;
-            this.treeItemData = data.msg;
+      // 接收来自background.js的消息数据
+      this.bgConn = chrome.runtime.connect({name: PluginMsg.Page.Devtools});
+      this.bgConn.onMessage.addListener(function (data, sender) {
+        if (!data) {
+          return;
         }
+        let eventData = data.data;
+        let eventMsg = data.msg;
+        if (eventMsg === PluginMsg.Msg.ListInfo) {
+          this.isShowDebug = true;
+          this._updateView(eventData);
+        } else if (eventMsg === PluginMsg.Msg.Support) {
+          this.isShowDebug = eventData.support;
+        } else if (eventMsg === PluginMsg.Msg.NodeInfo) {
+          this.isShowDebug = true;
+          this.treeItemData = eventData;
         }
       }.bind(this));
 
@@ -176,18 +180,32 @@
         return evalCode;
       },
 
+      evalInspectorFunction(funcString, parm) {
+        if (funcString || funcString.length > 0) {
+          let injectCode =
+            `if(window.ccinspector){
+              let func = window.ccinspector.${funcString};
+              if(func){
+                console.log("执行${funcString}成功");
+                func.apply(window.ccinspector,[${parm}]);
+              }else{
+                console.log("未发现${funcString}函数");
+              }
+            }else{
+              console.log("可能脚本没有注入");
+            }`;
+          chrome.devtools.inspectedWindow.eval(injectCode);
+        } else {
+          console.log("执行失败!");
+        }
+      },
       onBtnClickUpdatePage() {
         debugger
-
-        let injectCode = `console.log(window.ccinspector);window.ccinspector.stop=!window.ccinspector.stop;`;
-        chrome.devtools.inspectedWindow.eval(injectCode);
-        return;
-        let code = this._getInjectScriptString();
-        chrome.devtools.inspectedWindow.eval(code, function () {
-          console.log("刷新成功!");
-        });
-
-
+        this.evalInspectorFunction("checkIsGamePage", "true");
+        // let code = this._getInjectScriptString();
+        // chrome.devtools.inspectedWindow.eval(code, function () {
+        //   console.log("刷新成功!");
+        // });
       },
       onBtnClickTest1() {
         chrome.devtools.inspectedWindow.eval(`window.ccinspector.testMsg1()`)
@@ -229,4 +247,22 @@
   body span h1 h2 h3 {
     font-family: BlinkMacSystemFont, 'Helvetica Neue', Helvetica, 'Lucida Grande', 'Segoe UI', Ubuntu, Cantarell, 'SourceHanSansCN-Normal', Arial, sans-serif
   }
+
+  .layout {
+    display: block;
+  }
+
+  .horizontal {
+    flex-direction: row;
+  }
+
+  .vertical {
+    flex-direction: column;
+  }
+
+  .center-center {
+    align-content: center;
+    align-items: center;
+    justify-content: center;
+  }
 </style>