cc-inspector-chrome/CocosCreatorInspector/src/popup/index.vue

<template>
  <div id="popup">
    <div style="display: flex;flex-direction: row;align-items: center;">
      <h3 v-show="false"> title </h3>
      <div style="flex: 1"></div>
      <el-button size="mini" @click="onClickOptions">设置</el-button>
      <el-button size="mini" @click="onMsgToBg">To-Bg</el-button>
      <el-button size="mini" @click="onSendMsg">Msg</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>
    </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 v-show="false" 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%;">
        </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%;">
        </a>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import 'vue-awesome/icons/flag'
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,
    Button,
  }
})
export default class Index extends Vue {
  longConn: chrome.runtime.Port = false

  // data() {
  //   return {
  //     title: "cc-inspector",
  //     isShowMoneyPng: true,
  //   }
  // }
  //
  // created() {
  //   this._initLongConn();
  // }
  //
  // onBtnClickGitHub() {
  //   console.log("onBtnClickGitHub");
  // }
  //
  // onClickOptions() {
  //   chrome.tabs.create({url: 'pages/options.html'})
  // }
  //
  // _initLongConn() {
  //   if (!this.longConn) {
  //     console.log("[popup] 初始化长连接");
  //     this.longConn = chrome.runtime.connect({name: "popup"});
  //     this.longConn.onMessage.addListener(function (data, sender) {
  //       this._onLongConnMsg(data, sender);
  //     }.bind(this))
  //   }
  // }
  //
  // _onLongConnMsg(data, sender) {
  //   // console.log(this.title);
  // }
  //
  // onMsgToBg() {
  //   // 因为webpack的原因,这种方式可能拿不到里面的function, var
  //   // chrome.extension.getBackgroundPage();
  //
  //   // 发送消息到background.js
  //   chrome.runtime.sendMessage('content msg', function (data) {
  //     console.log(data);
  //   });
  // }
  //
  // onSendMsg() {
  //   if (this.longConn) {
  //     this.longConn.postMessage({send: "hello"});
  //     //@import "../index.less";
  //     //#popup{
  //     //  width: auto;
  //     //}
  //   }
  // }
}
</script>


<style scoped lang="less">

</style>