mirror of
https://github.com/tidys/cc-inspector-chrome
synced 2025-10-22 19:45:23 +00:00
init
This commit is contained in:
许彦峰
BIN
CocosCreatorInspector/src/assets/images/github.png
Normal file
BIN
CocosCreatorInspector/src/assets/images/github.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.9 KiB |
BIN
CocosCreatorInspector/src/assets/images/icon48.png
Normal file
BIN
CocosCreatorInspector/src/assets/images/icon48.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.4 KiB |
BIN
CocosCreatorInspector/src/assets/images/money.jpg
Normal file
BIN
CocosCreatorInspector/src/assets/images/money.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 140 KiB |
BIN
CocosCreatorInspector/src/assets/images/qq.png
Normal file
BIN
CocosCreatorInspector/src/assets/images/qq.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.6 KiB |
BIN
CocosCreatorInspector/src/assets/images/tiezi.png
Normal file
BIN
CocosCreatorInspector/src/assets/images/tiezi.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.0 KiB |
29
CocosCreatorInspector/src/dev/backgroundScripts.js
Normal file
29
CocosCreatorInspector/src/dev/backgroundScripts.js
Normal file
@@ -0,0 +1,29 @@
|
||||
chrome.extension.onConnect.addListener(function (port) {
|
||||
console.log("backgroundScripts connect!");
|
||||
let extensionListener = function (message, sender, sendResponse) {
|
||||
if (message.tabId && message.content) {
|
||||
if (message.action === 'code') {
|
||||
console.log("执行code");
|
||||
chrome.tabs.executeScript(message.tabId, {code: message.content});
|
||||
} else if (message.action === 'script') {
|
||||
console.log("执行script");
|
||||
chrome.tabs.executeScript(message.tabId, {file: message.content});
|
||||
} else {
|
||||
console.log("执行other");
|
||||
chrome.tabs.sendMessage(message.tabId, message, sendResponse);
|
||||
}
|
||||
|
||||
} else {
|
||||
port.postMessage(message);
|
||||
}
|
||||
sendResponse(message);
|
||||
};
|
||||
chrome.extension.onMessage.addListener(extensionListener);
|
||||
port.onDisconnect.addListener(function (port) {
|
||||
chrome.extension.onMessage.removeListener(extensionListener);
|
||||
});
|
||||
});
|
||||
|
||||
chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
|
||||
return true;
|
||||
});
|
||||
21
CocosCreatorInspector/src/dev/contentScripts.js
Normal file
21
CocosCreatorInspector/src/dev/contentScripts.js
Normal file
@@ -0,0 +1,21 @@
|
||||
window.addEventListener('message', function (event) {
|
||||
let data = event.data;
|
||||
// console.log("[contentScripts] " + JSON.stringify(data));
|
||||
chrome.extension.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");
|
||||
chrome.extension.sendMessage({type: 0, msg: "no creator game!"});
|
||||
}
|
||||
|
||||
|
||||
|
||||
9
CocosCreatorInspector/src/dev/dev.html
Normal file
9
CocosCreatorInspector/src/dev/dev.html
Normal file
@@ -0,0 +1,9 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Dev</title>
|
||||
</head>
|
||||
<body>
|
||||
</body>
|
||||
</html>
|
||||
52
CocosCreatorInspector/src/dev/dev.js
Normal file
52
CocosCreatorInspector/src/dev/dev.js
Normal file
@@ -0,0 +1,52 @@
|
||||
// 检查游戏是否为cocos游戏
|
||||
// var cc={};
|
||||
// if (typeof cc === "undefined") {
|
||||
// console.log("该html不是cocos游戏,无法调试!");
|
||||
// chrome.devtools.panels.elements.createSidebarPane("Creator Properties", function (sidebar) {
|
||||
// // console.log("[Cocos Creator Inspector] CreateSidebarPane");
|
||||
// // sidebar.setObject({ some_data: "Some data to show" });
|
||||
// sidebar.setPage("devNoGame.html");
|
||||
// });
|
||||
// chrome.devtools.panels.create(
|
||||
// "Cocos",
|
||||
// "static/images/icon48.png",
|
||||
// "devNoGame.html", function (panel) {
|
||||
// // console.log("[Cocos Creator Inspector] Dev Panel Created!");
|
||||
// });
|
||||
//
|
||||
// } else {
|
||||
//
|
||||
// }
|
||||
chrome.devtools.panels.elements.createSidebarPane('My SliderBar', function (sidebar) {
|
||||
sidebar.setObject({some_data: "some data to show!"});
|
||||
});
|
||||
|
||||
chrome.devtools.panels.create(
|
||||
"Cocos",
|
||||
"static/images/icon48.png",
|
||||
"devInspector.html",
|
||||
function (panel) {
|
||||
console.log("[Cocos Creator Inspector] Dev Panel Created!");
|
||||
|
||||
panel.onShown.addListener(function (window) {
|
||||
console.log("panel show");
|
||||
});
|
||||
panel.onHidden.addListener(function (window) {
|
||||
console.log("panel hide");
|
||||
});
|
||||
panel.onSearch.addListener(function (action, query) {
|
||||
console.log("panel search!");
|
||||
return false;
|
||||
});
|
||||
}
|
||||
);
|
||||
|
||||
// (function () {
|
||||
// var t = window.setInterval(function () {
|
||||
// egret && egret.devtool &&
|
||||
// egret.devtool.start &&
|
||||
// (window.clearInterval(t) || egret.devtool.start());
|
||||
// console.log("waiting")
|
||||
// }, 100);
|
||||
// egret && egret.devtool && egret.devtool.start && (window.clearInterval(t) || egret.devtool.start());
|
||||
// })();
|
||||
219
CocosCreatorInspector/src/dev/devInspector/App.vue
Normal file
219
CocosCreatorInspector/src/dev/devInspector/App.vue
Normal file
@@ -0,0 +1,219 @@
|
||||
<template>
|
||||
<div id="app">
|
||||
<el-button type="success" class="el-icon-refresh" size="mini" @click="onBtnClickUpdatePage">刷新</el-button>
|
||||
<!--<el-button type="success" size="mini" @click="onTestData">测试</el-button>-->
|
||||
<!--<el-button type="success" size="mini" @click="onBtnClickTest">test</el-button>-->
|
||||
<div v-show="isShowDebug">
|
||||
<el-row>
|
||||
<el-col :span="8">
|
||||
<div class="grid-content treeList">
|
||||
<el-tree :data="treeData"
|
||||
:props="defaultProps"
|
||||
:expand-on-click-node="false"
|
||||
@node-click="handleNodeClick"></el-tree>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="16">
|
||||
<div class="grid-content bg-purple-light treeInfo">
|
||||
<NodeBaseProperty v-bind:itemData="treeItemData"></NodeBaseProperty>
|
||||
<SceneProperty v-show=" treeItemData.type === 'cc_Scene'"></SceneProperty>
|
||||
<ComponentsProperty v-bind:components="treeItemData.components"></ComponentsProperty>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<div v-show="!isShowDebug">
|
||||
未发现cocos creator的游戏!
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import injectScript from '../injectScript.js'
|
||||
|
||||
export default {
|
||||
name: "app",
|
||||
data() {
|
||||
return {
|
||||
isShowDebug: false,
|
||||
treeItemData: {},
|
||||
treeData: [],
|
||||
treeDataMap: {},
|
||||
}
|
||||
},
|
||||
created() {
|
||||
if (chrome && chrome.extension) {
|
||||
|
||||
} else {
|
||||
this.isShowDebug = true;
|
||||
this.onTestData();
|
||||
return;
|
||||
}
|
||||
let backgroundPageConnection = chrome.extension.connect({
|
||||
name: btoa("for" + String(chrome.devtools.inspectedWindow.tabId))
|
||||
});
|
||||
backgroundPageConnection.onMessage.addListener(function (message) {
|
||||
if (message !== null) {
|
||||
let msgType = {
|
||||
nodeInfo: 2,//节点信息
|
||||
nodeListInfo: 1,// 节点列表信息
|
||||
notSupport: 0,// 不支持的游戏
|
||||
};
|
||||
if (message.type === msgType.nodeListInfo) {// 游戏节点
|
||||
this.isShowDebug = true;
|
||||
// let str = JSON.stringify(message.msg);
|
||||
// console.log("onMessage: " + str);
|
||||
this._updateView(message.msg);
|
||||
} else if (message.type === msgType.notSupport) {// 不支持调试
|
||||
this.isShowDebug = false;
|
||||
} else if (message.type === msgType.nodeInfo) {
|
||||
this.isShowDebug = true;
|
||||
this.treeItemData = message.msg;
|
||||
}
|
||||
}
|
||||
}.bind(this));
|
||||
|
||||
window.addEventListener('message', function (event) {
|
||||
console.log("on vue:" + JSON.stringify(event.data));
|
||||
console.log("on vue:" + JSON.stringify(event));
|
||||
}, false);
|
||||
},
|
||||
methods: {
|
||||
onTestData() {
|
||||
let testData = {
|
||||
"type": "cc_Node",
|
||||
"uuid": "5cUWX4Yh1MipGk+ssnZ/fL",
|
||||
"name": "Canvas",
|
||||
"x": 960,
|
||||
"y": 540.4931506849315,
|
||||
"zIndex": 0,
|
||||
"childrenCount": 6,
|
||||
"children": [],
|
||||
"width": 1920,
|
||||
"height": 1080.986301369863,
|
||||
"color": "#fff85f",
|
||||
"opacity": 255,
|
||||
"rotation": 0,
|
||||
"rotationX": 0,
|
||||
"rotationY": 0,
|
||||
"anchorX": 0.5,
|
||||
"anchorY": 0.5,
|
||||
"scaleX": 1,
|
||||
"scaleY": 1,
|
||||
"skewX": 0,
|
||||
"skewY": 0,
|
||||
"components": [
|
||||
{
|
||||
"uuid": "Comp.931",
|
||||
"type": "cc_Canvas",
|
||||
"name": "Canvas<Canvas>"
|
||||
},
|
||||
{
|
||||
"uuid": "Comp.932",
|
||||
"type": "HotUpdateScene",
|
||||
"name": "Canvas<HotUpdateScene>"
|
||||
}],
|
||||
"active": true
|
||||
};
|
||||
this.treeItemData = testData;
|
||||
},
|
||||
handleNodeClick(data) {
|
||||
// todo 去获取节点信息
|
||||
// console.log(data);
|
||||
let uuid = data.uuid;
|
||||
if (uuid !== undefined) {
|
||||
let code = "window.getNodeInfo('" + uuid + "')";
|
||||
chrome.devtools.inspectedWindow.eval(code);
|
||||
}
|
||||
},
|
||||
_updateView(data) {
|
||||
// 构建树形数据
|
||||
this.treeData = [];
|
||||
let sceneData = data.scene;
|
||||
if (sceneData) {
|
||||
// scene info
|
||||
let dataRoot = {
|
||||
type: sceneData.type, uuid: sceneData.uuid,
|
||||
label: sceneData.name, children: []
|
||||
};
|
||||
this.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);
|
||||
this.treeData[0].children.push(sceneItem);
|
||||
}
|
||||
}
|
||||
// TODO 节点树折叠的问题
|
||||
if (JSON.stringify(this.treeData) === "[]") {// 第一次赋值
|
||||
|
||||
} else {// 更新值
|
||||
}
|
||||
|
||||
function dealChildrenNode(rootData, obj) {
|
||||
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 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;
|
||||
},
|
||||
|
||||
onBtnClickUpdatePage() {
|
||||
let code = this._getInjectScriptString();
|
||||
chrome.devtools.inspectedWindow.eval(code, function () {
|
||||
console.log("刷新成功!");
|
||||
});
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.treeList {
|
||||
height: 100%
|
||||
}
|
||||
|
||||
.treeInfo {
|
||||
height: 100%
|
||||
}
|
||||
|
||||
.bg-purple {
|
||||
background: #d3dce6;
|
||||
}
|
||||
|
||||
.grid-content {
|
||||
border-radius: 4px;
|
||||
min-height: 20px;
|
||||
}
|
||||
|
||||
.bg-purple-light {
|
||||
background: #e5e9f2;
|
||||
}
|
||||
|
||||
body span h1 h2 h3 {
|
||||
font-family: BlinkMacSystemFont, 'Helvetica Neue', Helvetica, 'Lucida Grande', 'Segoe UI', Ubuntu, Cantarell, 'SourceHanSansCN-Normal', Arial, sans-serif
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,41 @@
|
||||
<template>
|
||||
<div id="app">
|
||||
<div>
|
||||
<div>
|
||||
<h4 @click="onClickComp" style="margin-top: 5px;margin-bottom: 1px;font-weight: bold;cursor: pointer">挂载组件:</h4>
|
||||
<hr style="margin-bottom: 2px;margin-top: 2px;"/>
|
||||
</div>
|
||||
<div v-show="isShowComp">
|
||||
<ui-prop :name="index" track-by="$index" v-for="(comp,index) in components" :key="index">
|
||||
<span>{{comp.type}}</span>
|
||||
</ui-prop>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: "",
|
||||
data() {
|
||||
return {
|
||||
isShowComp: true,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onClickComp() {
|
||||
this.isShowComp = !this.isShowComp;
|
||||
}
|
||||
},
|
||||
props: [
|
||||
'components'
|
||||
]
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
span {
|
||||
color: #fd942b;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,282 @@
|
||||
<template>
|
||||
<div id="app">
|
||||
<div>
|
||||
<ui-prop name="uuid">
|
||||
<span> {{itemData.uuid}}</span>
|
||||
</ui-prop>
|
||||
<ui-prop name="name">
|
||||
<span> {{itemData.name}}</span>
|
||||
</ui-prop>
|
||||
<!--坐标-->
|
||||
<ui-prop name="Position">
|
||||
<div style="float: left;width: 100%;">
|
||||
<ui-prop name="X" style="width: 50%;float: left; cursor: ew-resize;"
|
||||
@movestep="changePositionActionX"
|
||||
step="10">
|
||||
<!--<span>{{itemData.x}}</span>-->
|
||||
<input class="myInput"
|
||||
@change="changePosition"
|
||||
placeholder="itemData.x"
|
||||
v-model="itemData.x">
|
||||
</ui-prop>
|
||||
<ui-prop name="Y" style="width: 50%;float:left;cursor: ew-resize;"
|
||||
@movestep="changePositionActionY"
|
||||
step="10">
|
||||
<!--<span>{{itemData.y}}</span>-->
|
||||
<input class="myInput"
|
||||
@change="changePosition"
|
||||
placeholder="itemData.y"
|
||||
v-model="itemData.y">
|
||||
</ui-prop>
|
||||
</div>
|
||||
</ui-prop>
|
||||
<!--旋转-->
|
||||
<!--rotationX, rotationY暂时舍弃显示-->
|
||||
<ui-prop name="Rotation">
|
||||
<span> {{itemData.rotation}}</span>
|
||||
<!--<input class="myInput"-->
|
||||
<!--@change="changeRotation"-->
|
||||
<!--placeholder="itemData.rotation"-->
|
||||
<!--v-model="itemData.rotation"-->
|
||||
<!--style="width: 98%">-->
|
||||
</ui-prop>
|
||||
<!--缩放-->
|
||||
<ui-prop name="Scale">
|
||||
<div style="float: left;width: 100%;">
|
||||
<ui-prop name="X" style="width: 50%;float: left;">
|
||||
<span>{{itemData.scaleX}}</span>
|
||||
</ui-prop>
|
||||
<ui-prop name="Y" style="width: 50%;float:left;">
|
||||
<span>{{itemData.scaleY}}</span>
|
||||
</ui-prop>
|
||||
</div>
|
||||
</ui-prop>
|
||||
<!--锚点-->
|
||||
<ui-prop name="Anchor">
|
||||
<div style="float: left;width: 100%;">
|
||||
<ui-prop name="X" style="width: 50%;float: left;">
|
||||
<span>{{itemData.anchorX}}</span>
|
||||
</ui-prop>
|
||||
<ui-prop name="Y" style="width: 50%;float:left;">
|
||||
<span>{{itemData.anchorY}}</span>
|
||||
</ui-prop>
|
||||
</div>
|
||||
</ui-prop>
|
||||
<!--尺寸-->
|
||||
<ui-prop name="Size">
|
||||
<div style="float: left;width: 100%;">
|
||||
<ui-prop name="W" style="width: 50%;float: left;cursor: ew-resize;"
|
||||
@movestep="changeSizeActionWidth"
|
||||
step="10">
|
||||
<!--<span>{{itemData.width}}</span>-->
|
||||
<input class="myInput"
|
||||
@change="changeSize"
|
||||
placeholder="itemData.width"
|
||||
v-model="itemData.width">
|
||||
</ui-prop>
|
||||
<ui-prop name="H" style="width: 50%;float:left;cursor: ew-resize;"
|
||||
@movestep="changeSizeActionHeight"
|
||||
step="10">
|
||||
<!--<span>{{itemData.height}}</span>-->
|
||||
<input class="myInput"
|
||||
@change="changeSize"
|
||||
placeholder="itemData.height"
|
||||
v-model="itemData.height">
|
||||
</ui-prop>
|
||||
</div>
|
||||
</ui-prop>
|
||||
</ui-prop>
|
||||
<!--透明度-->
|
||||
<ui-prop name="Opacity">
|
||||
<span>{{itemData.opacity}}</span>
|
||||
</ui-prop>
|
||||
<!--斜切-->
|
||||
<ui-prop name="Skew">
|
||||
<div style="float: left;width: 100%;">
|
||||
<ui-prop name="X" style="width: 50%;float: left;">
|
||||
<span>{{itemData.skewX}}</span>
|
||||
</ui-prop>
|
||||
<ui-prop name="Y" style="width: 50%;float:left;">
|
||||
<span>{{itemData.skewY}}</span>
|
||||
</ui-prop>
|
||||
</div>
|
||||
</ui-prop>
|
||||
</div>
|
||||
<ui-prop name="zIndex">
|
||||
<span>{{itemData.zIndex}}</span>
|
||||
</ui-prop>
|
||||
<ui-prop name="childrenCount">
|
||||
<span>{{itemData.childrenCount}}</span>
|
||||
</ui-prop>
|
||||
<!--节点状态-->
|
||||
<ui-prop name="active">
|
||||
<p v-if="itemData.active" style="margin: 0;display: flex;align-items: center;flex-wrap: wrap;">
|
||||
<input type="checkbox"
|
||||
style="width: 20px;height: 20px;"
|
||||
:checked="itemData.active"
|
||||
@click="onBtnClickNodeHide">
|
||||
隐藏节点
|
||||
</p>
|
||||
|
||||
<p v-if="!itemData.active" style="margin: 0;display: flex;align-items: center;flex-wrap: wrap;">
|
||||
<input type="checkbox"
|
||||
style="width: 20px;height: 20px;"
|
||||
:checked="itemData.active"
|
||||
@click="onBtnClickNodeShow"
|
||||
>
|
||||
显示节点
|
||||
</p>
|
||||
</ui-prop>
|
||||
<!--颜色-->
|
||||
<ui-prop name="color">
|
||||
<div style="float: left;width: 100%;height: 100%;">
|
||||
<div style="float: left;width: 50%; height: 100%;">
|
||||
<el-color-picker v-model="itemData.color" size="mini"
|
||||
style="margin: 0;display: flex;align-items: center;flex-wrap: wrap;"
|
||||
@change="changeColor"></el-color-picker>
|
||||
</div>
|
||||
<div style="float: left;width: 50%;">
|
||||
<span>{{itemData.color}}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</ui-prop>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
|
||||
export default {
|
||||
name: "app",
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
methods: {
|
||||
changeSizeActionWidth(step) {
|
||||
let w = parseFloat(this.itemData.width);
|
||||
this.itemData.width = w + step;
|
||||
this.changeSize();
|
||||
},
|
||||
changeSizeActionHeight(step) {
|
||||
let h = parseFloat(this.itemData.height);
|
||||
this.itemData.height = h + step;
|
||||
this.changeSize();
|
||||
},
|
||||
changePositionActionX(step) {
|
||||
let x = parseFloat(this.itemData.x);
|
||||
this.itemData.x = x + step;
|
||||
this.changePosition();
|
||||
},
|
||||
changePositionActionY(step) {
|
||||
let y = parseFloat(this.itemData.y);
|
||||
this.itemData.y = y + step;
|
||||
this.changePosition();
|
||||
},
|
||||
changePosition() {
|
||||
// console.log("change changePositionX:" + this.itemData.x);
|
||||
// console.log("change changePositionY:" + this.itemData.y);
|
||||
this._evalCode(
|
||||
"window.pluginSetNodePosition(" +
|
||||
"'" + this.itemData.uuid + "'," +
|
||||
"'" + this.itemData.x + "'," +
|
||||
"'" + this.itemData.y + "'" +
|
||||
")");
|
||||
this._freshNode();
|
||||
},
|
||||
changeSize() {
|
||||
// console.log("change width:" + this.itemData.width);
|
||||
// console.log("change height:" + this.itemData.height);
|
||||
this._evalCode(
|
||||
"window.pluginSetNodeSize(" +
|
||||
"'" + this.itemData.uuid + "'," +
|
||||
"'" + this.itemData.width + "'," +
|
||||
"'" + this.itemData.height + "'" +
|
||||
")");
|
||||
this._freshNode();
|
||||
},
|
||||
changeRotation() {
|
||||
console.log("change rotation:" + this.itemData.rotation);
|
||||
this._evalCode(
|
||||
"window.pluginSetNodeRotation('" +
|
||||
this.itemData.uuid + "','" +
|
||||
this.itemData.rotation + "')");
|
||||
this._freshNode();
|
||||
},
|
||||
changeColor() {
|
||||
let color = this.itemData.color;
|
||||
console.log("color:" + color);
|
||||
this._evalCode(
|
||||
"window.pluginSetNodeColor('" +
|
||||
this.itemData.uuid + "','" +
|
||||
color + "');");
|
||||
this._freshNode();
|
||||
},
|
||||
onBtnClickNodeHide() {
|
||||
let uuid = this.itemData.uuid;
|
||||
if (uuid !== undefined) {
|
||||
let code = "window.pluginSetNodeActive('" + uuid + "', 0);";
|
||||
this._evalCode(code);
|
||||
this._freshNode();
|
||||
}
|
||||
},
|
||||
onBtnClickNodeShow() {
|
||||
let uuid = this.itemData.uuid;
|
||||
if (uuid !== undefined) {
|
||||
let code = "window.pluginSetNodeActive('" + uuid + "', 1);";
|
||||
this._evalCode(code);
|
||||
this._freshNode();
|
||||
}
|
||||
},
|
||||
_freshNode() {
|
||||
let uuid = this.itemData.uuid;
|
||||
let code2 = "window.getNodeInfo('" + uuid + "')";
|
||||
this._evalCode(code2);
|
||||
},
|
||||
_evalCode(code) {
|
||||
if (chrome && chrome.devtools) {
|
||||
chrome.devtools.inspectedWindow.eval(code);
|
||||
} else {
|
||||
console.log(code);
|
||||
}
|
||||
},
|
||||
},
|
||||
props: [
|
||||
'itemData'
|
||||
]
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
span {
|
||||
color: #fd942b;
|
||||
}
|
||||
|
||||
.btnSize {
|
||||
padding: 5px 10px;
|
||||
}
|
||||
|
||||
.comp {
|
||||
border: 2px solid #a1a1a1;
|
||||
padding: 5px 5px;
|
||||
background: #dddddd;
|
||||
width: 100%;
|
||||
border-radius: 5px;
|
||||
-moz-border-radius: 5px; /* 老的 Firefox */
|
||||
}
|
||||
|
||||
.float-left {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.compBorder {
|
||||
border: 1px solid #b3b3b3;
|
||||
background: #ffffff
|
||||
}
|
||||
|
||||
.myInput {
|
||||
width: 90%;
|
||||
border-radius: 5px;
|
||||
color: #fd942b;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,18 @@
|
||||
<template>
|
||||
<div id="app">
|
||||
<!--<h1> cc_Scene</h1>-->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "app",
|
||||
data() {
|
||||
return {}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
10
CocosCreatorInspector/src/dev/devInspector/devInspector.html
Normal file
10
CocosCreatorInspector/src/dev/devInspector/devInspector.html
Normal file
@@ -0,0 +1,10 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Title</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
</body>
|
||||
</html>
|
||||
23
CocosCreatorInspector/src/dev/devInspector/main.js
Normal file
23
CocosCreatorInspector/src/dev/devInspector/main.js
Normal file
@@ -0,0 +1,23 @@
|
||||
import Vue from 'vue';
|
||||
import ElementUI from 'element-ui'
|
||||
import 'element-ui/lib/theme-chalk/index.css'
|
||||
import App from './App.vue';
|
||||
|
||||
import ui_prop from './ui/ui-prop.vue'
|
||||
import NodeBaseProperty from './ccType/NodeBaseProperty.vue'
|
||||
import SceneProperty from './ccType/SceneProperty.vue'
|
||||
import ComponentsProperty from './ccType/ComponentsProperty'
|
||||
import ColorPicker from './ui/colorPicker'
|
||||
|
||||
|
||||
Vue.component('ui-prop', ui_prop);
|
||||
Vue.component('NodeBaseProperty', NodeBaseProperty);
|
||||
Vue.component('SceneProperty', SceneProperty);
|
||||
Vue.component('ComponentsProperty', ComponentsProperty);
|
||||
Vue.component('ColorPicker', ColorPicker);
|
||||
|
||||
Vue.use(ElementUI);
|
||||
new Vue({
|
||||
el: '#app',
|
||||
render: h => h(App)
|
||||
});
|
||||
229
CocosCreatorInspector/src/dev/devInspector/ui/colorPicker.vue
Normal file
229
CocosCreatorInspector/src/dev/devInspector/ui/colorPicker.vue
Normal file
@@ -0,0 +1,229 @@
|
||||
<template lang="html">
|
||||
<div class="m-colorPicker" ref="colorPicker" v-on:click="event => { event.stopPropagation() }">
|
||||
<!-- 颜色显示小方块 -->
|
||||
<div class="colorBtn"
|
||||
v-bind:style="`background-color: ${showColor}`"
|
||||
v-on:click="openStatus = !disabled"
|
||||
v-bind:class="{ disabled: disabled }"
|
||||
></div>
|
||||
<!-- 用以激活HTML5颜色面板 -->
|
||||
<input type="color"
|
||||
ref="html5Color"
|
||||
v-model="html5Color"
|
||||
v-on:change="updataValue(html5Color)">
|
||||
<!-- 颜色色盘 -->
|
||||
<div class="box" v-bind:class="{ open: openStatus }">
|
||||
<div class="hd">
|
||||
<div class="colorView" v-bind:style="`background-color: ${showPanelColor}`"></div>
|
||||
<div class="defaultColor"
|
||||
v-on:click="handleDefaultColor"
|
||||
v-on:mouseover="hoveColor = defaultColor"
|
||||
v-on:mouseout="hoveColor = null"
|
||||
>默认颜色</div>
|
||||
</div>
|
||||
<div class="bd">
|
||||
<h3>主题颜色</h3>
|
||||
<ul class="tColor">
|
||||
<li
|
||||
v-for="color of tColor"
|
||||
v-bind:style="{ backgroundColor: color }"
|
||||
v-on:mouseover="hoveColor = color"
|
||||
v-on:mouseout="hoveColor = null"
|
||||
v-on:click="updataValue(color)"
|
||||
></li>
|
||||
</ul>
|
||||
<ul class="bColor">
|
||||
<li v-for="item of colorPanel">
|
||||
<ul>
|
||||
<li
|
||||
v-for="color of item"
|
||||
v-bind:style="{ backgroundColor: color }"
|
||||
v-on:mouseover="hoveColor = color"
|
||||
v-on:mouseout="hoveColor = null"
|
||||
v-on:click="updataValue(color)"
|
||||
></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<h3>标准颜色</h3>
|
||||
<ul class="tColor">
|
||||
<li
|
||||
v-for="color of bColor"
|
||||
v-bind:style="{ backgroundColor: color }"
|
||||
v-on:mouseover="hoveColor = color"
|
||||
v-on:mouseout="hoveColor = null"
|
||||
v-on:click="updataValue(color)"
|
||||
></li>
|
||||
</ul>
|
||||
<h3 v-on:click="triggerHtml5Color">更多颜色...</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'colorPicker',
|
||||
props: {
|
||||
// 当前颜色值
|
||||
value: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
// 默认颜色
|
||||
defaultColor: {
|
||||
type: String,
|
||||
default: '#000'
|
||||
},
|
||||
// 禁用状态
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
// 面板打开状态
|
||||
openStatus: false,
|
||||
// 鼠标经过的颜色块
|
||||
hoveColor: null,
|
||||
// 主题颜色
|
||||
tColor: ['#000', '#fff', '#eeece1', '#1e497b', '#4e81bb', '#e2534d', '#9aba60', '#8165a0', '#47acc5', '#f9974c'],
|
||||
// 颜色面板
|
||||
colorConfig: [
|
||||
['#7f7f7f', '#f2f2f2'],
|
||||
['#0d0d0d', '#808080'],
|
||||
['#1c1a10', '#ddd8c3'],
|
||||
['#0e243d', '#c6d9f0'],
|
||||
['#233f5e', '#dae5f0'],
|
||||
['#632623', '#f2dbdb'],
|
||||
['#4d602c', '#eaf1de'],
|
||||
['#3f3150', '#e6e0ec'],
|
||||
['#1e5867', '#d9eef3'],
|
||||
['#99490f', '#fee9da']
|
||||
],
|
||||
// 标准颜色
|
||||
bColor: ['#c21401', '#ff1e02', '#ffc12a', '#ffff3a', '#90cf5b', '#00af57', '#00afee', '#0071be', '#00215f', '#72349d'],
|
||||
html5Color: this.value
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
// 显示面板颜色
|
||||
showPanelColor () {
|
||||
if (this.hoveColor) {
|
||||
return this.hoveColor
|
||||
} else {
|
||||
return this.showColor
|
||||
}
|
||||
},
|
||||
// 显示颜色
|
||||
showColor () {
|
||||
if (this.value) {
|
||||
return this.value
|
||||
} else {
|
||||
return this.defaultColor
|
||||
}
|
||||
},
|
||||
// 颜色面板
|
||||
colorPanel () {
|
||||
let colorArr = []
|
||||
for (let color of this.colorConfig) {
|
||||
colorArr.push(this.gradient(color[1], color[0], 5))
|
||||
}
|
||||
return colorArr
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
triggerHtml5Color () {
|
||||
this.$refs.html5Color.click()
|
||||
},
|
||||
// 更新组件的值 value
|
||||
updataValue (value) {
|
||||
this.$emit('input', value)
|
||||
this.$emit('change', value)
|
||||
this.openStatus = false
|
||||
},
|
||||
// 设置默认颜色
|
||||
handleDefaultColor () {
|
||||
this.updataValue(this.defaultColor)
|
||||
},
|
||||
// 格式化 hex 颜色值
|
||||
parseColor (hexStr) {
|
||||
if (hexStr.length === 4) {
|
||||
hexStr = '#' + hexStr[1] + hexStr[1] + hexStr[2] + hexStr[2] + hexStr[3] + hexStr[3]
|
||||
} else {
|
||||
return hexStr
|
||||
}
|
||||
},
|
||||
// RGB 颜色 转 HEX 颜色
|
||||
rgbToHex (r, g, b) {
|
||||
let hex = ((r << 16) | (g << 8) | b).toString(16)
|
||||
return '#' + new Array(Math.abs(hex.length - 7)).join('0') + hex
|
||||
},
|
||||
// HEX 转 RGB 颜色
|
||||
hexToRgb (hex) {
|
||||
hex = this.parseColor(hex)
|
||||
let rgb = []
|
||||
for (let i = 1; i < 7; i += 2) {
|
||||
rgb.push(parseInt('0x' + hex.slice(i, i + 2)))
|
||||
}
|
||||
return rgb
|
||||
},
|
||||
// 计算渐变过渡颜色
|
||||
gradient (startColor, endColor, step) {
|
||||
// 讲 hex 转换为 rgb
|
||||
let sColor = this.hexToRgb(startColor)
|
||||
let eColor = this.hexToRgb(endColor)
|
||||
|
||||
// 计算R\G\B每一步的差值
|
||||
let rStep = (eColor[0] - sColor[0]) / step
|
||||
let gStep = (eColor[1] - sColor[1]) / step
|
||||
let bStep = (eColor[2] - sColor[2]) / step
|
||||
|
||||
let gradientColorArr = []
|
||||
// 计算每一步的hex值
|
||||
for (let i = 0; i < step; i++) {
|
||||
gradientColorArr.push(this.rgbToHex(parseInt(rStep * i + sColor[0]), parseInt(gStep * i + sColor[1]), parseInt(bStep * i + sColor[2])))
|
||||
}
|
||||
return gradientColorArr
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
// 点击页面上其他地方，关闭弹窗
|
||||
document.onclick = (e) => {
|
||||
this.openStatus = false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.m-colorPicker{
|
||||
position: relative; text-align: left; font-size: 14px; display: inline-block;
|
||||
ul,li,ol{ list-style: none; margin: 0; padding: 0; }
|
||||
input{ display: none; }
|
||||
.colorBtn{ width: 15px; height: 15px; }
|
||||
.colorBtn.disabled{ cursor: no-drop; }
|
||||
.box{
|
||||
position: absolute; width: 190px; background: #fff; border: 1px solid #ddd; visibility: hidden; border-radius: 2px; margin-top: 2px; padding: 10px; padding-bottom: 5px; box-shadow: 0 0 5px rgba(0,0,0,.15); opacity: 0; transition: all .3s ease;
|
||||
h3{ margin: 0; font-size: 14px; font-weight: normal; margin-top: 10px; margin-bottom: 5px; line-height: 1; }
|
||||
}
|
||||
.box.open{ visibility: visible; opacity: 1; }
|
||||
.hd{
|
||||
overflow: hidden; line-height: 29px;
|
||||
.colorView{ width: 100px; height: 30px; float: left; transition: background-color .3s ease; }
|
||||
.defaultColor{ width: 80px; float: right; text-align: center; border: 1px solid #ddd; cursor: pointer; }
|
||||
}
|
||||
.tColor{
|
||||
li{ width: 15px; height: 15px; display: inline-block; margin: 0 2px; transition: all .3s ease; }
|
||||
li:hover{ box-shadow: 0 0 5px rgba(0,0,0,.4); transform: scale(1.3); }
|
||||
}
|
||||
.bColor{
|
||||
li{
|
||||
width: 15px; display: inline-block; margin: 0 2px;
|
||||
li{ display: block; width: 15px; height: 15px; transition: all .3s ease; margin: 0; }
|
||||
li:hover{ box-shadow: 0 0 5px rgba(0,0,0,.4); transform: scale(1.3); }
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
79
CocosCreatorInspector/src/dev/devInspector/ui/ui-prop.vue
Normal file
79
CocosCreatorInspector/src/dev/devInspector/ui/ui-prop.vue
Normal file
@@ -0,0 +1,79 @@
|
||||
<template>
|
||||
<div id="app" style="height: 30px;overflow: hidden;width: 100%;">
|
||||
<div style="width: 20%;float: left;background-color: #4a4a4a;text-align: left;"
|
||||
@mousedown="changePositionMouseAction"
|
||||
onselectstart="return false;"
|
||||
class="noselect">
|
||||
<span onselectstart="return false;" class="noselect font"
|
||||
style="line-height: 30px;color: #bdbdbd;font-size: 12px;margin: 3px;">
|
||||
{{name}}
|
||||
</span>
|
||||
</div>
|
||||
<div style=" float:left;background-color: #4a4a4a;width: 80%;height:100%;text-align: left;">
|
||||
<div style="line-height: 30px;height: 100%;">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "app",
|
||||
data() {
|
||||
return {
|
||||
clientX: 0,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
changePositionMouseAction(event) {
|
||||
document.addEventListener("mousemove", this._onMouseMove);
|
||||
document.addEventListener("mouseup", this._onMouseUp);
|
||||
document.addEventListener("onselectstart", this._onSelect);
|
||||
},
|
||||
_onSelect() {
|
||||
return false;
|
||||
},
|
||||
_onMouseMove(event) {
|
||||
let x = event.clientX;
|
||||
let calcStep = parseFloat(this.step) || 1;// 默认值为1
|
||||
// console.log("curentX: " + x);
|
||||
// console.log("clientX: " + this.clientX);
|
||||
if (x > this.clientX) {
|
||||
calcStep = Math.abs(calcStep);
|
||||
} else {
|
||||
calcStep = -Math.abs(calcStep);
|
||||
}
|
||||
// console.log(calcStep);
|
||||
this.$emit("movestep", calcStep);
|
||||
this.clientX = x;
|
||||
},
|
||||
_onMouseUp(event) {
|
||||
document.removeEventListener('mousemove', this._onMouseMove);
|
||||
document.removeEventListener("mouseup", this._onMouseUp);
|
||||
document.removeEventListener("onselectstart", this._onSelect);
|
||||
},
|
||||
},
|
||||
props: [
|
||||
'name',
|
||||
'step',
|
||||
]
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.font {
|
||||
font-family: BlinkMacSystemFont, 'Helvetica Neue', Helvetica, 'Lucida Grande', 'Segoe UI', Ubuntu, Cantarell, 'SourceHanSansCN-Normal', Arial, sans-serif
|
||||
}
|
||||
|
||||
.noselect {
|
||||
-webkit-touch-callout: none; /* iOS Safari */
|
||||
-webkit-user-select: none; /* Chrome/Safari/Opera */
|
||||
-khtml-user-select: none; /* Konqueror */
|
||||
-moz-user-select: none; /* Firefox */
|
||||
-ms-user-select: none; /* Internet Explorer/Edge */
|
||||
user-select: none;
|
||||
/* Non-prefixed version, currently
|
||||
not supported by any browser */
|
||||
}
|
||||
</style>
|
||||
166
CocosCreatorInspector/src/dev/injectScript.js
Normal file
166
CocosCreatorInspector/src/dev/injectScript.js
Normal file
@@ -0,0 +1,166 @@
|
||||
// eval 注入脚本的代码,变量尽量使用var,后来发现在import之后,let会自动变为var
|
||||
export default function () {
|
||||
let msgType = {
|
||||
nodeInfo: 2,//节点信息
|
||||
nodeListInfo: 1,// 节点列表信息
|
||||
notSupport: 0,// 不支持的游戏
|
||||
};
|
||||
let postData = {
|
||||
scene: {
|
||||
name: "",
|
||||
children: []
|
||||
},
|
||||
};
|
||||
window.inspectorGameMemoryStorage = window.inspectorGameMemoryStorage || {};
|
||||
|
||||
// 收集组件信息
|
||||
function getNodeComponentsInfo(node) {
|
||||
let ret = [];
|
||||
let nodeComp = node._components;
|
||||
for (let i = 0; i < nodeComp.length; i++) {
|
||||
let itemComp = nodeComp[i];
|
||||
window.inspectorGameMemoryStorage[itemComp.uuid] = itemComp;
|
||||
ret.push({
|
||||
uuid: itemComp.uuid,
|
||||
type: itemComp.constructor.name,
|
||||
name: itemComp.name,
|
||||
});
|
||||
}
|
||||
return ret;
|
||||
}
|
||||
|
||||
window.pluginSetNodeColor = function (uuid, colorHex) {
|
||||
let node = window.inspectorGameMemoryStorage[uuid];
|
||||
if (node) {
|
||||
node.color = cc.hexToColor(colorHex);
|
||||
}
|
||||
};
|
||||
window.pluginSetNodeRotation = function (uuid, rotation) {
|
||||
let node = window.inspectorGameMemoryStorage[uuid];
|
||||
if (node) {
|
||||
node.rotation = rotation;
|
||||
}
|
||||
};
|
||||
window.pluginSetNodePosition = function (uuid, x, y) {
|
||||
let node = window.inspectorGameMemoryStorage[uuid];
|
||||
if (node) {
|
||||
node.x = x;
|
||||
node.y = y;
|
||||
}
|
||||
};
|
||||
window.pluginSetNodeSize = function (uuid, width, height) {
|
||||
let node = window.inspectorGameMemoryStorage[uuid];
|
||||
if (node) {
|
||||
node.width = width;
|
||||
node.height = height;
|
||||
}
|
||||
};
|
||||
// 设置节点是否可视
|
||||
window.pluginSetNodeActive = function (uuid, isActive) {
|
||||
let node = window.inspectorGameMemoryStorage[uuid];
|
||||
if (node) {
|
||||
if (isActive === 1) {
|
||||
node.active = true;
|
||||
} else if (isActive === 0) {
|
||||
node.active = false;
|
||||
}
|
||||
}
|
||||
};
|
||||
// 获取节点信息
|
||||
window.getNodeInfo = function (uuid) {
|
||||
let node = window.inspectorGameMemoryStorage[uuid];
|
||||
if (node) {
|
||||
let nodeComp = 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;
|
||||
}
|
||||
window.sendMsgToDevTools(msgType.nodeInfo, nodeData);
|
||||
} else {
|
||||
// 未获取到节点数据
|
||||
console.log("未获取到节点数据");
|
||||
}
|
||||
};
|
||||
|
||||
// 收集节点信息
|
||||
function getNodeChildren(node, data) {
|
||||
// console.log("nodeName: " + node.name);
|
||||
let nodeData = {
|
||||
uuid: node.uuid,
|
||||
name: node.name,
|
||||
children: [],
|
||||
};
|
||||
window.inspectorGameMemoryStorage[node.uuid] = node;
|
||||
let nodeChildren = node.getChildren();
|
||||
for (let i = 0; i < nodeChildren.length; i++) {
|
||||
let childItem = nodeChildren[i];
|
||||
// console.log("childName: " + childItem.name);
|
||||
getNodeChildren(childItem, nodeData.children);
|
||||
}
|
||||
data.push(nodeData);
|
||||
}
|
||||
|
||||
window.sendMsgToDevTools = function (type, msg) {
|
||||
window.postMessage({type: type, msg: msg}, "*");
|
||||
};
|
||||
// 检测是否包含cc变量
|
||||
let isCocosCreatorGame = true;
|
||||
try {
|
||||
let cocosInspectorTestVar = cc;
|
||||
} catch (e) {
|
||||
isCocosCreatorGame = false;
|
||||
window.sendMsgToDevTools(msgType.notSupport, "不支持调试游戏!");
|
||||
}
|
||||
|
||||
if (isCocosCreatorGame) {
|
||||
let scene = cc.director.getScene();
|
||||
if (scene) {
|
||||
postData.scene = {
|
||||
type: 1,// 标识类型
|
||||
uuid: scene.uuid,
|
||||
name: scene.name,
|
||||
children: [],
|
||||
};
|
||||
window.inspectorGameMemoryStorage[scene.uuid] = scene;
|
||||
|
||||
let sceneChildren = scene.getChildren();
|
||||
for (let i = 0; i < sceneChildren.length; i++) {
|
||||
let node = sceneChildren[i];
|
||||
getNodeChildren(node, postData.scene.children);
|
||||
}
|
||||
// console.log(postData);
|
||||
window.sendMsgToDevTools(msgType.nodeListInfo, postData);
|
||||
} else {
|
||||
postData.scene = null;
|
||||
window.sendMsgToDevTools(msgType.notSupport, "不支持调试游戏!");
|
||||
}
|
||||
} else {
|
||||
console.log("未发现cocos creator game");
|
||||
}
|
||||
}
|
||||
12
CocosCreatorInspector/src/dev/util.js
Normal file
12
CocosCreatorInspector/src/dev/util.js
Normal file
@@ -0,0 +1,12 @@
|
||||
let index = 0;
|
||||
setInterval(function () {
|
||||
let msg = "util: " + index++;
|
||||
// chrome.extension.sendMessage(msg;
|
||||
if (typeof aa !== undefined) {
|
||||
msg = aa;
|
||||
}
|
||||
window.postMessage({type: 1, msg: msg}, '*');
|
||||
}.bind(this), 2000);
|
||||
|
||||
|
||||
|
||||
21
CocosCreatorInspector/src/index/App.vue
Normal file
21
CocosCreatorInspector/src/index/App.vue
Normal file
@@ -0,0 +1,21 @@
|
||||
<template>
|
||||
<div id="app">
|
||||
<h1>{{label}}</h1>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "app",
|
||||
data() {
|
||||
return {
|
||||
label: "indexPage",
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
11
CocosCreatorInspector/src/index/index.html
Normal file
11
CocosCreatorInspector/src/index/index.html
Normal file
@@ -0,0 +1,11 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>vue</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app">
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
7
CocosCreatorInspector/src/index/main.js
Normal file
7
CocosCreatorInspector/src/index/main.js
Normal file
@@ -0,0 +1,7 @@
|
||||
import Vue from 'vue';
|
||||
import App from './App.vue';
|
||||
|
||||
new Vue({
|
||||
el: '#app',
|
||||
render: h => h(App)
|
||||
});
|
||||
48
CocosCreatorInspector/src/manifest.json
Normal file
48
CocosCreatorInspector/src/manifest.json
Normal file
@@ -0,0 +1,48 @@
|
||||
|
||||
{
|
||||
"name": "Cocos Creator Inspector",
|
||||
"version": "1.0.1",
|
||||
"description": "Cocos Creator Inspector",
|
||||
"browser_action": {
|
||||
"default_title": "Cocos Creator Inspector",
|
||||
"default_icon": "static/images/icon48.png",
|
||||
"default_popup": "popup.html"
|
||||
},
|
||||
"icons": {
|
||||
"48": "static/images/icon48.png"
|
||||
},
|
||||
"devtools_page": "dev.html",
|
||||
"content_scripts": [
|
||||
{
|
||||
"matches": [
|
||||
"<all_urls>"
|
||||
],
|
||||
"js": [
|
||||
"contentScripts.main.js"
|
||||
],
|
||||
"run_at": "document_end"
|
||||
}
|
||||
],
|
||||
"background": {
|
||||
"scripts": [
|
||||
"backgroundScripts.main.js"
|
||||
]
|
||||
},
|
||||
"options_page": "index.html",
|
||||
"manifest_version": 2,
|
||||
"permissions": [
|
||||
"tabs",
|
||||
"http://*/*",
|
||||
"https://*/*",
|
||||
"*://*/*",
|
||||
"system.cpu",
|
||||
"tabs",
|
||||
"storage",
|
||||
"nativeMessaging"
|
||||
],
|
||||
"web_accessible_resources": [
|
||||
"*/*",
|
||||
"*"
|
||||
],
|
||||
"content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'"
|
||||
}
|
||||
62
CocosCreatorInspector/src/popup/App.vue
Normal file
62
CocosCreatorInspector/src/popup/App.vue
Normal file
@@ -0,0 +1,62 @@
|
||||
<template>
|
||||
<div id="app" style="width: auto;">
|
||||
<h3>{{title}}</h3>
|
||||
<div style="text-align: center;width: 100%; color: #6d6d6d;">
|
||||
<span>支持作者</span>
|
||||
</div>
|
||||
<br/>
|
||||
<div style="margin:0 auto;width:100%;">
|
||||
<div style="width: 200px; margin: 0 auto;" v-show="isShowMoneyPng">
|
||||
<img style="width: 100%;height: auto;" src="static/images/money.jpg">
|
||||
</div>
|
||||
</div>
|
||||
<br/>
|
||||
<div id="foot" style="height: 30px;">
|
||||
<span style="font-size: 14px;float: left;text-align: center;line-height: 30px;color: #6d6d6d;">联系方式:</span>
|
||||
<div style="height: 100%;float: right;margin-right: 10px;">
|
||||
<a href="https://github.com/tidys/CocosCreatorPlugins/tree/master/CocosCreatorInspector" target="_blank">
|
||||
<img src="static/images/github.png" style="height: 100%;">
|
||||
</a>
|
||||
</div>
|
||||
<div style="height: 100%;float: right;margin-right: 10px;">
|
||||
<a href="https://jq.qq.com/?_wv=1027&k=5SdPdy2" target="_blank">
|
||||
<img src="static/images/qq.png" style="height: 100%;">
|
||||
</a>
|
||||
</div>
|
||||
<div style="height: 100%;float: right;margin-right: 10px;">
|
||||
<a href="http://forum.cocos.com/t/chrome-creator/55669" target="_blank">
|
||||
<img src="static/images/tiezi.png" style="height: 100%;">
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Vue from 'vue'
|
||||
import 'vue-awesome/icons/flag'
|
||||
import 'vue-awesome/icons'
|
||||
import Icon from 'vue-awesome/components/Icon'
|
||||
|
||||
Vue.component('icon', Icon);
|
||||
|
||||
export default {
|
||||
name: "app",
|
||||
data() {
|
||||
return {
|
||||
title: "cc-inspector",
|
||||
isShowMoneyPng: true,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onBtnClickGitHub() {
|
||||
console.log("onBtnClickGitHub");
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
10
CocosCreatorInspector/src/popup/main.js
Normal file
10
CocosCreatorInspector/src/popup/main.js
Normal file
@@ -0,0 +1,10 @@
|
||||
import Vue from 'vue';
|
||||
import ElementUI from 'element-ui'
|
||||
import 'element-ui/lib/theme-chalk/index.css'
|
||||
import App from './App.vue';
|
||||
Vue.use(ElementUI);
|
||||
|
||||
new Vue({
|
||||
el: '#app',
|
||||
render: h => h(App)
|
||||
});
|
||||
11
CocosCreatorInspector/src/popup/popup.html
Normal file
11
CocosCreatorInspector/src/popup/popup.html
Normal file
@@ -0,0 +1,11 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>vue</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app">
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user