调整

source/src/content.ts

@@ -0,0 +1 @@
+console.log('11')

source/src/manifest/index.js

@@ -5,7 +5,7 @@ module.exports = {
   browser_action: {
     default_title: "CC-Inspector",
     default_icon: "icon/icon48.png",
-    default_popup: "pages/popup.html"
+    default_popup: "popup.html"
   },
   icons: {
     48: "icon/icon48.png"
@@ -14,20 +14,20 @@ module.exports = {
   content_scripts: [
     {
       matches: ["<all_urls>"],
-      js: ["js/content.js"],
+      js: ["content.common.js"],
       run_at: "document_end",
       all_frames: true
     }
   ],
   background: {
-    scripts: ["js/background.js"],
+    scripts: ["background.js"],
     persistent: false,// 需要时开启
   },
   // optionsV1的写法
-  options_page: "pages/options.html",
+  options_page: "options.html",
   // optionsV2的写法
   options_ui: {
-    page: "pages/options.html",
+    page: "options.html",
     // 添加一些默认的样式，推荐使用
     chrome_style: true,
   },

source/src/options/index.ts

@@ -0,0 +1,10 @@
+import Vue from "vue";
+import App from "./index.vue";
+import "element-ui/lib/theme-chalk/index.css"
+import ElementUI from "element-ui";
+
+Vue.config.productionTip = false;
+Vue.use(ElementUI, {size: "mini"});
+new Vue({
+  render: (h) => h(App),
+}).$mount("#app");

source/src/options/index.vue

@@ -0,0 +1,22 @@
+<template>
+  <el-button @click="onClickTest">1111</el-button>
+</template>
+
+<script lang="ts">
+import {Component, Vue} from "vue-property-decorator";
+
+@Component({
+  components: {},
+})
+export default class Index extends Vue {
+  name: string = "index";
+
+  onClickTest() {
+    console.log(1);
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

source/src/popup/HelloWorld.vue

@@ -0,0 +1,17 @@
+<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 {
+}
+</script>
+
+<style scoped lang="less">
+
+</style>

source/src/popup/index.ts

@@ -0,0 +1,9 @@
+import Vue from "vue";
+import App from "./index.vue";
+import ElementUI from "element-ui";
+
+Vue.config.productionTip = false;
+Vue.use(ElementUI, {size: "mini"});
+new Vue({
+  render: (h) => h(App),
+}).$mount("#app");

source/src/popup/index.vue

@@ -1,11 +1,11 @@
 <template>
   <div id="popup">
     <div style="display: flex;flex-direction: row;align-items: center;">
-      <h3 v-show="false"> title </h3>
+      <h3 v-show="false">title</h3>
       <div style="flex: 1"></div>
-      <el-button size="mini" @click="onClickOptions">设置</el-button>
+      <el-button @click="onClickOptions">设置</el-button>
-      <el-button size="mini" @click="onMsgToBg">To-Bg</el-button>
+      <el-button @click="onMsgToBg">To-Bg</el-button>
-      <el-button size="mini" @click="onSendMsg">Msg</el-button>
+      <el-button @click="onSendMsg">Msg</el-button>
     </div>
     <div style="text-align: center;width: 100%; color: #6d6d6d;">
       <span>支持作者</span>
@@ -21,40 +21,35 @@
       <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 v-show="false" src="./res/github.png" style="height: 100%;">
+          <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 v-show="false" src="./res/qq.png" style="height: 100%;">
+          <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 v-show="false" src="./res/tiezi.png" style="height: 100%;">
+          <img src="./res/tiezi.png" style="height: 100%;">
         </a>
       </div>
     </div>
   </div>
+
 </template>
 
 <script lang="ts">
-import Vue from 'vue'
+import {Component, Vue} from "vue-property-decorator";
-import 'vue-awesome/icons/flag'
+import HelloWorld from "./HelloWorld.vue";
-import 'vue-awesome/icons'
-import Icon from 'vue-awesome/components/Icon'
-import {Component} from 'vue-property-decorator'
-import chrome from 'chrome'
-import {Button} from 'element-ui'
 
 @Component({
   components: {
-    Icon,
+    HelloWorld,
-    Button,
+  },
-  }
 })
-export default class Index extends Vue {
+export default class App extends Vue {
-  longConn: chrome.runtime.Port = false
+  longConn: chrome.runtime.Port | null = null
 
   data() {
     return {
@@ -72,20 +67,24 @@ export default class Index extends Vue {
   }
 
   onClickOptions() {
-    chrome.tabs.create({url: 'pages/options.html'})
+    if (chrome && chrome.tabs) {
+      chrome.tabs.create({url: "pages/options.html"})
+    }
   }
 
   _initLongConn() {
     if (!this.longConn) {
       console.log("[popup] 初始化长连接");
+      if (chrome && chrome.runtime) {
         this.longConn = chrome.runtime.connect({name: "popup"});
-      this.longConn.onMessage.addListener(function (data, sender) {
+        this.longConn.onMessage.addListener((data: any, sender: any) => {
           this._onLongConnMsg(data, sender);
-      }.bind(this))
+        })
+      }
     }
   }
 
-  _onLongConnMsg(data, sender) {
+  _onLongConnMsg(data: string, sender: any) {
     // console.log(this.title);
   }
 
@@ -94,24 +93,25 @@ export default class Index extends Vue {
     // chrome.extension.getBackgroundPage();
 
     // 发送消息到background.js
-    chrome.runtime.sendMessage('content msg', function (data) {
+    if (chrome && chrome.runtime) {
+      chrome.runtime.sendMessage("content msg", function (data: any) {
         console.log(data);
       });
     }
+  }
 
   onSendMsg() {
     if (this.longConn) {
       this.longConn.postMessage({send: "hello"});
       //@import "../index.less";
-      //#popup{
+
-      //  width: auto;
-      //}
     }
   }
 }
 </script>
 
-
 <style scoped lang="less">
-
+#popup {
+  width: auto;
+}
 </style>

source/src/shims-chrome.d.ts

@@ -0,0 +1,4 @@
+declare module "*.chrome" {
+  import chrome from "chrome";
+  export default chrome;
+}

source/src/shims-tsx.d.ts

@@ -1,4 +1,4 @@
-import Vue, { VNode } from 'vue';
+import Vue, { VNode } from "vue";
 
 declare global {
   namespace JSX {

source/src/shims-vue.d.ts

@@ -0,0 +1,4 @@
+declare module "*.vue" {
+  import Vue from "vue";
+  export default Vue;
+}

source/src/test/index.ts

@@ -0,0 +1,8 @@
+import Vue from "vue";
+import App from "./index.vue";
+
+Vue.config.productionTip = false;
+
+new Vue({
+  render: (h) => h(App),
+}).$mount("#app");

source/src/test/index.vue

@@ -0,0 +1,19 @@
+<template>
+  <div id="app">test</div>
+</template>
+
+<script lang="ts">
+import {Component, Vue} from "vue-property-decorator";
+
+@Component({
+  components: {},
+})
+export default class Index extends Vue {
+}
+</script>
+
+<style>
+#app {
+
+}
+</style>