From f263bb1db68a812270a8ef0ff17f11836f0a3172 Mon Sep 17 00:00:00 2001 From: xuyanfeng Date: Sun, 4 Apr 2021 15:42:16 +0800 Subject: [PATCH 1/7] =?UTF-8?q?=E4=BC=98=E5=8C=96prop=E7=BB=84=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- source/src/devtools/ccType/ui-prop.vue | 145 ++++++++++++++++++++----- 1 file changed, 120 insertions(+), 25 deletions(-) diff --git a/source/src/devtools/ccType/ui-prop.vue b/source/src/devtools/ccType/ui-prop.vue index 274be5d..3ffa13e 100644 --- a/source/src/devtools/ccType/ui-prop.vue +++ b/source/src/devtools/ccType/ui-prop.vue @@ -1,16 +1,41 @@ - From 24bb029f15db61da69d7bbf3a70d247de5b0515a Mon Sep 17 00:00:00 2001 From: xuyanfeng Date: Sun, 4 Apr 2021 19:10:38 +0800 Subject: [PATCH 4/7] =?UTF-8?q?=E5=85=A8=E5=B1=80=E6=9B=BF=E6=8D=A2color-p?= =?UTF-8?q?icker=E7=9A=84=E6=A0=B7=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- source/src/devtools/global.less | 13 +++++++++++++ 1 file changed, 13 insertions(+) create mode 100644 source/src/devtools/global.less diff --git a/source/src/devtools/global.less b/source/src/devtools/global.less new file mode 100644 index 0000000..2118918 --- /dev/null +++ b/source/src/devtools/global.less @@ -0,0 +1,13 @@ +.el-color-picker--mini { + width: 100% !important; + + .el-color-picker__trigger { + width: 100% !important; + height: 30px !important; + padding: 0; + + .el-color-picker__icon { + display: none; + } + } +} From f4c1278cde30f5a53edefdc5d5f013b23f707ec3 Mon Sep 17 00:00:00 2001 From: xuyanfeng Date: Sun, 4 Apr 2021 19:10:58 +0800 Subject: [PATCH 5/7] =?UTF-8?q?=E4=BC=98=E5=8C=96prop=E7=BB=84=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- source/src/devtools/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/source/src/devtools/index.ts b/source/src/devtools/index.ts index 104400b..8eddc82 100644 --- a/source/src/devtools/index.ts +++ b/source/src/devtools/index.ts @@ -1,9 +1,9 @@ import Vue from "vue"; import ElementUI from "element-ui" import "element-ui/lib/theme-chalk/index.css" +import "./global.less" import index from "./index.vue"; import './register-panel'; - Vue.use(ElementUI, {size: "mini"}); new Vue({ el: "#app", From 9694e2722c8be33ef507aad5fcdbef2cfb16f5e8 Mon Sep 17 00:00:00 2001 From: xuyanfeng Date: Sun, 4 Apr 2021 19:21:17 +0800 Subject: [PATCH 6/7] =?UTF-8?q?=E4=BC=98=E5=8C=96prop=E7=BB=84=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- source/package.json | 8 +- .../src/devtools/ccType/NodeBaseProperty.vue | 76 +-------- source/src/devtools/data.ts | 149 ++++++++++++++++++ source/src/devtools/index.vue | 23 +-- 4 files changed, 158 insertions(+), 98 deletions(-) create mode 100644 source/src/devtools/data.ts diff --git a/source/package.json b/source/package.json index f8c8350..8af876d 100644 --- a/source/package.json +++ b/source/package.json @@ -5,8 +5,8 @@ "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", - "build-watch": "vue-cli-service build --watch", - "lint": "vue-cli-service lint" + "lint": "vue-cli-service lint", + "build-watch": "vue-cli-service build --watch" }, "dependencies": { "@types/fs-extra": "^9.0.9", @@ -37,8 +37,8 @@ "lint-staged": "^9.5.0", "prettier": "^2.2.1", "typescript": "~4.1.5", - "vue-template-compiler": "^2.6.11", - "vue-cli-plugin-browser-extension": "latest" + "vue-cli-plugin-browser-extension": "latest", + "vue-template-compiler": "^2.6.11" }, "browserslist": [ "> 1%", diff --git a/source/src/devtools/ccType/NodeBaseProperty.vue b/source/src/devtools/ccType/NodeBaseProperty.vue index 93f3b1f..c940f8f 100644 --- a/source/src/devtools/ccType/NodeBaseProperty.vue +++ b/source/src/devtools/ccType/NodeBaseProperty.vue @@ -19,7 +19,7 @@ import Vue from "vue" import {Component, Prop} from "vue-property-decorator" import UiProp from "./ui-prop.vue" -import {DataType} from "../data"; +import {DataType, testData} from "../data"; @Component({ components: {UiProp}, @@ -27,7 +27,7 @@ import {DataType} from "../data"; export default class NodeBaseProperty extends Vue { name: string = "node-base" - @Prop() + @Prop({default: () => testData,}) allGroup: Array> | undefined; onClickHeader(group) { @@ -44,83 +44,11 @@ export default class NodeBaseProperty extends Vue { } created() { - this.setTestData() this.allGroup.forEach(item => { this.$set(item, 'fold', false); }) } - setTestData() { - this.allGroup = [ - { - name: "group1", - data: [ - {name: "uuid", value: {type: DataType.String, data: 'abc'}}, - {name: "opacity", value: {type: DataType.Number, data: 100}}, - - { - name: "size", - value: { - type: DataType.Vec2, - data: [ - {name: "X", value: {type: DataType.Number, data: 100}}, - {name: "Y", value: {type: DataType.Number, data: 200}}, - ] - } - }, - { - name: "position", - value: { - type: DataType.Vec3, - data: [ - {name: "X", value: {type: DataType.Number, data: 100}}, - {name: "Y", value: {type: DataType.Number, data: 200}}, - {name: "Z", value: {type: DataType.Number, data: 300}}, - ] - } - }, - { - name: "layout", - value: { - type: DataType.Enum, - data: 1, - values: [ - {name: "horizontal", value: 1}, - {name: "vertical", value: 2}, - ] - } - }, - { - name: "text", - value: { - type: DataType.Text, - data: 'aaaaaaaaafsf', - } - } - ] - }, - { - name: "group2", - data: [ - { - name: "bool", value: { - type: DataType.Bool, - data: true, - } - }, - { - name: 'color', - value: { - type: DataType.Color, - data: '#ff0000' - } - } - ] - }, - ]; - - } - changeSizeActionWidth(step: number) { let w = parseFloat(this.itemData.width); // this.itemData.width = w + step; diff --git a/source/src/devtools/data.ts b/source/src/devtools/data.ts new file mode 100644 index 0000000..9f1e340 --- /dev/null +++ b/source/src/devtools/data.ts @@ -0,0 +1,149 @@ +export enum DataType { + Number, + String, + Text, + Vec2, + Vec3, + Enum, + Bool, + Color, +} + +class Info { + public type: DataType = DataType.Number; +} + +export class TextData extends Info { + constructor() { + super(); + this.type = DataType.Text; + } +} + +export class StringData extends Info { + constructor() { + super(); + this.type = DataType.String; + } +} + +export class NumberData extends Info { + constructor() { + super(); + this.type = DataType.Number; + } + +} + +export class Vec2Data extends Info { + public v1: number = 0; + public v2: number = 0; + + constructor(v1: number, v2: number) { + super(); + this.type = DataType.Vec2 + this.v1 = v1; + this.v2 = v2; + } +} + +export class Vec3Data extends Info { + public v1: number = 0; + public v2: number = 0; + public v3: number = 0; + + constructor(v1: number, v2: number, v3: number) { + super(); + this.type = DataType.Vec3 + this.v1 = v1; + this.v2 = v2; + this.v3 = v3; + } +} + +export class EnumData extends Info { + constructor() { + super(); + this.type = DataType.Enum; + } + +} + +class NodeInfo { + public type: string = ''; // 类型 + + +} + +class CompInfo { + +} + +export const testData = [ + { + name: "group1", + data: [ + {name: "uuid", value: {type: DataType.String, data: 'abc'}}, + {name: "opacity", value: {type: DataType.Number, data: 100}}, + + { + name: "size", + value: { + type: DataType.Vec2, + data: [ + {name: "X", value: {type: DataType.Number, data: 100}}, + {name: "Y", value: {type: DataType.Number, data: 200}}, + ] + } + }, + { + name: "position", + value: { + type: DataType.Vec3, + data: [ + {name: "X", value: {type: DataType.Number, data: 100}}, + {name: "Y", value: {type: DataType.Number, data: 200}}, + {name: "Z", value: {type: DataType.Number, data: 300}}, + ] + } + }, + { + name: "layout", + value: { + type: DataType.Enum, + data: 1, + values: [ + {name: "horizontal", value: 1}, + {name: "vertical", value: 2}, + ] + } + }, + { + name: "text", + value: { + type: DataType.Text, + data: 'aaaaaaaaafsf', + } + } + ] + }, + { + name: "group2", + data: [ + { + name: "bool", value: { + type: DataType.Bool, + data: true, + } + }, + { + name: 'color', + value: { + type: DataType.Color, + data: '#ff0000' + } + } + ] + }, +]; + diff --git a/source/src/devtools/index.vue b/source/src/devtools/index.vue index 893bfd9..1b725c0 100644 --- a/source/src/devtools/index.vue +++ b/source/src/devtools/index.vue @@ -28,13 +28,8 @@
-
- - - -
+
-
未发现cocos creator的游戏! @@ -421,21 +416,9 @@ export default class Index extends Vue { .right { flex: 2; + background: #e5e9f2; + overflow: scroll; } } } - - -.treeInfo { - height: 100% -} - -.bg-purple { - background: #d3dce6; -} - - -.bg-purple-light { - background: #e5e9f2; -} From 8d0119e4a1a964a5a18e6af264341f5c265a7ac2 Mon Sep 17 00:00:00 2001 From: xuyanfeng Date: Sun, 4 Apr 2021 20:48:18 +0800 Subject: [PATCH 7/7] 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"}]), + ] + } };