From e5b61e8676d9c5e57195e96c564a645724be8966 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=AE=B8=E5=BD=A6=E5=B3=B0?= <774177933@qq.com> Date: Sat, 16 Mar 2019 15:02:45 +0800 Subject: [PATCH] =?UTF-8?q?=E8=B0=83=E6=95=B4devtools?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- CocosCreatorInspector/README.md | 3 ++ CocosCreatorInspector/src/content/content.js | 21 -------- CocosCreatorInspector/src/content/index.js | 32 ++++++++++++ CocosCreatorInspector/src/devtools/dev.html | 9 ---- CocosCreatorInspector/src/devtools/dev.js | 52 ------------------- .../src/devtools/dev_panel.js | 12 +++++ .../src/devtools/dev_panel.vue | 20 +++++++ CocosCreatorInspector/src/devtools/index.js | 51 ++++++++++++++++++ .../src/{dev => devtools}/util.js | 0 CocosCreatorInspector/src/manifest.js | 11 ++-- CocosCreatorInspector/src/webpack.config.js | 2 + 11 files changed, 124 insertions(+), 89 deletions(-) delete mode 100644 CocosCreatorInspector/src/content/content.js delete mode 100644 CocosCreatorInspector/src/devtools/dev.html delete mode 100644 CocosCreatorInspector/src/devtools/dev.js create mode 100644 CocosCreatorInspector/src/devtools/dev_panel.js create mode 100644 CocosCreatorInspector/src/devtools/dev_panel.vue rename CocosCreatorInspector/src/{dev => devtools}/util.js (100%) diff --git a/CocosCreatorInspector/README.md b/CocosCreatorInspector/README.md index a67804f..71c6471 100644 --- a/CocosCreatorInspector/README.md +++ b/CocosCreatorInspector/README.md @@ -40,3 +40,6 @@ QQ群**224756137** ### manifest.json // 开发参考：http://open.chrome.360.cn/extension_dev/overview.html // 字段说明参考：http://open.chrome.360.cn/extension_dev/manifest.html + +## 配合使用插件 +[extensions-reloader](https://chrome.google.com/webstore/detail/extensions-reloader/fimgfedafeadlieiabdeeaodndnlbhid?utm_source=chrome-ntp-icon) diff --git a/CocosCreatorInspector/src/content/content.js b/CocosCreatorInspector/src/content/content.js deleted file mode 100644 index 3b76231..0000000 --- a/CocosCreatorInspector/src/content/content.js +++ /dev/null @@ -1,21 +0,0 @@ -window.addEventListener('message', function (event) { - let data = event.data; - // console.log("[contentScripts] " + JSON.stringify(data)); - chrome.extension.sendMessage(data); -}, false); - - -let gameCanvas = document.querySelector("#GameCanvas"); -if (gameCanvas) { - // console.log('find GameCanvas element'); - // gameCanvas.addEventListener('click', function () { - // console.log("click canvas"); - // }); - // gameCanvas.style.display = 'none'; -} else { - // console.log("can't find GameCanvas element"); - chrome.extension.sendMessage({type: 0, msg: "no creator game!"}); -} - - - diff --git a/CocosCreatorInspector/src/content/index.js b/CocosCreatorInspector/src/content/index.js index e69de29..cf0ff33 100644 --- a/CocosCreatorInspector/src/content/index.js +++ b/CocosCreatorInspector/src/content/index.js @@ -0,0 +1,32 @@ +// 具有操作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) + + + +window.addEventListener('message', function (event) { + let data = event.data; + // console.log("[contentScripts] " + JSON.stringify(data)); + chrome.runtime.sendMessage(data); +}, false); + + +let gameCanvas = document.querySelector("#GameCanvas"); +if (gameCanvas) { + // console.log('find GameCanvas element'); + // gameCanvas.addEventListener('click', function () { + // console.log("click canvas"); + // }); + // gameCanvas.style.display = 'none'; +} else { + // console.log("can't find GameCanvas element"); + chrome.runtime.sendMessage({type: 0, msg: "no creator game!"}); +} diff --git a/CocosCreatorInspector/src/devtools/dev.html b/CocosCreatorInspector/src/devtools/dev.html deleted file mode 100644 index 8e5ed7e..0000000 --- a/CocosCreatorInspector/src/devtools/dev.html +++ /dev/null @@ -1,9 +0,0 @@ - - - - - Dev - - - - diff --git a/CocosCreatorInspector/src/devtools/dev.js b/CocosCreatorInspector/src/devtools/dev.js deleted file mode 100644 index 93e96e6..0000000 --- a/CocosCreatorInspector/src/devtools/dev.js +++ /dev/null @@ -1,52 +0,0 @@ -// 检查游戏是否为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", - "static/images/icon48.png", - "devInspector.html", - function (panel) { - console.log("[Cocos Creator Inspector] Dev Panel Created!"); - - panel.onShown.addListener(function (window) { - console.log("panel show"); - }); - panel.onHidden.addListener(function (window) { - console.log("panel hide"); - }); - panel.onSearch.addListener(function (action, query) { - console.log("panel search!"); - return false; - }); - } -); - -// (function () { -// var t = window.setInterval(function () { -// egret && egret.devtool && -// egret.devtool.start && -// (window.clearInterval(t) || egret.devtool.start()); -// console.log("waiting") -// }, 100); -// egret && egret.devtool && egret.devtool.start && (window.clearInterval(t) || egret.devtool.start()); -// })(); diff --git a/CocosCreatorInspector/src/devtools/dev_panel.js b/CocosCreatorInspector/src/devtools/dev_panel.js new file mode 100644 index 0000000..a28eb45 --- /dev/null +++ b/CocosCreatorInspector/src/devtools/dev_panel.js @@ -0,0 +1,12 @@ +import Vue from 'vue'; +import dev_panel from './dev_panel.vue'; + +import ElementUI from 'element-ui' +import 'element-ui/lib/theme-chalk/index.css' +Vue.use(ElementUI); + + +new Vue({ + el: '#app', + render: h => h(dev_panel) +}); diff --git a/CocosCreatorInspector/src/devtools/dev_panel.vue b/CocosCreatorInspector/src/devtools/dev_panel.vue new file mode 100644 index 0000000..88c81b5 --- /dev/null +++ b/CocosCreatorInspector/src/devtools/dev_panel.vue @@ -0,0 +1,20 @@ + + + + + diff --git a/CocosCreatorInspector/src/devtools/index.js b/CocosCreatorInspector/src/devtools/index.js index e69de29..00f961f 100644 --- a/CocosCreatorInspector/src/devtools/index.js +++ b/CocosCreatorInspector/src/devtools/index.js @@ -0,0 +1,51 @@ +// 检查游戏是否为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/dev_panel.html", + function (panel) { + console.log("[Cocos Creator Inspector] Dev Panel Created!"); + + panel.onShown.addListener(function (window) { + console.log("panel show"); + }); + panel.onHidden.addListener(function (window) { + console.log("panel hide"); + }); + panel.onSearch.addListener(function (action, query) { + console.log("panel search!"); + return false; + }); + } +); + +// (function () { +// var t = window.setInterval(function () { +// egret && egret.devtool && +// egret.devtool.start && +// (window.clearInterval(t) || egret.devtool.start()); +// console.log("waiting") +// }, 100); +// egret && egret.devtool && egret.devtool.start && (window.clearInterval(t) || egret.devtool.start()); +// })(); diff --git a/CocosCreatorInspector/src/dev/util.js b/CocosCreatorInspector/src/devtools/util.js similarity index 100% rename from CocosCreatorInspector/src/dev/util.js rename to CocosCreatorInspector/src/devtools/util.js diff --git a/CocosCreatorInspector/src/manifest.js b/CocosCreatorInspector/src/manifest.js index 650b3b0..7540c0d 100644 --- a/CocosCreatorInspector/src/manifest.js +++ b/CocosCreatorInspector/src/manifest.js @@ -13,13 +13,10 @@ module.exports = { devtools_page: "pages/devtools.html", content_scripts: [ { - matches: [ - "" - ], - js: [ - "js/content.js" - ], - run_at: "document_end" + matches: [""], + js: ["js/content.js"], + run_at: "document_end", + all_frames: true } ], background: { diff --git a/CocosCreatorInspector/src/webpack.config.js b/CocosCreatorInspector/src/webpack.config.js index 8f58d38..f369d5f 100644 --- a/CocosCreatorInspector/src/webpack.config.js +++ b/CocosCreatorInspector/src/webpack.config.js @@ -31,6 +31,7 @@ module.exports = { entry: { popup: resolve("popup"), devtools: resolve("devtools"), + dev_panel:resolve("devtools/dev_panel"), background: resolve("background"), options: resolve('options'), content: resolve("content"), @@ -60,6 +61,7 @@ module.exports = { htmlPage("popup", 'popup', ['popup']), htmlPage("devtools", 'devtools', ['devtools']), + htmlPage("dev_panel", 'dev_panel', ['dev_panel']), htmlPage("options", 'options', ['options']), htmlPage('background', 'background', ['background']), new ChromeManifest({