From 6a7bf052c4a930ccbb33c3671c1375b3dc541ec1 Mon Sep 17 00:00:00 2001 From: xyf-mac Date: Fri, 2 Apr 2021 22:34:09 +0800 Subject: [PATCH] =?UTF-8?q?=E5=88=A0=E9=99=A4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- CocosCreatorInspector/src/webpack.config.js | 26 -- source/src/background.ts | 49 +-- source/src/core/plugin-msg.js | 17 - source/src/core/plugin-msg.ts | 15 + .../panel/ccType/ComponentsProperty.vue | 38 ++- .../panel/ccType/NodeBaseProperty.vue | 301 ++++++++++-------- .../devtools/panel/{ui => ccType}/ui-prop.vue | 80 ++--- source/src/devtools/panel/index.ts | 22 +- source/src/devtools/util.js | 6 +- source/src/{inject.ts => inject.js} | 0 source/src/manifest/index.js | 2 +- source/vue.config.js | 3 +- 12 files changed, 274 insertions(+), 285 deletions(-) delete mode 100644 source/src/core/plugin-msg.js create mode 100644 source/src/core/plugin-msg.ts rename source/src/devtools/panel/{ui => ccType}/ui-prop.vue (54%) rename source/src/{inject.ts => inject.js} (100%) diff --git a/CocosCreatorInspector/src/webpack.config.js b/CocosCreatorInspector/src/webpack.config.js index 17034a4..d5a6c02 100644 --- a/CocosCreatorInspector/src/webpack.config.js +++ b/CocosCreatorInspector/src/webpack.config.js @@ -32,7 +32,6 @@ module.exports = { entry: { // test: resolve('test'), background: resolve('background'), - inject: resolve('content/inject'), // devInspector: path.resolve(__dirname, './src/dev/devInspector/main.js'), // dev: path.resolve(__dirname, './src/dev/dev.js'), @@ -40,7 +39,6 @@ module.exports = { // backgroundScripts: path.resolve(__dirname, './src/dev/backgroundScripts.js'), // contentScripts: path.resolve(__dirname, './src/dev/contentScripts.js'), // util: path.resolve(__dirname, './src/dev/util.js'), - // injectScript: path.resolve(__dirname, './src/dev/injectScript.js'), }, output: { path: Path.resolve(__dirname, 'build'), @@ -62,30 +60,6 @@ module.exports = { outFile: Path.join(__dirname, 'build/manifest.json'), manifest: Path.join(__dirname, 'manifest.js') }), - //index.html - // new HtmlWebpackPlugin({ - // template: __dirname + "/src/index/index.html", - // filename: 'index.html', - // inject: 'body', - // chunks: ['index'] - // }), - - - //dev.html - // new HtmlWebpackPlugin({ - // template: __dirname + "/src/dev/dev.html", - // filename: 'dev.html', - // inject: 'body', - // chunks: ['dev'] - // }), - - //devInspector.html - // new HtmlWebpackPlugin({ - // template: __dirname + "/src/dev/devInspector/devInspector.html", - // filename: 'devInspector.html', - // inject: 'body', - // chunks: ['devInspector'] - // }), // 拷贝静态资源(manifest.json) new CopyWebpackPlugin([{ diff --git a/source/src/background.ts b/source/src/background.ts index 08bcd69..6f0020a 100644 --- a/source/src/background.ts +++ b/source/src/background.ts @@ -1,28 +1,26 @@ -let PluginMsg = require("../core/plugin-msg"); -// 链接池子 -let ConnPool = { - Devtools: null, - DevtoolsPanel: null, - Content: null, -}; +import * as PluginMsg from "./core/plugin-msg" -function shortConnectionLink(request, sender, sendResponse) { +let Devtools: chrome.runtime.Port | null = null; +let DevtoolsPanel: chrome.runtime.Port | null = null; +let Content: chrome.runtime.Port | null = null; + +function shortConnectionLink(request: any, sender: any, sendResponse: any) { // 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 || request.msg === PluginMsg.Msg.NodeInfo) { // 将消息转发到devtools - ConnPool.Devtools && ConnPool.Devtools.postMessage(request); + Devtools && Devtools.postMessage(request); } } -function longConnectionLink(data, sender) { - console.log(`%c[长连接:${sender.name}]\n${JSON.stringify(data)}`, 'background:#aaa;color:#bada55') +function longConnectionLink(data: any, sender: any) { + 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: {}}) + Content && Content.postMessage({msg: PluginMsg.Msg.UrlChange, data: {}}) } } // chrome.tabs.executeScript(message.tabId, {code: message.content}); @@ -31,27 +29,27 @@ function longConnectionLink(data, sender) { // 长连接 chrome.runtime.onConnect.addListener(function (port) { - console.log(`%c[长连接:${port.name}] 建立链接!`, 'background:#aaa;color:#ff0000'); + console.log(`%c[长连接:${port.name}] 建立链接!`, "background:#aaa;color:#ff0000"); port.onMessage.addListener(longConnectionLink); port.onDisconnect.addListener(function (port) { - console.log(`%c[长连接:${port.name}] 断开链接!`, 'background:#aaa;color:#00ff00'); + console.log(`%c[长连接:${port.name}] 断开链接!`, "background:#aaa;color:#00ff00"); port.onMessage.removeListener(longConnectionLink); if (port.name === PluginMsg.Page.Devtools) { - ConnPool.Devtools = null; + Devtools = null; } else if (port.name === PluginMsg.Page.Content) { - ConnPool.Content = null; + Content = null; } else if (port.name === PluginMsg.Page.DevToolsPanel) { - ConnPool.DevtoolsPanel = null; + DevtoolsPanel = null; } }); // 缓存 if (port.name === PluginMsg.Page.Devtools) { - ConnPool.Devtools = port; + Devtools = port; } else if (port.name === PluginMsg.Page.Content) { - ConnPool.Content = port; + Content = port; } else if (port.name === PluginMsg.Page.DevToolsPanel) { - ConnPool.DevtoolsPanel = port; + DevtoolsPanel = port; } }); @@ -62,7 +60,10 @@ 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}}); + if (Content) { + let data = {msg: PluginMsg.Msg.UrlChange, data: {url: tab.favIconUrl}} + Content.postMessage(data); + } } }) @@ -74,7 +75,7 @@ function createPluginMenus() { title: "测试右键菜单", parentId: parent, // 上下文环境，可选：["all", "page", "frame", "selection", "link", "editable", "image", "video", "audio"]，默认page - contexts: ['page'], + contexts: ["page"], }); chrome.contextMenus.create({ id: "notify", @@ -84,9 +85,9 @@ function createPluginMenus() { chrome.contextMenus.onClicked.addListener(function (info, tab) { if (info.menuItemId === "test") { - alert('您点击了右键菜单！'); + alert("您点击了右键菜单！"); } else if (info.menuItemId === "notify") { - chrome.notifications.create(null, { + chrome.notifications.create("null", { type: "basic", iconUrl: "icon/icon48.png", title: "通知", diff --git a/source/src/core/plugin-msg.js b/source/src/core/plugin-msg.js deleted file mode 100644 index e99a173..0000000 --- a/source/src/core/plugin-msg.js +++ /dev/null @@ -1,17 +0,0 @@ -module.exports = { - Page: { - Inject: "inject.js", - Devtools: "devtools.js", - DevToolsPanel:"DevToolsPanel", - Content: "content.js", - Popup: "popup.js", - Options: "options.js", - }, - Msg: { - NodeInfo: "node_info",// 具体的节点信息 - ListInfo: "list_info",// 节点树信息 - Support: "game_support",// 游戏支持信息 - MemoryInfo:"memory_info",// - UrlChange:"url_change", - } -} diff --git a/source/src/core/plugin-msg.ts b/source/src/core/plugin-msg.ts new file mode 100644 index 0000000..bf5a022 --- /dev/null +++ b/source/src/core/plugin-msg.ts @@ -0,0 +1,15 @@ +export const Page = { + Inject: "inject.js", + Devtools: "devtools.js", + DevToolsPanel: "DevToolsPanel", + Content: "content.js", + Popup: "popup.js", + Options: "options.js", +} +export const Msg = { + NodeInfo: "node_info",// 具体的节点信息 + ListInfo: "list_info",// 节点树信息 + Support: "game_support",// 游戏支持信息 + MemoryInfo: "memory_info",// + UrlChange: "url_change", +} diff --git a/source/src/devtools/panel/ccType/ComponentsProperty.vue b/source/src/devtools/panel/ccType/ComponentsProperty.vue index 11b265f..e848f44 100644 --- a/source/src/devtools/panel/ccType/ComponentsProperty.vue +++ b/source/src/devtools/panel/ccType/ComponentsProperty.vue @@ -7,35 +7,33 @@
- {{comp.type}} + {{ comp.type }}
- diff --git a/source/src/devtools/panel/ccType/NodeBaseProperty.vue b/source/src/devtools/panel/ccType/NodeBaseProperty.vue index ea0bed1..9e8e658 100644 --- a/source/src/devtools/panel/ccType/NodeBaseProperty.vue +++ b/source/src/devtools/panel/ccType/NodeBaseProperty.vue @@ -2,10 +2,10 @@
- {{itemData.uuid}} + {{ itemData.uuid }} - {{itemData.name}} + {{ itemData.name }} @@ -33,7 +33,7 @@ - {{itemData.rotation}} + {{ itemData.rotation }} @@ -44,10 +44,10 @@
- {{itemData.scaleX}} + {{ itemData.scaleX }} - {{itemData.scaleY}} + {{ itemData.scaleY }}
@@ -55,10 +55,10 @@
- {{itemData.anchorX}} + {{ itemData.anchorX }} - {{itemData.anchorY}} + {{ itemData.anchorY }}
@@ -88,25 +88,25 @@ - {{itemData.opacity}} + {{ itemData.opacity }}
- {{itemData.skewX}} + {{ itemData.skewX }} - {{itemData.skewY}} + {{ itemData.skewY }}
- {{itemData.zIndex}} + {{ itemData.zIndex }} - {{itemData.childrenCount}} + {{ itemData.childrenCount }} @@ -132,148 +132,173 @@
- +
- {{itemData.color}} + {{ itemData.color }}
- diff --git a/source/src/devtools/panel/ui/ui-prop.vue b/source/src/devtools/panel/ccType/ui-prop.vue similarity index 54% rename from source/src/devtools/panel/ui/ui-prop.vue rename to source/src/devtools/panel/ccType/ui-prop.vue index c26cd00..5c97f6c 100644 --- a/source/src/devtools/panel/ui/ui-prop.vue +++ b/source/src/devtools/panel/ccType/ui-prop.vue @@ -17,44 +17,48 @@ - diff --git a/source/src/devtools/panel/index.ts b/source/src/devtools/panel/index.ts index 8dfb812..bbf0bfb 100644 --- a/source/src/devtools/panel/index.ts +++ b/source/src/devtools/panel/index.ts @@ -1,22 +1,10 @@ -import Vue from 'vue'; -import ElementUI from 'element-ui' -import 'element-ui/lib/theme-chalk/index.css' -import index from './index.vue'; - -import ui_prop from './ui/ui-prop.vue' -import NodeBaseProperty from './ccType/NodeBaseProperty.vue' -import SceneProperty from './ccType/SceneProperty.vue' -import ComponentsProperty from './ccType/ComponentsProperty' - - -Vue.component('ui-prop', ui_prop); -Vue.component('NodeBaseProperty', NodeBaseProperty); -Vue.component('SceneProperty', SceneProperty); -Vue.component('ComponentsProperty', ComponentsProperty); -Vue.component('ColorPicker', ColorPicker); +import Vue from "vue"; +import ElementUI from "element-ui" +import "element-ui/lib/theme-chalk/index.css" +import index from "./index.vue"; Vue.use(ElementUI); new Vue({ - el: '#app', + el: "#app", render: h => h(index) }); diff --git a/source/src/devtools/util.js b/source/src/devtools/util.js index fb4769a..15060a3 100644 --- a/source/src/devtools/util.js +++ b/source/src/devtools/util.js @@ -1,12 +1,12 @@ let index = 0; -setInterval(function () { +setInterval(() => { let msg = "util: " + index++; // chrome.extension.sendMessage(msg; if (typeof aa !== undefined) { msg = aa; } - window.postMessage({type: 1, msg: msg}, '*'); -}.bind(this), 2000); + window.postMessage({type: 1, msg: msg}, "*"); +}, 2000); diff --git a/source/src/inject.ts b/source/src/inject.js similarity index 100% rename from source/src/inject.ts rename to source/src/inject.js diff --git a/source/src/manifest/index.js b/source/src/manifest/index.js index 582b520..82e9af4 100644 --- a/source/src/manifest/index.js +++ b/source/src/manifest/index.js @@ -14,7 +14,7 @@ module.exports = { content_scripts: [ { matches: [""], - js: ["content.common.js"], + js: ["content.js"], run_at: "document_end", all_frames: true } diff --git a/source/vue.config.js b/source/vue.config.js index 4745bd6..428caf0 100644 --- a/source/vue.config.js +++ b/source/vue.config.js @@ -17,7 +17,8 @@ module.exports = { configureWebpack: { entry: { content: Path.join(__dirname, "src/content.ts"), - options: Path.join(__dirname, "src/options.ts"), + background: Path.join(__dirname, "src/background.ts"), + inject: Path.join(__dirname, "src/inject.js"), }, output: { filename: "js/[name].js?t=[hash]"