no message

CocosCreatorInspector/src/background/index.js

@@ -2,11 +2,12 @@ let PluginMsg = require("../core/plugin-msg");
 // 链接池子
 let ConnPool = {
   Devtools: null,
-
+  DevtoolsPanel: null,
+  Content: null,
 };
 
 function shortConnectionLink(request, sender, sendResponse) {
-  console.log(`%c[短连接|id:${sender.id}|url:${sender.url}]\n${JSON.stringify(request)}`, 'background:#aaa;color:#BD4E19')
+  // 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 ||
@@ -19,6 +20,11 @@ function shortConnectionLink(request, sender, sendResponse) {
 function longConnectionLink(data, sender) {
   console.log(`%c[长连接:${sender.name}]\n${JSON.stringify(data)}`, 'background:#aaa;color:#bada55')
   sender.postMessage(data);
+  if (data.msg === PluginMsg.Msg.UrlChange) {
+    if (sender.name === PluginMsg.Page.DevToolsPanel) {
+      ConnPool.Content && ConnPool.Content.postMessage({msg: PluginMsg.Msg.UrlChange, data: {}})
+    }
+  }
   // chrome.tabs.executeScript(message.tabId, {code: message.content});
   // port.postMessage(message);
 }
@@ -32,12 +38,20 @@ chrome.runtime.onConnect.addListener(function (port) {
     port.onMessage.removeListener(longConnectionLink);
     if (port.name === PluginMsg.Page.Devtools) {
       ConnPool.Devtools = null;
+    } else if (port.name === PluginMsg.Page.Content) {
+      ConnPool.Content = null;
+    } else if (port.name === PluginMsg.Page.DevToolsPanel) {
+      ConnPool.DevtoolsPanel = null;
     }
   });
 
   // 缓存
   if (port.name === PluginMsg.Page.Devtools) {
     ConnPool.Devtools = port;
+  } else if (port.name === PluginMsg.Page.Content) {
+    ConnPool.Content = port;
+  } else if (port.name === PluginMsg.Page.DevToolsPanel) {
+    ConnPool.DevtoolsPanel = port;
   }
 });
 
