no message

2025-10-31 14:15:25 +00:00 · 2019-03-18 18:03:07 +08:00
parent ffc404b67a
commit c293754259
8 changed files with 97 additions and 31 deletions
--- a/CocosCreatorInspector/src/background/index.js
+++ b/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() {
  // 右键菜单
--- a/CocosCreatorInspector/src/content/index.js
+++ b/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) {
--- a/CocosCreatorInspector/src/content/inject.js
+++ b/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();// 执行初始化函数
--- a/CocosCreatorInspector/src/core/plugin-msg.js
+++ b/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",
  }
 }
--- a/CocosCreatorInspector/src/devtools/index.js
+++ b/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");
--- a/CocosCreatorInspector/src/devtools/panel/ccType/NodeBaseProperty.vue
+++ b/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) {
--- a/CocosCreatorInspector/src/devtools/panel/index.vue
+++ b/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");
      }
    }
  }
--- a/CocosCreatorInspector/src/manifest.js
+++ b/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",