CocosPlugin/cc-inspector-chrome
1
0
Fork 0
mirror of https://github.com/tidys/cc-inspector-chrome synced 2025-04-15 14:41:05 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

完成节点数据的收集

Browse Source
This commit is contained in:
xuyanfeng 2021-04-05 18:38:44 +08:00
parent e0c1f2336c
commit 36a81db153
12 changed files with 263 additions and 354 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
README.md
View File

@ -1,27 +1,7 @@
# Vue.js Chrome Extension Template ([wcer](https://github.com/YuraDev/wcer))
> Template for quick creation of Chrome extension on Vuejs c hot reloading when developing.
#说明
![Vue.js Chrome Extension Template images](/docs/images/mini.jpg)
## Installation:
This boilerplate was built as a template for [vue-cli](https://github.com/vuejs/vue-cli) and includes options to customize your final scaffolded app.
``` bash
# install vue-cli
$ npm install -g vue-cli
# create a new project using the template
$ vue init YuraDev/vue-chrome-extension-template my-project
# install dependencies and go!
$ cd my-project
$ npm install # or yarn
$ npm run dev # or yarn dev
inject在development模式下无法正常使用，暂时的解决办法，注释掉`vue-cli-plugin-browser-extension`代码中的
```
## Structure
* [backend](https://developer.chrome.com/extensions/background_pages): Background work of your scripts
* [content](https://developer.chrome.com/extensions/content_scripts) Run in the context of web pages
* [devtools](https://developer.chrome.com/extensions/devtools) - It can add new UI panels and sidebars, interact with the inspected page, get information about network requests, and more.
* [options](https://developer.chrome.com/extensions/options) - To allow users to customize the behavior of your extension, you may wish to provide an options page.
* popup - The page (window) that will be displayed when the icon is clicked
* tab - Your application will work in a separate tab
* ext - Shared scripts
* [manifest.js](https://developer.chrome.com/extensions/manifest) - Descriptions of the application, its rights and possibilities
webpackConfig.plugin('extension-reloader').use(ExtensionReloader, [{ entries, ...extensionReloaderOptions }])
```
详细原因参考：[issues](https://github.com/adambullmer/vue-cli-plugin-browser-extension/issues/120)

5
source/.eslintrc.js
View File

@ -1,5 +1,8 @@
module.exports = {
root: true,
globals: {
chrome: true,
},
env: {
node: true,
webextensions: true,
@ -37,5 +40,7 @@ module.exports = {
"@typescript-eslint/ban-types": "off",
"@typescript-eslint/no-empty-function": "off",
"@typescript-eslint/no-explicit-any": "off",
"no-prototype-builtins": "off",
"@typescript-eslint/ban-ts-comment": "off",
}
};

61
source/src/background.ts
View File

@ -5,36 +5,22 @@ let DevtoolsPanel: chrome.runtime.Port | null = null;
let Content: chrome.runtime.Port | null = null;
console.log('on background')
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
Devtools && Devtools.postMessage(request);
}
}
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) {
Content && Content.postMessage({msg: PluginMsg.Msg.UrlChange, data: {}})
chrome.runtime.onConnect.addListener((port: chrome.runtime.Port) => {
console.log(`%c[Connect] ${port.name}`, "color:blue;");
port.onMessage.addListener((data: any, sender: any) => {
console.log(`%c[Connect-Message] ${sender.name}\n${JSON.stringify(data)}`, "color:green;")
sender.postMessage(data);
if (data.msg === PluginMsg.Msg.UrlChange) {
if (sender.name === PluginMsg.Page.DevToolsPanel) {
Content && Content.postMessage({msg: PluginMsg.Msg.UrlChange, data: {}})
}
}
}
// chrome.tabs.executeScript(message.tabId, {code: message.content});
// port.postMessage(message);
}
// 长连接
chrome.runtime.onConnect.addListener((port) => {
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");
port.onMessage.removeListener(longConnectionLink);
// chrome.tabs.executeScript(message.tabId, {code: message.content});
// port.postMessage(message);
});
port.onDisconnect.addListener(function (port: chrome.runtime.Port) {
console.log(`%c[Connect-Dis] ${port.name}`, "color:red");
// port.onMessage.removeListener(longConnectionLink);
if (port.name === PluginMsg.Page.Devtools) {
Devtools = null;
} else if (port.name === PluginMsg.Page.Content) {
@ -55,8 +41,18 @@ chrome.runtime.onConnect.addListener((port) => {
});
// background.js 更像是一个主进程,负责整个插件的调度,生命周期和chrome保持一致
// [短连接] 监听来自content.js发来的事件
chrome.runtime.onMessage.addListener(shortConnectionLink);
// 监听来自content.js发来的事件
chrome.runtime.onMessage.addListener((request: any, sender: any, sendResponse: any) => {
console.log(`%c[Message]url:${sender.url}]\n${JSON.stringify(request)}`, 'color:green')
sendResponse && sendResponse(request);
if (request.msg === PluginMsg.Msg.Support ||
request.msg === PluginMsg.Msg.ListInfo ||
request.msg === PluginMsg.Msg.NodeInfo) {
// 将消息转发到devtools
Devtools && Devtools.postMessage(request);
}
}
);
chrome.tabs.onUpdated.addListener(function (tabId, changeInfo, tab) {
if (changeInfo.status === "complete") {
@ -69,7 +65,8 @@ chrome.tabs.onUpdated.addListener(function (tabId, changeInfo, tab) {
})
function createPluginMenus() {
// 右键菜单
const menus = [];
let parent = chrome.contextMenus.create({id: "parent", title: "CC-Inspector"});
chrome.contextMenus.create({
id: "test",

19
source/src/content.ts
View File

@ -1,37 +1,32 @@
console.log('content code')
// 具有操作dom的能力
// 加载其他脚本
// content.js 和原始界面共享DOM,但是不共享js,要想访问页面js,只能通过注入的方式
// content.js 和原始界面共享DOM，具有操作dom的能力
// 但是不共享js,要想访问页面js,只能通过注入的方式
import * as PluginMsg from './core/plugin-msg'
function injectScriptToPage(url) {
function injectScriptToPage(url: string) {
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.removeChild(script);
}
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
console.log(`%c[Connect-Message] ${JSON.stringify(data)}`, "color:green;")
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");
console.log(`%c[Window-Message] ${JSON.stringify(data)}`, "color:green;");
chrome.runtime.sendMessage(data);
}, false);

10
source/src/core/plugin-msg.ts
View File

@ -1,10 +1,10 @@
export const Page = {
Inject: "inject.js",
Devtools: "devtools.js",
Inject: "Inject",
Devtools: "Devtools",
DevToolsPanel: "DevToolsPanel",
Content: "content.js",
Popup: "popup.js",
Options: "options.js",
Content: "Content",
Popup: "Popup",
Options: "Options",
}
export const Msg = {
NodeInfo: "node_info",// 具体的节点信息

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

@ -39,9 +39,6 @@ export default class NodeBaseProperty extends Vue {
@Prop({default: "label"})
private label?: string | undefined
@Prop()
private itemData: any;
setup() {
}

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

@ -55,6 +55,7 @@ import {DataType} from '../data'
@Component({
components: {}
})
// todo 支持array
export default class UiProp extends Vue {
@Prop({default: ""})
name: string | undefined;

74
source/src/devtools/data.ts
View File

@ -11,6 +11,7 @@ export enum DataType {
class Info {
public type: DataType = DataType.Number;
public data: any;
}
export class TextData extends Info {
@ -20,10 +21,19 @@ export class TextData extends Info {
}
}
export class ColorData extends Info {
constructor(color: string) {
super();
this.type = DataType.Color;
this.data = color;
}
}
export class StringData extends Info {
constructor() {
constructor(data: string) {
super();
this.type = DataType.String;
this.data = data;
}
}
@ -31,33 +41,44 @@ export class NumberData extends Info {
constructor() {
super();
this.type = DataType.Number;
this.data = 1;
}
}
export class BoolData extends Info {
constructor(bol: boolean) {
super();
this.type = DataType.Bool;
this.data = bol;
}
}
export class Vec2Data extends Info {
public v1: number = 0;
public v2: number = 0;
constructor(v1: number, v2: number) {
constructor() {
super();
this.type = DataType.Vec2
this.v1 = v1;
this.v2 = v2;
this.data = [];
return this;
}
add(info: Property) {
this.data.push(info);
return this;
}
}
export class Vec3Data extends Info {
public v1: number = 0;
public v2: number = 0;
public v3: number = 0;
constructor(v1: number, v2: number, v3: number) {
constructor() {
super();
this.type = DataType.Vec3
this.v1 = v1;
this.v2 = v2;
this.v3 = v3;
this.type = DataType.Vec3;
this.data = [];
return this;
}
add(info: Property) {
this.data.push(info);
return this;
}
}
@ -69,6 +90,29 @@ export class EnumData extends Info {
}
export class Property {
public name: string = 'property';
public value: Info = new Info();
constructor(name: string, info: Info) {
this.name = name;
this.value = info;
}
}
export class Group {
public name: string = 'group';
public data: Array<Property> = [];
constructor(name: string) {
this.name = name;
}
addProperty(property: Property) {
this.data.push(property)
}
}
class NodeInfo {
public type: string = ''; // 类型

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

@ -2,8 +2,6 @@
<div id="devtools">
<div v-show="isShowDebug" class="find">
<div v-if="false">
<el-button type="success" @click="onBtnClickTest1">Test1</el-button>
<el-button type="success" @click="onBtnClickTest2">Test2</el-button>
<el-button type="success" @click="onMemoryTest">内存测试</el-button>
</div>
<div v-if="false">
@ -28,7 +26,7 @@
</div>
</div>
<div class="right">
<NodeBaseProperty :item-data="treeItemData"></NodeBaseProperty>
<NodeBaseProperty :all-group="treeItemData"></NodeBaseProperty>
</div>
</div>
<div v-show="!isShowDebug" class="no-find">
@ -56,7 +54,7 @@ const PluginMsg = require("../core/plugin-msg");
})
export default class Index extends Vue {
private isShowDebug: boolean = false;
treeItemData: Record<string, any> = {};
treeItemData: Array<Record<string, any>> = [];
treeData: Array<Record<string, any>> = []
bgConn: chrome.runtime.Port | null = null// 与background.js的链接
@ -97,11 +95,17 @@ export default class Index extends Vue {
let eventMsg = data.msg;
if (eventMsg === PluginMsg.Msg.ListInfo) {
this.isShowDebug = true;
this._updateTreeView(eventData);
if (!Array.isArray(eventData)) {
eventData = [eventData]
}
this.treeData = eventData;
} else if (eventMsg === PluginMsg.Msg.Support) {
this.isShowDebug = eventData.support;
} else if (eventMsg === PluginMsg.Msg.NodeInfo) {
this.isShowDebug = true;
if (!Array.isArray(eventData)) {
eventData = [eventData]
}
this.treeItemData = eventData;
} else if (eventMsg === PluginMsg.Msg.MemoryInfo) {
this.memory = eventData;
@ -114,27 +118,6 @@ export default class Index extends Vue {
for (let i = 0; i < 40; i++) {
this.treeData.push({name: `node${i}`, children: [{name: `children11111111111111111111111111111111111111${i}`}]})
}
this.treeItemData = {
"uuid": "11",
"name": "name",
"type": "cc_Node",
"height": 1080.986301369863,
"color": "#fff85f",
"opacity": 255,
"components": [
{
"uuid": "Comp.931",
"type": "cc_Canvas",
"name": "Canvas<Canvas>"
},
{
"uuid": "Comp.932",
"type": "HotUpdateScene",
"name": "Canvas<HotUpdateScene>"
}],
"active": true
};
}
handleNodeClick(data: any) {
@ -157,191 +140,44 @@ export default class Index extends Vue {
}
_updateTreeView(data: any) {
this.treeData = [data.scene];
return;
// 构建树形数据
if (this.treeData.length === 0) {// 第一次赋值
} else {
evalInspectorFunction(func: string, para?: string = '') {
if (!func || func.length < 0) {
console.log("缺失执行函数名!");
return;
}
let treeData = [];
debugger
let sceneData = data.scene;
if (sceneData) {
// scene info
let dataRoot = {
type: sceneData.type, uuid: sceneData.uuid,
label: sceneData.name, children: []
};
treeData.push(dataRoot);
this.handleNodeClick(dataRoot);
// scene children info
for (let k in sceneData.children) {
let itemSceneData = sceneData.children[k];
// let sceneItem = {uuid: itemSceneData.uuid, label: itemSceneData.name, children: []};
let sceneItem = {};
dealChildrenNode(itemSceneData, sceneItem);
treeData[0].children.push(sceneItem);
}
if (!chrome || !chrome.devtools) {
console.log("环境异常，无法执行函数");
return;
}
this.treeData = treeData;
function dealChildrenNode(rootData: any, obj: any) {
obj["data"] = rootData;
obj["uuid"] = rootData.uuid;
obj["label"] = rootData.name;
obj["type"] = rootData.type;
obj["children"] = [];
let rootChildren = rootData.children;
for (let k in rootChildren) {
let itemData = rootChildren[k];
let item = {};
dealChildrenNode(itemData, item);
obj.children.push(item);
}
}
}
_getInjectScriptString() {
let injectScript = "";
let code = injectScript.toString();
let array = code.split("\n");
array.splice(0, 1);// 删除开头
array.splice(-1, 1);// 删除结尾
let evalCode = "";
for (let i = 0; i < array.length; i++) {
evalCode += array[i] + "\n";
}
// console.log(evalCode);
return evalCode;
}
evalInspectorFunction(funcString: string, parm?: any) {
if (funcString || funcString.length > 0) {
let injectCode =
`if(window.ccinspector){
let func = window.ccinspector.${funcString};
let injectCode =
`if(window.ccinspector){
let func = window.ccinspector.${func};
if(func){
console.log("执行${funcString}成功");
func.apply(window.ccinspector,[${parm}]);
console.log("执行${func}成功");
func.apply(window.ccinspector,[${para}]);
}else{
console.log("未发现${funcString}函数");
console.log("未发现${func}函数");
}
}else{
console.log("可能脚本没有注入");
}`;
console.log(injectCode);
if (chrome && chrome.devtools) {
let ret = chrome.devtools.inspectedWindow.eval(injectCode, function (result, info) {
if (info && info.isException) {
console.log(info.value);
}
});
console.log(`ret:${ret}`);
}else{
console.log("脚本inject.js未注入");
}`;
chrome.devtools.inspectedWindow.eval(injectCode, (result, isException) => {
if (isException) {
console.error(isException);
} else {
console.log(`执行结果：${result}`)
}
} else {
console.log("执行失败!");
}
});
}
onBtnClickUpdateTree() {
this.evalInspectorFunction("updateTreeInfo");
}
onBtnClickUpdatePage() {
this.evalInspectorFunction("checkIsGamePage", "true");
// let code = this._getInjectScriptString();
// chrome.devtools.inspectedWindow.eval(code, function () {
// console.log("刷新成功!");
// });
}
onBtnClickTest1() {
chrome.devtools.inspectedWindow.eval(`window.ccinspector.testMsg1()`);
}
_getTime() {
return new Date().getTime().toString();
}
onBtnClickTest2() {
// chrome.devtools.inspectedWindow.eval(`window.ccinspector.testMsg2()`)
let newData = [
{
name: this._getTime(),
children: [
{
name: this._getTime(),
children: [
{
name: this._getTime(),
}
]
},
{
name: this._getTime(),
}
]
}
];
// this.treeData = newData;
this._update37(this.treeData[0], newData[0]);
}
_update37(oldTreeNode: any, newTreeNode: any) {
debugger
if (!newTreeNode) {
return;
}
if (!oldTreeNode) {
oldTreeNode = {name: "", children: []};
}
if (oldTreeNode.name !== newTreeNode.name) {
oldTreeNode.name = newTreeNode.name;
}
let oldChildren = oldTreeNode.children;
let newChildren = newTreeNode.children;
if (oldChildren.length === 0) {
oldChildren = newChildren;
} else {
// 比较2个数据: treeData, newTreeData
// 比较该层级的数据
for (let i = 0; i < newChildren.length; i++) {
let itemNew = newChildren[i];
let itemOld = oldChildren[i];
if (itemOld === undefined) {
// 老节点中没有
oldChildren.push(itemNew);
} else if (itemNew.name !== itemOld.name) {
// 替换
oldChildren.splice(i, 1, itemNew);
} else {
this._update37(itemOld, itemNew);
}
}
// 多余的删除了
if (oldChildren.length > newChildren.length) {
oldChildren.splice(newChildren.length, oldChildren.length - newChildren.length);
}
}
}
onBtnClickTest3() {
// chrome.devtools.inspectedWindow.eval(`window.ccinspector.testMsg3()`)
}
onMemoryTest() {

6
source/src/devtools/register-panel.ts
View File

@ -11,8 +11,8 @@ if (chrome && chrome.devtools) {
chrome.devtools.panels.create("Cocos", "icons/48.png", Manifest.devtools_page, (panel: chrome.devtools.panels.ExtensionPanel) => {
console.log("[CC-Inspector] Dev Panel Created!");
let conn = chrome.runtime.connect({name: PluginMsg.Page.DevToolsPanel});
conn.onMessage.addListener(function (event, sender) {
// debugger
conn.onMessage.addListener((event, sender) => {
console.log(`[Message] ${JSON.stringify(event)}`);
});
panel.onShown.addListener((window) => {
@ -27,7 +27,5 @@ if (chrome && chrome.devtools) {
});
}
);
}

174
source/src/inject.js
View File

@ -1,5 +1,6 @@
// eval 注入脚本的代码,变量尽量使用var,后来发现在import之后,let会自动变为var
const PluginMsg = require("./core/plugin-msg");
import {BoolData, ColorData, Group, NumberData, Property, StringData, Vec2Data, Vec3Data} from "./devtools/data";
let cc_inspector = {
inspectorGameMemoryStorage: {},
@ -22,19 +23,18 @@ let cc_inspector = {
// }
}.bind(this), 1000);
// 注册cc_after_render事件
window.addEventListener('message', function (event) {
window.addEventListener("message", function (event) {
if (event.data.msg === PluginMsg.Msg.UrlChange) {
this.checkIsGamePage(true);
let isCocosGame = this.checkIsGamePage();
}
}.bind(this));
},
updateTreeInfo() {
let isCocosCreatorGame = this.checkIsGamePage(true);
let isCocosCreatorGame = this.checkIsGamePage();
if (isCocosCreatorGame) {
let scene = cc.director.getScene();
if (scene) {
this.postData.scene = {
type: 1,// 标识类型
let sendData = {
uuid: scene.uuid,
name: scene.name,
children: [],
@ -43,40 +43,25 @@ let cc_inspector = {
let sceneChildren = scene.getChildren();
for (let i = 0; i < sceneChildren.length; i++) {
let node = sceneChildren[i];
this.getNodeChildren(node, this.postData.scene.children);
this.getNodeChildren(node, sendData.children);
}
// console.log(postData);
this.sendMsgToDevTools(PluginMsg.Msg.ListInfo, this.postData);
this.sendMsgToDevTools(PluginMsg.Msg.ListInfo, sendData);
} else {
this.postData.scene = null;
this.sendMsgToDevTools(PluginMsg.Msg.Support, {support: false, msg: "未发现游戏场景,不支持调试游戏!"});
}
}
},
checkIsGamePage(isLog) {
// 检测是否包含cc变量
let isCocosCreatorGame = true;
let msg = "支持调试游戏!";
try {
cc
} catch (e) {
isCocosCreatorGame = false;
msg = "不支持调试游戏!";
}
this.sendMsgToDevTools(PluginMsg.Msg.Support, {support: isCocosCreatorGame, msg: msg, log: isLog});
return isCocosCreatorGame;
},
testEval() {
console.log("hello devtools eval")
// 检测是否包含cc变量
checkIsGamePage() {
let isCocosGame = typeof cc !== "undefined";
this.sendMsgToDevTools(PluginMsg.Msg.Support, {support: isCocosGame});
return isCocosGame;
},
testMsg2() {
debugger
chrome.runtime.connect({name: "inject"});
},
testMsg3() {
debugger
chrome.runtime.sendMessage("ffff");
},
// 收集组件信息
getNodeComponentsInfo(node) {
let ret = [];
@ -130,42 +115,118 @@ let cc_inspector = {
}
}
},
_getNodeKeys(node) {
let keys = [];
let excludeProperty = ["children", "quat"];
for (let key in node) {
if (!key.startsWith("_") &&
!excludeProperty.includes(key) &&
typeof node[key] !== "function") {
keys.push(key);
}
}
return keys;
},
_getPairProperty(key) {
let pairProperty = {
rotation: ["rotationX", "rotationY"],
anchor: ["anchorX", "anchorY"],
size: ["width", "height"],
position: ["x", "y", "z"],
scale: ["scaleX", "scaleY", "scaleZ"],
};
for (let value in pairProperty) {
let pair = pairProperty[value];
if (pair.includes(key)) {
return {key: value, values: pair};
}
}
return null;
},
_genInfoData(propertyValue) {
let info = null;
switch (typeof propertyValue) {
case "boolean":
info = new BoolData(propertyValue);
break;
case "number":
info = new NumberData(propertyValue);
break;
case "string":
info = new StringData(propertyValue);
break;
default:
if (Array.isArray(propertyValue)) {
} else if (propertyValue instanceof cc.Color) {
let hex = propertyValue.toHEX();
info = new ColorData(`#${hex}`);
} else {
}
break;
}
if (!info) {
console.error(`暂不支持的属性值`, propertyValue);
}
return info;
},
// 获取节点信息
getNodeInfo(uuid) {
debugger
let node = this.inspectorGameMemoryStorage[uuid];
if (node) {
let nodeGroup = new Group("Node");
let keys = this._getNodeKeys(node);
for (let i = 0; i < keys.length; i++) {
let key = keys[i];
let propertyValue = node[key];
let pair = this._getPairProperty(key);
if (pair) {
// 把这个成对的属性剔除掉
pair.values.forEach(item => {
let index = keys.findIndex(el => el === item);
if (index !== -1) {
keys.splice(index, 1);
}
});
// 序列化成对的属性
let info = null;
let pairValues = pair.values;
if (pairValues.length === 2) {
info = new Vec2Data();
} else if (pairValues.length === 3) {
info = new Vec3Data();
}
pairValues.forEach(el => {
if (el in node) {
let vecData = this._genInfoData(node[el]);
if (vecData) {
info.add(new Property(el, vecData));
}
} else {
console.warn(`属性异常，节点丢失属性: ${el}，请检查 pairProperty的设置`);
}
});
if (info) {
let property = new Property(pair.key, info);
nodeGroup.addProperty(property);
}
} else {
let info = this._genInfoData(propertyValue);
if (info) {
nodeGroup.addProperty(new Property(key, info));
}
}
}
let nodeComp = this.getNodeComponentsInfo(node);
let nodeData = {
type: node.constructor.name,
uuid: node.uuid,
name: node.name,
x: node.x,
y: node.y,
zIndex: node.zIndex,
childrenCount: node.childrenCount,
children: [],
width: node.width,
height: node.height,
color: node.color.toCSS(),
opacity: node.opacity,
rotation: node.rotation,
rotationX: node.rotationX,
rotationY: node.rotationY,
anchorX: node.anchorX,
anchorY: node.anchorY,
scaleX: node.scaleX,
scaleY: node.scaleY,
skewX: node.skewX,
skewY: node.skewY,
components: nodeComp
};
let nodeType = node.constructor.name;
if (nodeType === 'cc_Scene') {
} else {
nodeData.active = node.active;
}
this.sendMsgToDevTools(PluginMsg.Msg.NodeInfo, nodeData);
this.sendMsgToDevTools(PluginMsg.Msg.NodeInfo, nodeGroup);
} else {
// 未获取到节点数据
console.log("未获取到节点数据");
@ -190,6 +251,7 @@ let cc_inspector = {
data.push(nodeData);
},
sendMsgToDevTools(msg, data) {
// 发送给content.js处理
window.postMessage({msg: msg, data: data}, "*");
},
@ -207,7 +269,7 @@ let cc_inspector = {
},
});
}
}
};
window.ccinspector = window.ccinspector || cc_inspector;
window.ccinspector.init && window.ccinspector.init();// 执行初始化函数

8
source/vue.config.js
View File

@ -28,13 +28,7 @@ module.exports = {
}
},
configureWebpack: {
mode: "development",
mode: "development",// production
devtool: "#source-map",
entry: {
inject: Path.join(__dirname, "src/inject.js"),
},
plugins: [
// new Copy([{src: "src/inject.js", dest: "js/inject.js"}]),
]
}
};