diff --git a/CocosCreatorInspector/src/background/index.js b/CocosCreatorInspector/src/background/index.js index e5a5780..7070e1a 100644 --- a/CocosCreatorInspector/src/background/index.js +++ b/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); diff --git a/CocosCreatorInspector/src/content/index.js b/CocosCreatorInspector/src/content/index.js index cf0ff33..b13b95c 100644 --- a/CocosCreatorInspector/src/content/index.js +++ b/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) + }); } diff --git a/CocosCreatorInspector/src/devtools/index.js b/CocosCreatorInspector/src/devtools/index.js index 6136d91..7373fa3 100644 --- a/CocosCreatorInspector/src/devtools/index.js +++ b/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"); }); diff --git a/CocosCreatorInspector/src/devtools/panel/index.vue b/CocosCreatorInspector/src/devtools/panel/index.vue index b45bb4c..604b72d 100644 --- a/CocosCreatorInspector/src/devtools/panel/index.vue +++ b/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("刷新成功!"); diff --git a/CocosCreatorInspector/src/manifest.js b/CocosCreatorInspector/src/manifest.js index 7540c0d..528a90c 100644 --- a/CocosCreatorInspector/src/manifest.js +++ b/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, diff --git a/CocosCreatorInspector/src/popup/index.vue b/CocosCreatorInspector/src/popup/index.vue index 86e3f78..67dbadb 100644 --- a/CocosCreatorInspector/src/popup/index.vue +++ b/CocosCreatorInspector/src/popup/index.vue @@ -5,6 +5,7 @@
设置 To-Bg + Msg
支持作者 @@ -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"}); + } + }, }, }