devtools界面和content.js进行交互

CocosCreatorInspector/src/background/index.js

@@ -1,6 +1,5 @@
 function shortConnectionLink(request, sender, sendResponse) {
   console.log(`%c[短连接|id:${sender.id}|url:${sender.url}]\n${JSON.stringify(request)}`, 'background:#aaa;color:#BD4E19')
-  console.log(request);
   sendResponse && sendResponse(request);
 }
 

CocosCreatorInspector/src/content/index.js

@@ -1,14 +1,20 @@
 // 具有操作dom的能力
 // 加载其他脚本
-// var content = chrome.extension.getURL('js/inject.js')
-// var script = document.createElement('script')
-// script.setAttribute('type', 'text/javascript')
-// script.setAttribute('src', content)
-// script.onload = function () {
-//   // 注入脚本执行完后移除掉
-//   this.parentNode.removeChild(this);
-// }
-// document.body.appendChild(script)
+
+function injectScriptToPage(url) {
+  let content = chrome.extension.getURL(url)
+  console.log(`[cc-inspector]注入脚本:${content}`);
+  let script = document.createElement('script')
+  script.setAttribute('type', 'text/javascript')
+  script.setAttribute('src', content)
+  script.onload = function () {
+    // 注入脚本执行完后移除掉
+    this.parentNode.removeChild(this);
+  }
+  document.body.appendChild(script)
+}
+
+injectScriptToPage("js/inject.js");
 
 
 window.addEventListener('message', function (event) {
@@ -28,7 +34,6 @@ if (gameCanvas) {
 } else {
   // console.log("can't find GameCanvas element");
   chrome.runtime.sendMessage({type: 0, msg: "no creator game!"}, function (data) {
-    debugger
     console.log(data)
   });
 }

CocosCreatorInspector/src/content/inject.js

@@ -164,3 +164,14 @@ export default function () {
     console.log("未发现cocos creator game");
   }
 }
+
+window.ccinspector = window.ccinspector || {test:1};
+
+setInterval(function () {
+  if (window.ccinspector.stop) {
+
+  } else {
+    console.log("我是注入的脚本");
+  }
+
+}, 1000);

CocosCreatorInspector/src/devtools/panel/index.vue

@@ -43,27 +43,25 @@
       }
     },
     created() {
-      debugger
-      let backgroundPageConnection = chrome.runtime.connect({
-        name: btoa("for" + String(chrome.devtools.inspectedWindow.tabId))
-      });
-      backgroundPageConnection.onMessage.addListener(function (message) {
-        if (message !== null) {
+      // chrome.devtools.inspectedWindow.tabId
+      let conn = chrome.runtime.connect({name: "devtools"});
+      conn.onMessage.addListener(function (data, sender) {
+        if (data !== null) {
           let msgType = {
             nodeInfo: 2,//节点信息
             nodeListInfo: 1,// 节点列表信息
             notSupport: 0,// 不支持的游戏
           };
-          if (message.type === msgType.nodeListInfo) {// 游戏节点
+          if (data.type === msgType.nodeListInfo) {// 游戏节点
             this.isShowDebug = true;
             // let str = JSON.stringify(message.msg);
             // console.log("onMessage: " + str);
-            this._updateView(message.msg);
-          } else if (message.type === msgType.notSupport) {// 不支持调试
+            this._updateView(data.msg);
+          } else if (data.type === msgType.notSupport) {// 不支持调试
             this.isShowDebug = false;
-          } else if (message.type === msgType.nodeInfo) {
+          } else if (data.type === msgType.nodeInfo) {
             this.isShowDebug = true;
-            this.treeItemData = message.msg;
+            this.treeItemData = data.msg;
           }
         }
       }.bind(this));
@@ -178,6 +176,10 @@
 
       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("刷新成功!");

CocosCreatorInspector/src/popup/index.vue

@@ -67,11 +67,14 @@
         if (!this.longConn) {
           console.log("[popup] 初始化长连接");
           this.longConn = chrome.runtime.connect({name: "popup"});
-          this.longConn.onMessage.addListener(function (data, info) {
-            debugger
-          })
+          this.longConn.onMessage.addListener(function (data, sender) {
+            this._onLongConnMsg(data, sender);
+          }.bind(this))
         }
       },
+      _onLongConnMsg(data, sender) {
+        console.log(this.title);
+      },
       onMsgToBg() {
         // 因为webpack的原因,这种方式可能拿不到里面的function, var
         // chrome.extension.getBackgroundPage();
@@ -82,7 +85,6 @@
         });
       },
       onSendMsg() {
-        debugger
         if (this.longConn) {
           this.longConn.postMessage({send: "hello"});
         }