处理长短链接

CocosCreatorInspector/src/background/index.js

@@ -1,29 +1,26 @@
-chrome.extension.onConnect.addListener(function (port) {
-  console.log("backgroundScripts connect!");
-  let extensionListener = function (message, sender, sendResponse) {
-    if (message.tabId && message.content) {
-      if (message.action === 'code') {
-        console.log("执行code");
-        chrome.tabs.executeScript(message.tabId, {code: message.content});
-      } else if (message.action === 'script') {
-        console.log("执行script");
-        chrome.tabs.executeScript(message.tabId, {file: message.content});
-      } else {
-        console.log("执行other");
-        chrome.tabs.sendMessage(message.tabId, message, sendResponse);
-      }
+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);
+}
 
-    } else {
-      port.postMessage(message);
-    }
-    sendResponse(message);
-  };
-  chrome.extension.onMessage.addListener(extensionListener);
+function longConnectionLink(data, sender) {
+  console.log(`%c[长连接:${sender.name}]\n${JSON.stringify(data)}`, 'background:#aaa;color:#bada55')
+  sender.postMessage(data);
+  // chrome.tabs.executeScript(message.tabId, {code: message.content});
+  // port.postMessage(message);
+}
+
+// 长连接
+chrome.runtime.onConnect.addListener(function (port) {
+  console.log(`%c[长连接:${port.name}] 建立链接!`, 'background:#aaa;color:#ff0000');
+  port.onMessage.addListener(longConnectionLink);
   port.onDisconnect.addListener(function (port) {
-    chrome.extension.onMessage.removeListener(extensionListener);
+    console.log(`%c[长连接:${port.name}] 断开链接!`, 'background:#aaa;color:#00ff00');
+    port.onMessage.removeListener(longConnectionLink);
   });
 });
 
-chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
-  return true;
-});
+// background.js 更像是一个主进程,负责整个插件的调度,生命周期和chrome保持一致
+// [短连接] 监听来自content.js发来的事件
+chrome.runtime.onMessage.addListener(shortConnectionLink);

CocosCreatorInspector/src/content/index.js

@@ -11,7 +11,6 @@
 // document.body.appendChild(script)
 
 
-
 window.addEventListener('message', function (event) {
   let data = event.data;
   // console.log("[contentScripts] " + JSON.stringify(data));
@@ -28,5 +27,8 @@ if (gameCanvas) {
   // gameCanvas.style.display = 'none';
 } else {
   // console.log("can't find GameCanvas element");
-  chrome.runtime.sendMessage({type: 0, msg: "no creator game!"});
+  chrome.runtime.sendMessage({type: 0, msg: "no creator game!"}, function (data) {
+    debugger
+    console.log(data)
+  });
 }

CocosCreatorInspector/src/devtools/index.js

@@ -1,32 +1,10 @@
-// 检查游戏是否为cocos游戏
-// var cc={};
-// if (typeof cc === "undefined") {
-//   console.log("该html不是cocos游戏,无法调试!");
-//   chrome.devtools.panels.elements.createSidebarPane("Creator Properties", function (sidebar) {
-//     // console.log("[Cocos Creator Inspector] CreateSidebarPane");
-//     // sidebar.setObject({ some_data: "Some data to show" });
-//     sidebar.setPage("devNoGame.html");
-//   });
-//   chrome.devtools.panels.create(
-//     "Cocos",
-//     "static/images/icon48.png",
-//     "devNoGame.html", function (panel) {
-//       // console.log("[Cocos Creator Inspector] Dev Panel Created!");
-//     });
-//
-// } else {
-//
-// }
-
-
-// chrome.devtools.panels.elements.createSidebarPane('My SliderBar', function (sidebar) {
-//   sidebar.setObject({some_data: "some data to show!"});
-// });
-
-chrome.devtools.panels.create("Cocos", "icon/icon48.png", "pages/devtools_panel.html",
-  function (panel) {
-    console.log("[Cocos Creator Inspector] Dev Panel Created!");
-
+// 对应的是Elements面板的边栏
+chrome.devtools.panels.elements.createSidebarPane('Cocos', function (sidebar) {
+  sidebar.setObject({some_data: "some data to show!"});
+});
+// 创建devtools-panel
+chrome.devtools.panels.create("Cocos", "icon/icon48.png", "pages/devtools_panel.html", function (panel) {
+    console.log("[CC-Inspector] Dev Panel Created!");
     panel.onShown.addListener(function (window) {
       console.log("panel show");
     });

CocosCreatorInspector/src/devtools/panel/index.vue

@@ -43,14 +43,8 @@
       }
     },
     created() {
-      if (chrome && chrome.extension) {
-
-      } else {
-        this.isShowDebug = true;
-        this.onTestData();
-        return;
-      }
-      let backgroundPageConnection = chrome.extension.connect({
+      debugger
+      let backgroundPageConnection = chrome.runtime.connect({
         name: btoa("for" + String(chrome.devtools.inspectedWindow.tabId))
       });
       backgroundPageConnection.onMessage.addListener(function (message) {
@@ -183,6 +177,7 @@
       },
 
       onBtnClickUpdatePage() {
+        debugger
         let code = this._getInjectScriptString();
         chrome.devtools.inspectedWindow.eval(code, function () {
           console.log("刷新成功!");

CocosCreatorInspector/src/manifest.js

@@ -20,9 +20,8 @@ module.exports = {
     }
   ],
   background: {
-    scripts: [
-      "js/background.js"
-    ]
+    scripts: ["js/background.js"],
+    persistent: false,// 需要时开启
   },
   options_page: "pages/options.html",
   manifest_version: 2,

CocosCreatorInspector/src/popup/index.vue

@@ -5,6 +5,7 @@
       <div style="flex: 1"></div>
       <el-button size="mini" @click="onClickOptions">设置</el-button>
       <el-button size="mini" @click="onMsgToBg">To-Bg</el-button>
+      <el-button size="mini" @click="onSendMsg">Msg</el-button>
     </div>
     <div style="text-align: center;width: 100%; color: #6d6d6d;">
       <span>支持作者</span>
@@ -52,6 +53,9 @@
         isShowMoneyPng: true,
       }
     },
+    created() {
+      this._initLongConn();
+    },
     methods: {
       onBtnClickGitHub() {
         console.log("onBtnClickGitHub");
@@ -59,13 +63,30 @@
       onClickOptions() {
         chrome.tabs.create({url: 'pages/options.html'})
       },
-      onMsgToBg(){
-        debugger
-        let bg = chrome.extension.getBackgroundPage();
-        if(bg){
-          bg.test();
+      _initLongConn() {
+        if (!this.longConn) {
+          console.log("[popup] 初始化长连接");
+          this.longConn = chrome.runtime.connect({name: "popup"});
+          this.longConn.onMessage.addListener(function (data, info) {
+            debugger
+          })
         }
-      }
+      },
+      onMsgToBg() {
+        // 因为webpack的原因,这种方式可能拿不到里面的function, var
+        // chrome.extension.getBackgroundPage();
+
+        // 发送消息到background.js
+        chrome.runtime.sendMessage('content msg', function (data) {
+          console.log(data);
+        });
+      },
+      onSendMsg() {
+        debugger
+        if (this.longConn) {
+          this.longConn.postMessage({send: "hello"});
+        }
+      },
     },
   }
 </script>