@@ -45,6 +59,12 @@ chrome.runtime.onConnect.addListener(function (port) {
 // [短连接] 监听来自content.js发来的事件
 chrome.runtime.onMessage.addListener(shortConnectionLink);
 
+chrome.tabs.onUpdated.addListener(function (tabId, changeInfo, tab) {
+  if (changeInfo.status === "complete") {
+    // 加载新的url
+    ConnPool.Content.postMessage({msg: PluginMsg.Msg.UrlChange, data: {url: tab.favIconUrl}});
+  }
+})
 
 function createPluginMenus() {
   // 右键菜单

CocosCreatorInspector/src/content/index.js

@@ -19,10 +19,11 @@ function injectScriptToPage(url) {
 injectScriptToPage("js/inject.js");
 
 // 和background.js保持长连接通讯
-let conn = chrome.runtime.connect({name: "connect.js"})
+let conn = chrome.runtime.connect({name: PluginMsg.Page.Content})
 // conn.postMessage('test');
 conn.onMessage.addListener(function (data) {
-  console.log(data)
+  // 将background.js的消息返回到injection.js
+  window.postMessage(data, "*");
 })
 // 接受来自inject.js的消息数据,然后中转到background.js
 window.addEventListener('message', function (event) {

CocosCreatorInspector/src/content/inject.js

@@ -16,13 +16,17 @@ let cc_inspector = {
   },
   init() {
     setInterval(function () {
-      this.checkIsGamePage(true);
+      // this.checkIsGamePage(true);
       // if (this.stop) {
       // } else {
       // }
     }.bind(this), 1000);
     // 注册cc_after_render事件
-
+    window.addEventListener('message', function (event) {
+      if (event.data.msg === PluginMsg.Msg.UrlChange) {
+        this.checkIsGamePage(true);
+      }
+    }.bind(this));
   },
   updateTreeInfo() {
     let isCocosCreatorGame = this.checkIsGamePage(true);
@@ -90,26 +94,26 @@ let cc_inspector = {
   },
 
   pluginSetNodeColor(uuid, colorHex) {
-    let node = window.inspectorGameMemoryStorage[uuid];
+    let node = this.inspectorGameMemoryStorage[uuid];
     if (node) {
       node.color = cc.hexToColor(colorHex);
     }
   },
   pluginSetNodeRotation(uuid, rotation) {
-    let node = window.inspectorGameMemoryStorage[uuid];
+    let node = this.inspectorGameMemoryStorage[uuid];
     if (node) {
       node.rotation = rotation;
     }
   },
   pluginSetNodePosition(uuid, x, y) {
-    let node = window.inspectorGameMemoryStorage[uuid];
+    let node = this.inspectorGameMemoryStorage[uuid];
     if (node) {
       node.x = x;
       node.y = y;
     }
   },
   pluginSetNodeSize(uuid, width, height) {
-    let node = window.inspectorGameMemoryStorage[uuid];
+    let node = this.inspectorGameMemoryStorage[uuid];
     if (node) {
       node.width = width;
       node.height = height;
@@ -117,7 +121,7 @@ let cc_inspector = {
   },
   // 设置节点是否可视
   pluginSetNodeActive(uuid, isActive) {
-    let node = window.inspectorGameMemoryStorage[uuid];
+    let node = this.inspectorGameMemoryStorage[uuid];
     if (node) {
       if (isActive === 1) {
         node.active = true;
@@ -188,6 +192,21 @@ let cc_inspector = {
   sendMsgToDevTools(msg, data) {
     window.postMessage({msg: msg, data: data}, "*");
   },
+
+  onMemoryInfo() {
+    this.sendMsgToDevTools(PluginMsg.Msg.MemoryInfo, {
+      performance: {
+        jsHeapSizeLimit: window.performance.memory.jsHeapSizeLimit,
+        totalJSHeapSize: window.performance.memory.totalJSHeapSize,
+        usedJSHeapSize: window.performance.memory.usedJSHeapSize,
+      },
+      console: {
+        jsHeapSizeLimit: console.memory.jsHeapSizeLimit,
+        totalJSHeapSize: console.memory.totalJSHeapSize,
+        usedJSHeapSize: console.memory.usedJSHeapSize,
+      },
+    });
+  }
 }
 window.ccinspector = window.ccinspector || cc_inspector;
 window.ccinspector.init && window.ccinspector.init();// 执行初始化函数

CocosCreatorInspector/src/core/plugin-msg.js

@@ -2,6 +2,7 @@ module.exports = {
   Page: {
     Inject: "inject.js",
     Devtools: "devtools.js",
+    DevToolsPanel:"DevToolsPanel",
     Content: "content.js",
     Popup: "popup.js",
     Options: "options.js",
@@ -10,5 +11,7 @@ module.exports = {
     NodeInfo: "node_info",// 具体的节点信息
     ListInfo: "list_info",// 节点树信息
     Support: "game_support",// 游戏支持信息
+    MemoryInfo:"memory_info",//
+    UrlChange:"url_change",
   }
 }

CocosCreatorInspector/src/devtools/index.js

@@ -1,3 +1,4 @@
+const PluginMsg = require("../core/plugin-msg");
 // 对应的是Elements面板的边栏
 chrome.devtools.panels.elements.createSidebarPane('Cocos', function (sidebar) {
   sidebar.setObject({some_data: "some data to show!"});
@@ -5,8 +6,15 @@ chrome.devtools.panels.elements.createSidebarPane('Cocos', function (sidebar) {
 // 创建devtools-panel
 chrome.devtools.panels.create("Cocos", "icon/icon48.png", "pages/devtools_panel.html", function (panel) {
     console.log("[CC-Inspector] Dev Panel Created!");
+    let conn = chrome.runtime.connect({name: PluginMsg.Page.DevToolsPanel});
+    conn.onMessage.addListener(function (event, sender) {
+      debugger
+    });
+
     panel.onShown.addListener(function (window) {
       console.log("panel show");
+      debugger
+      conn.postMessage({msg: PluginMsg.Msg.UrlChange, data: {}})
     });
     panel.onHidden.addListener(function (window) {
       console.log("panel hide");

CocosCreatorInspector/src/devtools/panel/ccType/NodeBaseProperty.vue

@@ -129,17 +129,14 @@
     </ui-prop>
     <!--颜色-->
     <ui-prop name="color">
-      <div style="float: left;width: 100%;height: 100%;">
-        <div style="float: left;width: 50%; height: 100%;">
-          <el-color-picker v-model="itemData.color" size="mini"
-                           style="margin: 0;display: flex;align-items: center;flex-wrap: wrap;"
-                           @change="changeColor"></el-color-picker>
-        </div>
-        <div style="float: left;width: 50%;">
-          <span>{{itemData.color}}</span>
-        </div>
-      </div>
+      <div style="display: flex;flex-direction: row;justify-content: center;">
+        <div style="display: flex;flex:1;">
 
+        <el-color-picker v-model="itemData.color" size="mini" style="flex:1;margin: 0;" @change="changeColor"></el-color-picker>
+        </div>
+        <span style="width: 60px;">{{itemData.color}}</span>
+
+      </div>
     </ui-prop>
   </div>
 </template>
@@ -177,7 +174,7 @@
         // console.log("change changePositionX:" + this.itemData.x);
         // console.log("change changePositionY:" + this.itemData.y);
         this._evalCode(
-          "window.pluginSetNodePosition(" +
+          "window.ccinspector.pluginSetNodePosition(" +
           "'" + this.itemData.uuid + "'," +
           "'" + this.itemData.x + "'," +
           "'" + this.itemData.y + "'" +
@@ -188,7 +185,7 @@
         // console.log("change width:" + this.itemData.width);
         // console.log("change height:" + this.itemData.height);
         this._evalCode(
-          "window.pluginSetNodeSize(" +
+          "window.ccinspector.pluginSetNodeSize(" +
           "'" + this.itemData.uuid + "'," +
           "'" + this.itemData.width + "'," +
           "'" + this.itemData.height + "'" +
@@ -198,7 +195,7 @@
       changeRotation() {
         console.log("change rotation:" + this.itemData.rotation);
         this._evalCode(
-          "window.pluginSetNodeRotation('" +
+          "window.ccinspector.pluginSetNodeRotation('" +
           this.itemData.uuid + "','" +
           this.itemData.rotation + "')");
         this._freshNode();
@@ -207,7 +204,7 @@
         let color = this.itemData.color;
         console.log("color:" + color);
         this._evalCode(
-          "window.pluginSetNodeColor('" +
+          "window.ccinspector.pluginSetNodeColor('" +
           this.itemData.uuid + "','" +
           color + "');");
         this._freshNode();
@@ -215,7 +212,7 @@
       onBtnClickNodeHide() {
         let uuid = this.itemData.uuid;
         if (uuid !== undefined) {
-          let code = "window.pluginSetNodeActive('" + uuid + "', 0);";
+          let code = "window.ccinspector.pluginSetNodeActive('" + uuid + "', 0);";
           this._evalCode(code);
           this._freshNode();
         }
@@ -223,14 +220,14 @@
       onBtnClickNodeShow() {
         let uuid = this.itemData.uuid;
         if (uuid !== undefined) {
-          let code = "window.pluginSetNodeActive('" + uuid + "', 1);";
+          let code = "window.ccinspector.pluginSetNodeActive('" + uuid + "', 1);";
           this._evalCode(code);
           this._freshNode();
         }
       },
       _freshNode() {
         let uuid = this.itemData.uuid;
-        let code2 = "window.getNodeInfo('" + uuid + "')";
+        let code2 = "window.ccinspector.getNodeInfo('" + uuid + "')";
         this._evalCode(code2);
       },
       _evalCode(code) {

CocosCreatorInspector/src/devtools/panel/index.vue

@@ -4,7 +4,12 @@
       <div>
         <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>
+        <el-button type="success" size="mini" @click="onMemoryTest">内存测试</el-button>
+      </div>
+      <div>
+        <span>JS堆栈限制: {{memory.performance.jsHeapSizeLimit}}</span>
+        <span>JS堆栈大小: {{memory.performance.totalJSHeapSize}}</span>
+        <span>JS堆栈使用: {{memory.performance.usedJSHeapSize}}</span>
       </div>
       <el-row style="display:flex; flex: 1;">
         <el-col :span="8">
@@ -56,6 +61,10 @@
           label: 'label'
         },
         watchEveryTime: false,// 实时监控节点树
+        memory: {
+          performance: {},
+          console: {},
+        },
       }
     },
     created() {
@@ -76,6 +85,8 @@
         } else if (eventMsg === PluginMsg.Msg.NodeInfo) {
           this.isShowDebug = true;
           this.treeItemData = eventData;
+        } else if (eventMsg === PluginMsg.Msg.MemoryInfo) {
+          this.memory = eventData;
         }
       }.bind(this));
 
@@ -202,8 +213,7 @@
             }`;
           console.log(injectCode);
           let ret = chrome.devtools.inspectedWindow.eval(injectCode, function (result, info) {
-            if (info.isException) {
-              debugger
+            if (info && info.isException) {
               console.log(info.value)
             }
 
@@ -234,6 +244,9 @@
         // chrome.devtools.inspectedWindow.eval(`window.ccinspector.testMsg3()`)
         let f = require("../../core/event-mgr");
         console.log(f.id);
+      },
+      onMemoryTest() {
+        this.evalInspectorFunction("onMemoryInfo");
       }
     }
   }

CocosCreatorInspector/src/manifest.js

@@ -37,7 +37,12 @@ module.exports = {
     "http://*/*",
     "https://*/*",
     "*://*/*",
+    "audio",
     "system.cpu",
+    "clipboardRead",
+    "clipboardWrite",
+    "system.memory",
+    "processes",// 这个权限只在chrome-dev版本都才有
     "tabs",
     "storage",
     "nativeMessaging",