mirror of
https://github.com/tidys/cc-inspector-chrome
synced 2025-04-15 14:41:05 +00:00
删除
This commit is contained in:
xyf-mac
parent
f61ab28cd2
commit
6a7bf052c4
@ -32,7 +32,6 @@ module.exports = {
|
||||
entry: {
|
||||
// test: resolve('test'),
|
||||
background: resolve('background'),
|
||||
inject: resolve('content/inject'),
|
||||
|
||||
// devInspector: path.resolve(__dirname, './src/dev/devInspector/main.js'),
|
||||
// dev: path.resolve(__dirname, './src/dev/dev.js'),
|
||||
@ -40,7 +39,6 @@ module.exports = {
|
||||
// backgroundScripts: path.resolve(__dirname, './src/dev/backgroundScripts.js'),
|
||||
// contentScripts: path.resolve(__dirname, './src/dev/contentScripts.js'),
|
||||
// util: path.resolve(__dirname, './src/dev/util.js'),
|
||||
// injectScript: path.resolve(__dirname, './src/dev/injectScript.js'),
|
||||
},
|
||||
output: {
|
||||
path: Path.resolve(__dirname, 'build'),
|
||||
@ -62,30 +60,6 @@ module.exports = {
|
||||
outFile: Path.join(__dirname, 'build/manifest.json'),
|
||||
manifest: Path.join(__dirname, 'manifest.js')
|
||||
}),
|
||||
//index.html
|
||||
// new HtmlWebpackPlugin({
|
||||
// template: __dirname + "/src/index/index.html",
|
||||
// filename: 'index.html',
|
||||
// inject: 'body',
|
||||
// chunks: ['index']
|
||||
// }),
|
||||
|
||||
|
||||
//dev.html
|
||||
// new HtmlWebpackPlugin({
|
||||
// template: __dirname + "/src/dev/dev.html",
|
||||
// filename: 'dev.html',
|
||||
// inject: 'body',
|
||||
// chunks: ['dev']
|
||||
// }),
|
||||
|
||||
//devInspector.html
|
||||
// new HtmlWebpackPlugin({
|
||||
// template: __dirname + "/src/dev/devInspector/devInspector.html",
|
||||
// filename: 'devInspector.html',
|
||||
// inject: 'body',
|
||||
// chunks: ['devInspector']
|
||||
// }),
|
||||
|
||||
// 拷贝静态资源(manifest.json)
|
||||
new CopyWebpackPlugin([{
|
||||
|
||||
@ -1,28 +1,26 @@
|
||||
let PluginMsg = require("../core/plugin-msg");
|
||||
// 链接池子
|
||||
let ConnPool = {
|
||||
Devtools: null,
|
||||
DevtoolsPanel: null,
|
||||
Content: null,
|
||||
};
|
||||
import * as PluginMsg from "./core/plugin-msg"
|
||||
|
||||
function shortConnectionLink(request, sender, sendResponse) {
|
||||
let Devtools: chrome.runtime.Port | null = null;
|
||||
let DevtoolsPanel: chrome.runtime.Port | null = null;
|
||||
let Content: chrome.runtime.Port | null = null;
|
||||
|
||||
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
|
||||
ConnPool.Devtools && ConnPool.Devtools.postMessage(request);
|
||||
Devtools && Devtools.postMessage(request);
|
||||
}
|
||||
}
|
||||
|
||||
function longConnectionLink(data, sender) {
|
||||
console.log(`%c[长连接:${sender.name}]\n${JSON.stringify(data)}`, 'background:#aaa;color:#bada55')
|
||||
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) {
|
||||
ConnPool.Content && ConnPool.Content.postMessage({msg: PluginMsg.Msg.UrlChange, data: {}})
|
||||
Content && Content.postMessage({msg: PluginMsg.Msg.UrlChange, data: {}})
|
||||
}
|
||||
}
|
||||
// chrome.tabs.executeScript(message.tabId, {code: message.content});
|
||||
@ -31,27 +29,27 @@ function longConnectionLink(data, sender) {
|
||||
|
||||
// 长连接
|
||||
chrome.runtime.onConnect.addListener(function (port) {
|
||||
console.log(`%c[长连接:${port.name}] 建立链接!`, 'background:#aaa;color:#ff0000');
|
||||
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');
|
||||
console.log(`%c[长连接:${port.name}] 断开链接!`, "background:#aaa;color:#00ff00");
|
||||
port.onMessage.removeListener(longConnectionLink);
|
||||
if (port.name === PluginMsg.Page.Devtools) {
|
||||
ConnPool.Devtools = null;
|
||||
Devtools = null;
|
||||
} else if (port.name === PluginMsg.Page.Content) {
|
||||
ConnPool.Content = null;
|
||||
Content = null;
|
||||
} else if (port.name === PluginMsg.Page.DevToolsPanel) {
|
||||
ConnPool.DevtoolsPanel = null;
|
||||
DevtoolsPanel = null;
|
||||
}
|
||||
});
|
||||
|
||||
// 缓存
|
||||
if (port.name === PluginMsg.Page.Devtools) {
|
||||
ConnPool.Devtools = port;
|
||||
Devtools = port;
|
||||
} else if (port.name === PluginMsg.Page.Content) {
|
||||
ConnPool.Content = port;
|
||||
Content = port;
|
||||
} else if (port.name === PluginMsg.Page.DevToolsPanel) {
|
||||
ConnPool.DevtoolsPanel = port;
|
||||
DevtoolsPanel = port;
|
||||
}
|
||||
});
|
||||
|
||||
@ -62,7 +60,10 @@ chrome.runtime.onMessage.addListener(shortConnectionLink);
|
||||
chrome.tabs.onUpdated.addListener(function (tabId, changeInfo, tab) {
|
||||
if (changeInfo.status === "complete") {
|
||||
// 加载新的url
|
||||
ConnPool.Content.postMessage({msg: PluginMsg.Msg.UrlChange, data: {url: tab.favIconUrl}});
|
||||
if (Content) {
|
||||
let data = {msg: PluginMsg.Msg.UrlChange, data: {url: tab.favIconUrl}}
|
||||
Content.postMessage(data);
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
@ -74,7 +75,7 @@ function createPluginMenus() {
|
||||
title: "测试右键菜单",
|
||||
parentId: parent,
|
||||
// 上下文环境，可选：["all", "page", "frame", "selection", "link", "editable", "image", "video", "audio"]，默认page
|
||||
contexts: ['page'],
|
||||
contexts: ["page"],
|
||||
});
|
||||
chrome.contextMenus.create({
|
||||
id: "notify",
|
||||
@ -84,9 +85,9 @@ function createPluginMenus() {
|
||||
|
||||
chrome.contextMenus.onClicked.addListener(function (info, tab) {
|
||||
if (info.menuItemId === "test") {
|
||||
alert('您点击了右键菜单！');
|
||||
alert("您点击了右键菜单！");
|
||||
} else if (info.menuItemId === "notify") {
|
||||
chrome.notifications.create(null, {
|
||||
chrome.notifications.create("null", {
|
||||
type: "basic",
|
||||
iconUrl: "icon/icon48.png",
|
||||
title: "通知",
|
||||
|
||||
@ -1,17 +0,0 @@
|
||||
module.exports = {
|
||||
Page: {
|
||||
Inject: "inject.js",
|
||||
Devtools: "devtools.js",
|
||||
DevToolsPanel:"DevToolsPanel",
|
||||
Content: "content.js",
|
||||
Popup: "popup.js",
|
||||
Options: "options.js",
|
||||
},
|
||||
Msg: {
|
||||
NodeInfo: "node_info",// 具体的节点信息
|
||||
ListInfo: "list_info",// 节点树信息
|
||||
Support: "game_support",// 游戏支持信息
|
||||
MemoryInfo:"memory_info",//
|
||||
UrlChange:"url_change",
|
||||
}
|
||||
}
|
||||
15
source/src/core/plugin-msg.ts
Normal file
15
source/src/core/plugin-msg.ts
Normal file
@ -0,0 +1,15 @@
|
||||
export const Page = {
|
||||
Inject: "inject.js",
|
||||
Devtools: "devtools.js",
|
||||
DevToolsPanel: "DevToolsPanel",
|
||||
Content: "content.js",
|
||||
Popup: "popup.js",
|
||||
Options: "options.js",
|
||||
}
|
||||
export const Msg = {
|
||||
NodeInfo: "node_info",// 具体的节点信息
|
||||
ListInfo: "list_info",// 节点树信息
|
||||
Support: "game_support",// 游戏支持信息
|
||||
MemoryInfo: "memory_info",//
|
||||
UrlChange: "url_change",
|
||||
}
|
||||
@ -7,35 +7,33 @@
|
||||
</div>
|
||||
<div v-show="isShowComp">
|
||||
<ui-prop :name="index" track-by="$index" v-for="(comp,index) in components" :key="index">
|
||||
<span>{{comp.type}}</span>
|
||||
<span>{{ comp.type }}</span>
|
||||
</ui-prop>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<script lang="ts">
|
||||
import Vue from "vue"
|
||||
import {Component, Prop} from "vue-property-decorator";
|
||||
|
||||
export default {
|
||||
name: "",
|
||||
data() {
|
||||
return {
|
||||
isShowComp: true,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onClickComp() {
|
||||
this.isShowComp = !this.isShowComp;
|
||||
}
|
||||
},
|
||||
props: [
|
||||
'components'
|
||||
]
|
||||
@Component({})
|
||||
export default class ComponentsProperty extends Vue {
|
||||
name: string = "";
|
||||
isShowComp: boolean = true;
|
||||
|
||||
onClickComp() {
|
||||
this.isShowComp = !this.isShowComp;
|
||||
}
|
||||
|
||||
@Prop()
|
||||
components = ""
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
span {
|
||||
color: #fd942b;
|
||||
}
|
||||
span {
|
||||
color: #fd942b;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -2,10 +2,10 @@
|
||||
<div id="app">
|
||||
<div>
|
||||
<ui-prop name="uuid">
|
||||
<span> {{itemData.uuid}}</span>
|
||||
<span> {{ itemData.uuid }}</span>
|
||||
</ui-prop>
|
||||
<ui-prop name="name">
|
||||
<span> {{itemData.name}}</span>
|
||||
<span> {{ itemData.name }}</span>
|
||||
</ui-prop>
|
||||
<!--坐标-->
|
||||
<ui-prop name="Position">
|
||||
@ -33,7 +33,7 @@
|
||||
<!--旋转-->
|
||||
<!--rotationX, rotationY暂时舍弃显示-->
|
||||
<ui-prop name="Rotation">
|
||||
<span> {{itemData.rotation}}</span>
|
||||
<span> {{ itemData.rotation }}</span>
|
||||
<!--<input class="myInput"-->
|
||||
<!--@change="changeRotation"-->
|
||||
<!--placeholder="itemData.rotation"-->
|
||||
@ -44,10 +44,10 @@
|
||||
<ui-prop name="Scale">
|
||||
<div style="float: left;width: 100%;">
|
||||
<ui-prop name="X" style="width: 50%;float: left;">
|
||||
<span>{{itemData.scaleX}}</span>
|
||||
<span>{{ itemData.scaleX }}</span>
|
||||
</ui-prop>
|
||||
<ui-prop name="Y" style="width: 50%;float:left;">
|
||||
<span>{{itemData.scaleY}}</span>
|
||||
<span>{{ itemData.scaleY }}</span>
|
||||
</ui-prop>
|
||||
</div>
|
||||
</ui-prop>
|
||||
@ -55,10 +55,10 @@
|
||||
<ui-prop name="Anchor">
|
||||
<div style="float: left;width: 100%;">
|
||||
<ui-prop name="X" style="width: 50%;float: left;">
|
||||
<span>{{itemData.anchorX}}</span>
|
||||
<span>{{ itemData.anchorX }}</span>
|
||||
</ui-prop>
|
||||
<ui-prop name="Y" style="width: 50%;float:left;">
|
||||
<span>{{itemData.anchorY}}</span>
|
||||
<span>{{ itemData.anchorY }}</span>
|
||||
</ui-prop>
|
||||
</div>
|
||||
</ui-prop>
|
||||
@ -88,25 +88,25 @@
|
||||
</ui-prop>
|
||||
<!--透明度-->
|
||||
<ui-prop name="Opacity">
|
||||
<span>{{itemData.opacity}}</span>
|
||||
<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>
|
||||
<span>{{ itemData.skewX }}</span>
|
||||
</ui-prop>
|
||||
<ui-prop name="Y" style="width: 50%;float:left;">
|
||||
<span>{{itemData.skewY}}</span>
|
||||
<span>{{ itemData.skewY }}</span>
|
||||
</ui-prop>
|
||||
</div>
|
||||
</ui-prop>
|
||||
</div>
|
||||
<ui-prop name="zIndex">
|
||||
<span>{{itemData.zIndex}}</span>
|
||||
<span>{{ itemData.zIndex }}</span>
|
||||
</ui-prop>
|
||||
<ui-prop name="childrenCount">
|
||||
<span>{{itemData.childrenCount}}</span>
|
||||
<span>{{ itemData.childrenCount }}</span>
|
||||
</ui-prop>
|
||||
<!--节点状态-->
|
||||
<ui-prop name="active">
|
||||
@ -132,148 +132,173 @@
|
||||
<div style="display: flex;flex-direction: row;justify-content: center;">
|
||||
<div style="display: flex;flex:1;">
|
||||
|
||||
<el-color-picker v-model="itemData.color" size="mini" style="flex:1;margin: 0;" @change="changeColor"></el-color-picker>
|
||||
<el-color-picker v-model="itemData.color" size="mini" style="flex:1;margin: 0;"
|
||||
@change="changeColor"></el-color-picker>
|
||||
</div>
|
||||
<span style="width: 60px;">{{itemData.color}}</span>
|
||||
<span style="width: 60px;">{{ itemData.color }}</span>
|
||||
|
||||
</div>
|
||||
</ui-prop>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<script lang="ts">
|
||||
import Vue from "vue"
|
||||
import {Component, Prop} from "vue-property-decorator"
|
||||
import UiProp from './ui-prop'
|
||||
@Component({
|
||||
'ui-prop':UiProp
|
||||
})
|
||||
export default class NodeBaseProperty extends Vue {
|
||||
name: string = "app"
|
||||
|
||||
@Prop()
|
||||
itemData: any = null;
|
||||
|
||||
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.ccinspector.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.ccinspector.pluginSetNodeSize(" +
|
||||
"'" + this.itemData.uuid + "'," +
|
||||
"'" + this.itemData.width + "'," +
|
||||
"'" + this.itemData.height + "'" +
|
||||
")");
|
||||
this._freshNode();
|
||||
},
|
||||
changeRotation() {
|
||||
console.log("change rotation:" + this.itemData.rotation);
|
||||
this._evalCode(
|
||||
"window.ccinspector.pluginSetNodeRotation('" +
|
||||
this.itemData.uuid + "','" +
|
||||
this.itemData.rotation + "')");
|
||||
this._freshNode();
|
||||
},
|
||||
changeColor() {
|
||||
let color = this.itemData.color;
|
||||
console.log("color:" + color);
|
||||
this._evalCode(
|
||||
"window.ccinspector.pluginSetNodeColor('" +
|
||||
this.itemData.uuid + "','" +
|
||||
color + "');");
|
||||
this._freshNode();
|
||||
},
|
||||
onBtnClickNodeHide() {
|
||||
let uuid = this.itemData.uuid;
|
||||
if (uuid !== undefined) {
|
||||
let code = "window.ccinspector.pluginSetNodeActive('" + uuid + "', 0);";
|
||||
this._evalCode(code);
|
||||
this._freshNode();
|
||||
}
|
||||
},
|
||||
onBtnClickNodeShow() {
|
||||
let uuid = this.itemData.uuid;
|
||||
if (uuid !== undefined) {
|
||||
let code = "window.ccinspector.pluginSetNodeActive('" + uuid + "', 1);";
|
||||
this._evalCode(code);
|
||||
this._freshNode();
|
||||
}
|
||||
},
|
||||
_freshNode() {
|
||||
let uuid = this.itemData.uuid;
|
||||
let code2 = "window.ccinspector.getNodeInfo('" + uuid + "')";
|
||||
this._evalCode(code2);
|
||||
},
|
||||
_evalCode(code) {
|
||||
if (chrome && chrome.devtools) {
|
||||
chrome.devtools.inspectedWindow.eval(code);
|
||||
} else {
|
||||
console.log(code);
|
||||
}
|
||||
},
|
||||
},
|
||||
props: [
|
||||
'itemData'
|
||||
]
|
||||
changeSizeActionWidth(step:number) {
|
||||
let w = parseFloat(this.itemData.width);
|
||||
this.itemData.width = w + step;
|
||||
this.changeSize();
|
||||
}
|
||||
|
||||
|
||||
changeSizeActionHeight(step:number) {
|
||||
let h = parseFloat(this.itemData.height);
|
||||
this.itemData.height = h + step;
|
||||
this.changeSize();
|
||||
}
|
||||
|
||||
|
||||
changePositionActionX(step:number) {
|
||||
let x = parseFloat(this.itemData.x);
|
||||
this.itemData.x = x + step;
|
||||
this.changePosition();
|
||||
}
|
||||
|
||||
|
||||
changePositionActionY(step:number) {
|
||||
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.ccinspector.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.ccinspector.pluginSetNodeSize(" +
|
||||
"'" + this.itemData.uuid + "'," +
|
||||
"'" + this.itemData.width + "'," +
|
||||
"'" + this.itemData.height + "'" +
|
||||
")");
|
||||
this._freshNode();
|
||||
}
|
||||
|
||||
|
||||
changeRotation() {
|
||||
console.log("change rotation:" + this.itemData.rotation);
|
||||
this._evalCode(
|
||||
"window.ccinspector.pluginSetNodeRotation('" +
|
||||
this.itemData.uuid + "','" +
|
||||
this.itemData.rotation + "')");
|
||||
this._freshNode();
|
||||
}
|
||||
|
||||
|
||||
changeColor() {
|
||||
let color = this.itemData.color;
|
||||
console.log("color:" + color);
|
||||
this._evalCode(
|
||||
"window.ccinspector.pluginSetNodeColor('" +
|
||||
this.itemData.uuid + "','" +
|
||||
color + "');");
|
||||
this._freshNode();
|
||||
}
|
||||
|
||||
|
||||
onBtnClickNodeHide() {
|
||||
let uuid = this.itemData.uuid;
|
||||
if (uuid !== undefined) {
|
||||
let code = "window.ccinspector.pluginSetNodeActive('" + uuid + "', 0);";
|
||||
this._evalCode(code);
|
||||
this._freshNode();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
onBtnClickNodeShow() {
|
||||
let uuid = this.itemData.uuid;
|
||||
if (uuid !== undefined) {
|
||||
let code = "window.ccinspector.pluginSetNodeActive('" + uuid + "', 1);";
|
||||
this._evalCode(code);
|
||||
this._freshNode();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
_freshNode() {
|
||||
let uuid = this.itemData.uuid;
|
||||
let code2 = "window.ccinspector.getNodeInfo('" + uuid + "')";
|
||||
this._evalCode(code2);
|
||||
}
|
||||
|
||||
|
||||
_evalCode(code:string) {
|
||||
if (chrome && chrome.devtools) {
|
||||
chrome.devtools.inspectedWindow.eval(code);
|
||||
} else {
|
||||
console.log(code);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
span {
|
||||
color: #fd942b;
|
||||
}
|
||||
span {
|
||||
color: #fd942b;
|
||||
}
|
||||
|
||||
.btnSize {
|
||||
padding: 5px 10px;
|
||||
}
|
||||
.btnSize {
|
||||
padding: 5px 10px;
|
||||
}
|
||||
|
||||
.comp {
|
||||
border: 2px solid #a1a1a1;
|
||||
padding: 5px 5px;
|
||||
background: #dddddd;
|
||||
width: 100%;
|
||||
border-radius: 5px;
|
||||
-moz-border-radius: 5px; /* 老的 Firefox */
|
||||
}
|
||||
.comp {
|
||||
border: 2px solid #a1a1a1;
|
||||
padding: 5px 5px;
|
||||
background: #dddddd;
|
||||
width: 100%;
|
||||
border-radius: 5px;
|
||||
-moz-border-radius: 5px; /* 老的 Firefox */
|
||||
}
|
||||
|
||||
.float-left {
|
||||
float: left;
|
||||
}
|
||||
.float-left {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.compBorder {
|
||||
border: 1px solid #b3b3b3;
|
||||
background: #ffffff
|
||||
}
|
||||
.compBorder {
|
||||
border: 1px solid #b3b3b3;
|
||||
background: #ffffff
|
||||
}
|
||||
|
||||
.myInput {
|
||||
width: 90%;
|
||||
border-radius: 5px;
|
||||
color: #fd942b;
|
||||
}
|
||||
.myInput {
|
||||
width: 90%;
|
||||
border-radius: 5px;
|
||||
color: #fd942b;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -17,44 +17,48 @@
|
||||
</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
|
||||
if (x > this.clientX) {
|
||||
calcStep = Math.abs(calcStep);
|
||||
} else {
|
||||
calcStep = -Math.abs(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 lang="ts">
|
||||
import Vue from "vue"
|
||||
import {Component, Prop} from "vue-property-decorator"
|
||||
|
||||
@Component({})
|
||||
export default class UiProp extends Vue {
|
||||
@Prop()
|
||||
name = null;
|
||||
|
||||
@Prop()
|
||||
step = null;
|
||||
clientX: number = 0;
|
||||
|
||||
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
|
||||
if (x > this.clientX) {
|
||||
calcStep = Math.abs(calcStep);
|
||||
} else {
|
||||
calcStep = -Math.abs(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);
|
||||
}
|
||||
|
||||
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -1,22 +1,10 @@
|
||||
import Vue from 'vue';
|
||||
import ElementUI from 'element-ui'
|
||||
import 'element-ui/lib/theme-chalk/index.css'
|
||||
import index from './index.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'
|
||||
|
||||
|
||||
Vue.component('ui-prop', ui_prop);
|
||||
Vue.component('NodeBaseProperty', NodeBaseProperty);
|
||||
Vue.component('SceneProperty', SceneProperty);
|
||||
Vue.component('ComponentsProperty', ComponentsProperty);
|
||||
Vue.component('ColorPicker', ColorPicker);
|
||||
import Vue from "vue";
|
||||
import ElementUI from "element-ui"
|
||||
import "element-ui/lib/theme-chalk/index.css"
|
||||
import index from "./index.vue";
|
||||
|
||||
Vue.use(ElementUI);
|
||||
new Vue({
|
||||
el: '#app',
|
||||
el: "#app",
|
||||
render: h => h(index)
|
||||
});
|
||||
|
||||
@ -1,12 +1,12 @@
|
||||
let index = 0;
|
||||
setInterval(function () {
|
||||
setInterval(() => {
|
||||
let msg = "util: " + index++;
|
||||
// chrome.extension.sendMessage(msg;
|
||||
if (typeof aa !== undefined) {
|
||||
msg = aa;
|
||||
}
|
||||
window.postMessage({type: 1, msg: msg}, '*');
|
||||
}.bind(this), 2000);
|
||||
window.postMessage({type: 1, msg: msg}, "*");
|
||||
}, 2000);
|
||||
|
||||
|
||||
|
||||
|
||||
@ -14,7 +14,7 @@ module.exports = {
|
||||
content_scripts: [
|
||||
{
|
||||
matches: ["<all_urls>"],
|
||||
js: ["content.common.js"],
|
||||
js: ["content.js"],
|
||||
run_at: "document_end",
|
||||
all_frames: true
|
||||
}
|
||||
|
||||
@ -17,7 +17,8 @@ module.exports = {
|
||||
configureWebpack: {
|
||||
entry: {
|
||||
content: Path.join(__dirname, "src/content.ts"),
|
||||
options: Path.join(__dirname, "src/options.ts"),
|
||||
background: Path.join(__dirname, "src/background.ts"),
|
||||
inject: Path.join(__dirname, "src/inject.js"),
|
||||
},
|
||||
output: {
|
||||
filename: "js/[name].js?t=[hash]"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user