CocosPlugin/cc-inspector-chrome
1
0
Fork 0
mirror of https://github.com/tidys/cc-inspector-chrome synced 2025-04-16 07:01:03 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
xuyanfeng 2021-04-04 20:48:18 +08:00
parent 9694e2722c
commit 8d0119e4a1
11 changed files with 110 additions and 104 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
source/plugins/copy.js Normal file
View File

@ -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;

57
source/src/content.ts
View File

@ -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)
});
}

57
source/src/core/content.js
View File

@ -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)
});
}

7
source/src/core/event-mgr.js
View File

@ -1,7 +0,0 @@
// const PluginMsg = require("./plugin-msg");
// module.exports = {
// id: "event-mgr",
// testInit(name) {
// chrome.runtime.connect({name: name})
// }
// }

3
source/src/core/event.js
View File

@ -1,3 +0,0 @@
module.exports = {
id: "event-id",
}

10
source/src/core/page.ejs
View File

@ -1,10 +0,0 @@
<!DOCTYPE html>
<html style="width: 100%;height: 100%;">
<head>
<meta charset="utf-8">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body style="width: 100%;height: 100%;">
<div id="app" style="width: 100%;height: 100%;"></div>
</body>
</html>

17
source/src/core/tools.js
View File

@ -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
});
}
}

14
source/src/devtools/ccType/NodeBaseProperty.vue
View File

@ -30,8 +30,10 @@ export default class NodeBaseProperty extends Vue {
@Prop({default: () => testData,})
allGroup: Array<Record<string, any>> | 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) {

2
source/src/devtools/ccType/ui-prop.vue
View File

@ -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);

4
source/src/devtools/index.vue
View File

@ -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<string, any> = {};
treeData: Array<Record<string, any>> = []
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() {

12
source/vue.config.js
View File

@ -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"}]),
]
}
};