更新popup options

electron-app/inject.js

@@ -0,0 +1,18 @@
+let canvasArray = document.getElementsByTagName("canvas");
+if (canvasArray.length > 0) {
+  let canvas = canvasArray[0];
+  if (canvas) {
+    canvas.style.display = "none";
+    const {children} = canvas.parentNode;
+    let len = children.length;
+    let div = children[1];
+    if(div){
+      div.style.display='none';
+      console.log('hide div')
+    }
+    // console.log(div);
+  }
+}
+
+let div=document.getElementById('myDiv')
+console.log(div)

source/src/inject/index.ts

@@ -255,7 +255,6 @@ class CCInspector {
       skew: ["skewX", "skewY"],
       position: ["x", "y", "z"], // position比较特殊，过来的key就是position也需要能处理
       scale: ["scaleX", "scaleY", "scaleZ"],
-      designResolution: ["width", "height"], // 这个比较特殊，在key下边，其他的都不是在key下
     };
     for (let pairPropertyKey in pairProperty) {
       if (pairProperty.hasOwnProperty(pairPropertyKey)) {
@@ -537,6 +536,7 @@ class CCInspector {
         } else if (pairValues.length === 3) {
           info = new Vec3Data();
         }
+        // todo path
         pairValues.forEach((el: string) => {
           if (el in node) {
             let propertyPath = [node.uuid, el];

source/src/options/index.vue

@@ -1,26 +1,39 @@
 <template>
-  <div>
-    <el-button @click="onClickTest">1111</el-button>
-    <HelloWorld msg="fsf"></HelloWorld>
+  <div id="options">
+    <div class="text">
+      哈哈，让你发现了
+    </div>
+    <div class="text">
+      不过这里什么都没有
+    </div>
   </div>
 </template>
 
 <script lang="ts">
 import {Component, Vue} from "vue-property-decorator";
-import HelloWorld from "@/popup/HelloWorld.vue";
-
+// @ts-ignore
+import PuzzleBoard from 'vue-8-puzzle';
 @Component({
-  components: {HelloWorld},
+  components: {PuzzleBoard},
 })
 export default class Index extends Vue {
   name: string = "index";
-
-  onClickTest() {
-    console.log(1);
-  }
 }
 </script>
 
-<style scoped>
+<style scoped lang="less">
+#options {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
 
+  .text {
+    user-select: none;
+    font-size: 40px;
+  }
+
+}
 </style>

source/src/popup/HelloWorld.vue

@@ -1,23 +0,0 @@
-<template>
-  <div class="hello">
-    <h1>{{ msg }}</h1>
-  </div>
-</template>
-
-<script lang="ts">
-import {Component, Prop, Vue} from "vue-property-decorator";
-
-@Component
-export default class HelloWorld extends Vue {
-  @Prop({default: ""})
-  msg: string | undefined;
-
-  created() {
-    console.log(this.msg)
-  }
-}
-</script>
-
-<style scoped lang="less">
-
-</style>

source/src/popup/index.vue

@@ -1,54 +1,46 @@
 <template>
   <div id="popup">
-    <div style="display: flex;flex-direction: row;align-items: center;">
-      <h3>{{ title }}</h3>
+    <div class="head">
+      <div class="name">{{ title }}</div>
       <div style="flex: 1"></div>
-      <el-button class="el-icon-setting" @click="onClickOptions"></el-button>
-      <el-button @click="onMsgToBg">To-Bg</el-button>
-      <el-button @click="onSendMsg">Msg</el-button>
+      <el-button class="el-icon-setting btn" @click="onClickOptions"></el-button>
     </div>
-    <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="./res/money.jpg">
+
+    <div class="wechat">
+      <div class="money">
+        <img class="png" src="./res/money.png" alt=""/>
+        <div class="tips">请我喝杯奶茶</div>
+      </div>
+      <div class="space"></div>
+      <div class="friends">
+        <img class="png" src="./res/friend.png" alt=""/>
+        <div class="tips">交个朋友</div>
       </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="./res/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="./res/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="./res/tiezi.png" style="height: 100%;">
-        </a>
-      </div>
+
+
+    <div class="foot">
+      <div class="space"></div>
+      <a href="https://tidys.gitee.io/doc/#" target="_blank">
+        <img class="icon" src="./res/tiezi.png" alt="">
+      </a>
+      <a href="https://github.com/tidys/CocosCreatorPlugins/tree/master/CocosCreatorInspector" target="_blank">
+        <img class="icon" src="./res/github.png" alt="">
+      </a>
+      <a href="https://jq.qq.com/?_wv=1027&k=5SdPdy2" target="_blank">
+        <img class="icon" src="./res/qq.png" alt="">
+      </a>
     </div>
-    <HelloWorld msg="fsfsf"></HelloWorld>
   </div>
 
 </template>
 
 <script lang="ts">
 import {Component, Vue} from "vue-property-decorator";
-import HelloWorld from "./HelloWorld.vue";
-import Manifest from '../manifest.json'
+import Manifest from "../manifest.json"
 
 @Component({
-  components: {
-    HelloWorld,
-  },
+  components: {},
 })
 export default class App extends Vue {
   longConn: chrome.runtime.Port | null = null
@@ -93,24 +85,7 @@ export default class App extends Vue {
     // console.log(this.title);
   }
 
-  onMsgToBg() {
-    // 因为webpack的原因,这种方式可能拿不到里面的function, var
-    // chrome.extension.getBackgroundPage();
 
-    // 发送消息到background.js
-    if (chrome && chrome.runtime) {
-      chrome.runtime.sendMessage("content msg", function (data: any) {
-        console.log(data);
-      });
-    }
-  }
-
-  onSendMsg() {
-    if (this.longConn) {
-      this.longConn.postMessage({send: "hello"});
-
-    }
-  }
 }
 </script>
 
@@ -118,6 +93,65 @@ export default class App extends Vue {
 @import "../index.less";
 
 #popup {
-  width: auto;
+  width: 300px;
+  display: flex;
+  flex-direction: column;
+  padding: 10px;
+
+  .head {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+
+
+    .name {
+      user-select: none;
+      font-size: 18px;
+      font-weight: bold;
+    }
+
+    .btn {
+    }
+  }
+
+  .wechat {
+    margin: 10px 0;
+    display: flex;
+    flex-direction: row;
+
+    .space {
+      flex: 1;
+    }
+
+    .png {
+      width: auto;
+      height: 130px;
+    }
+
+    .tips {
+      font-size: 15px;
+      user-select: none;
+      text-align: center;
+      width: 100%;
+      color: #6d6d6d
+    }
+  }
+
+  .foot {
+    display: flex;
+    flex-direction: row;
+    height: 30px;
+    align-items: center;
+
+    .space {
+      flex: 1;
+    }
+
+    .icon {
+      margin: 0 3px;
+      width: auto;
+      height: 20px;
+    }
+  }
 }
 </style>