From 8d0119e4a1a964a5a18e6af264341f5c265a7ac2 Mon Sep 17 00:00:00 2001 From: xuyanfeng Date: Sun, 4 Apr 2021 20:48:18 +0800 Subject: [PATCH] update --- source/plugins/copy.js | 31 ++++++++++ source/src/content.ts | 57 +++++++++++++++++++ source/src/core/content.js | 57 ------------------- source/src/core/event-mgr.js | 7 --- source/src/core/event.js | 3 - source/src/core/page.ejs | 10 ---- source/src/core/tools.js | 17 ------ .../src/devtools/ccType/NodeBaseProperty.vue | 14 +++-- source/src/devtools/ccType/ui-prop.vue | 2 +- source/src/devtools/index.vue | 4 +- source/vue.config.js | 12 +++- 11 files changed, 110 insertions(+), 104 deletions(-) create mode 100644 source/plugins/copy.js delete mode 100644 source/src/core/content.js delete mode 100644 source/src/core/event-mgr.js delete mode 100644 source/src/core/event.js delete mode 100644 source/src/core/page.ejs delete mode 100644 source/src/core/tools.js diff --git a/source/plugins/copy.js b/source/plugins/copy.js new file mode 100644 index 0000000..071e262 --- /dev/null +++ b/source/plugins/copy.js @@ -0,0 +1,31 @@ +const Fs = require("fs"); +const Path = require("path"); +const FsExtra = require("fs-extra"); + +class Copy { + constructor(options) { + this.options = options; + } + + apply(compiler) { + compiler.plugin("done", (compilation, callback) => { + const cfg = this.options; + if (cfg && cfg.length > 0) { + cfg.forEach(({src, dest}) => { + let fullSrc = Path.join(compilation.compilation.options.context, src); + if (Fs.existsSync(fullSrc)) { + let distPath = compilation.compilation.options.output.path; + let outFile = Path.join(distPath, dest); + FsExtra.ensureFileSync(outFile); + FsExtra.copyFileSync(fullSrc, outFile); + } else { + console.error(`manifest文件不存在：${src}`); + } + }); + } + }); + + } +} + +module.exports = Copy; diff --git a/source/src/content.ts b/source/src/content.ts index 9e28817..5a2162a 100644 --- a/source/src/content.ts +++ b/source/src/content.ts @@ -1 +1,58 @@ console.log('content code') +// 具有操作dom的能力 +// 加载其他脚本 +// content.js 和原始界面共享DOM,但是不共享js,要想访问页面js,只能通过注入的方式 +import * as PluginMsg from './core/plugin-msg' + +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) +} +debugger +injectScriptToPage("js/inject.js"); + +// 和background.js保持长连接通讯 +let conn = chrome.runtime.connect({name: PluginMsg.Page.Content}) +// conn.postMessage('test'); +conn.onMessage.addListener(function (data) { + // 将background.js的消息返回到injection.js + window.postMessage(data, "*"); +}) +// 接受来自inject.js的消息数据,然后中转到background.js +window.addEventListener('message', function (event) { + let data = event.data; + if (data.data.log) { + } + console.log(`%c[content] ${JSON.stringify(data)}`, "color:#BD4E19"); + 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"); + // 和background.js保持短连接通讯 + chrome.runtime.sendMessage({ + msg: PluginMsg.Msg.Support, + data: { + support: false, + msg: "未发现GameCanvas,不支持调试游戏!" + } + }, function (data) { + // console.log(data) + }); +} diff --git a/source/src/core/content.js b/source/src/core/content.js deleted file mode 100644 index a7a2d77..0000000 --- a/source/src/core/content.js +++ /dev/null @@ -1,57 +0,0 @@ -// 具有操作dom的能力 -// 加载其他脚本 -// content.js 和原始界面共享DOM,但是不共享js,要想访问页面js,只能通过注入的方式 -const PluginMsg = require("../core/plugin-msg"); - -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"); - -// 和background.js保持长连接通讯 -let conn = chrome.runtime.connect({name: PluginMsg.Page.Content}) -// conn.postMessage('test'); -conn.onMessage.addListener(function (data) { - // 将background.js的消息返回到injection.js - window.postMessage(data, "*"); -}) -// 接受来自inject.js的消息数据,然后中转到background.js -window.addEventListener('message', function (event) { - let data = event.data; - if (data.data.log) { - } - console.log(`%c[content] ${JSON.stringify(data)}`, "color:#BD4E19"); - 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"); - // 和background.js保持短连接通讯 - chrome.runtime.sendMessage({ - msg: PluginMsg.Msg.Support, - data: { - support: false, - msg: "未发现GameCanvas,不支持调试游戏!" - } - }, function (data) { - // console.log(data) - }); -} diff --git a/source/src/core/event-mgr.js b/source/src/core/event-mgr.js deleted file mode 100644 index 1265300..0000000 --- a/source/src/core/event-mgr.js +++ /dev/null @@ -1,7 +0,0 @@ -// const PluginMsg = require("./plugin-msg"); -// module.exports = { -// id: "event-mgr", -// testInit(name) { -// chrome.runtime.connect({name: name}) -// } -// } diff --git a/source/src/core/event.js b/source/src/core/event.js deleted file mode 100644 index 998067b..0000000 --- a/source/src/core/event.js +++ /dev/null @@ -1,3 +0,0 @@ -module.exports = { - id: "event-id", -} diff --git a/source/src/core/page.ejs b/source/src/core/page.ejs deleted file mode 100644 index 5497d40..0000000 --- a/source/src/core/page.ejs +++ /dev/null @@ -1,10 +0,0 @@ - - - - - <%= htmlWebpackPlugin.options.title %> - - -
- - diff --git a/source/src/core/tools.js b/source/src/core/tools.js deleted file mode 100644 index d5d80a2..0000000 --- a/source/src/core/tools.js +++ /dev/null @@ -1,17 +0,0 @@ -const path = require('path') -const HtmlWebpackPlugin = require('html-webpack-plugin') - -module.exports = { - htmlPage(title, filename, chunks, template) { - return new HtmlWebpackPlugin({ - title: title, - hash: true, - cache: true, - inject: 'body', - filename: './pages/' + filename + '.html', - template: template || path.resolve(__dirname, './page.ejs'), - appMountId: 'app', - chunks: chunks - }); - } -} diff --git a/source/src/devtools/ccType/NodeBaseProperty.vue b/source/src/devtools/ccType/NodeBaseProperty.vue index c940f8f..9efe120 100644 --- a/source/src/devtools/ccType/NodeBaseProperty.vue +++ b/source/src/devtools/ccType/NodeBaseProperty.vue @@ -30,8 +30,10 @@ export default class NodeBaseProperty extends Vue { @Prop({default: () => testData,}) allGroup: Array> | undefined; - onClickHeader(group) { - group.fold = !group.fold; + onClickHeader(group: any) { + if (group && group.hasOwnProperty('fold')) { + group.fold = !group.fold; + } } @Prop({default: "label"}) @@ -44,9 +46,11 @@ export default class NodeBaseProperty extends Vue { } created() { - this.allGroup.forEach(item => { - this.$set(item, 'fold', false); - }) + if (this.allGroup) { + this.allGroup.forEach(item => { + this.$set(item, 'fold', false); + }) + } } changeSizeActionWidth(step: number) { diff --git a/source/src/devtools/ccType/ui-prop.vue b/source/src/devtools/ccType/ui-prop.vue index d525507..f4ef0df 100644 --- a/source/src/devtools/ccType/ui-prop.vue +++ b/source/src/devtools/ccType/ui-prop.vue @@ -110,7 +110,7 @@ export default class UiProp extends Vue { document.addEventListener("onselectstart", this._onSelect); } - colorReverse(OldColorValue) { + colorReverse(OldColorValue: string) { OldColorValue = "0x" + OldColorValue.replace(/#/g, ""); var str = "000000" + (0xFFFFFF - OldColorValue).toString(16); return '#' + str.substring(str.length - 6, str.length); diff --git a/source/src/devtools/index.vue b/source/src/devtools/index.vue index 1b725c0..c4fade7 100644 --- a/source/src/devtools/index.vue +++ b/source/src/devtools/index.vue @@ -55,7 +55,7 @@ const PluginMsg = require("../core/plugin-msg"); } }) export default class Index extends Vue { - private isShowDebug: boolean = true; + private isShowDebug: boolean = false; treeItemData: Record = {}; treeData: Array> = [] bgConn: chrome.runtime.Port | null = null// 与background.js的链接 @@ -342,8 +342,6 @@ export default class Index extends Vue { onBtnClickTest3() { // chrome.devtools.inspectedWindow.eval(`window.ccinspector.testMsg3()`) - let f = require("../core/event-mgr"); - console.log(f.id); } onMemoryTest() { diff --git a/source/vue.config.js b/source/vue.config.js index afca3dd..4912859 100644 --- a/source/vue.config.js +++ b/source/vue.config.js @@ -1,3 +1,4 @@ +const Copy = require("./plugins/copy"); module.exports = { publicPath: "/", outputDir: "dist", @@ -8,6 +9,9 @@ module.exports = { }, pluginOptions: { browserExtension: { + extensionReloaderOptions: { + reloadPage: false, + }, components: { background: true, contentScripts: true, @@ -15,7 +19,8 @@ module.exports = { componentOptions: { contentScripts: { entries: { - content: "src/content.ts" + content: "src/content.ts", + inject: "src/inject.js" }, }, background: { @@ -24,4 +29,9 @@ module.exports = { } } }, + configureWebpack: { + plugins: [ + // new Copy([{src: "src/inject.js", dest: "js/inject.js"}]), + ] + } };