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/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 0f01cf3..9efe120 100644 --- a/source/src/devtools/ccType/NodeBaseProperty.vue +++ b/source/src/devtools/ccType/NodeBaseProperty.vue @@ -1,150 +1,25 @@ - diff --git a/source/src/devtools/ccType/ui-prop.vue b/source/src/devtools/ccType/ui-prop.vue index 274be5d..f4ef0df 100644 --- a/source/src/devtools/ccType/ui-prop.vue +++ b/source/src/devtools/ccType/ui-prop.vue @@ -1,16 +1,45 @@ - 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/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; + } + } +} 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", diff --git a/source/src/devtools/index.vue b/source/src/devtools/index.vue index 893bfd9..c4fade7 100644 --- a/source/src/devtools/index.vue +++ b/source/src/devtools/index.vue @@ -28,13 +28,8 @@
-
- - - -
+
-
未发现cocos creator的游戏! @@ -60,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的链接 @@ -347,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() { @@ -421,21 +414,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; -} diff --git a/source/vue.config.js b/source/vue.config.js index 32305c1..b62798a 100644 --- a/source/vue.config.js +++ b/source/vue.config.js @@ -1,5 +1,5 @@ +const Copy = require("./plugins/copy"); const Path = require("path"); - module.exports = { publicPath: "/", outputDir: "dist", @@ -17,7 +17,8 @@ module.exports = { componentOptions: { contentScripts: { entries: { - content: "src/content.ts" + content: "src/content.ts", + inject: "src/inject.js" }, }, background: { @@ -32,5 +33,8 @@ module.exports = { entry: { inject: Path.join(__dirname, "src/inject.js"), } + plugins: [ + // new Copy([{src: "src/inject.js", dest: "js/inject.js"}]), + ] } };