调整

2025-10-22 13:25:24 +00:00 · 2021-04-02 21:50:55 +08:00
parent 0a4c732112
commit 6a957c34a1
36 changed files with 133 additions and 39 deletions
--- a/source/src/assets/logo.png
+++ b/source/src/assets/logo.png
--- a/source/src/background.ts
+++ b/source/src/background.ts
@@ -0,0 +1,102 @@
+let PluginMsg = require("../core/plugin-msg");
+// 链接池子
+let ConnPool = {
+  Devtools: null,
+  DevtoolsPanel: null,
+  Content: null,
+};
+
+function shortConnectionLink(request, sender, sendResponse) {
+  // 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);
+  }
+}
+
+function longConnectionLink(data, sender) {
+  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: {}})
+    }
+  }
+  // chrome.tabs.executeScript(message.tabId, {code: message.content});
+  // port.postMessage(message);
+}
+
+// 长连接
+chrome.runtime.onConnect.addListener(function (port) {
+  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');
+    port.onMessage.removeListener(longConnectionLink);
+    if (port.name === PluginMsg.Page.Devtools) {
+      ConnPool.Devtools = null;
+    } else if (port.name === PluginMsg.Page.Content) {
+      ConnPool.Content = null;
+    } else if (port.name === PluginMsg.Page.DevToolsPanel) {
+      ConnPool.DevtoolsPanel = null;
+    }
+  });
+
+  // 缓存
+  if (port.name === PluginMsg.Page.Devtools) {
+    ConnPool.Devtools = port;
+  } else if (port.name === PluginMsg.Page.Content) {
+    ConnPool.Content = port;
+  } else if (port.name === PluginMsg.Page.DevToolsPanel) {
+    ConnPool.DevtoolsPanel = port;
+  }
+});
+
+// background.js 更像是一个主进程,负责整个插件的调度,生命周期和chrome保持一致
+// [短连接] 监听来自content.js发来的事件
+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}});
+  }
+})
+
+function createPluginMenus() {
+  // 右键菜单
+  let parent = chrome.contextMenus.create({id: "parent", title: "CC-Inspector"});
+  chrome.contextMenus.create({
+    id: "test",
+    title: "测试右键菜单",
+    parentId: parent,
+    // 上下文环境，可选：["all", "page", "frame", "selection", "link", "editable", "image", "video", "audio"]，默认page
+    contexts: ['page'],
+  });
+  chrome.contextMenus.create({
+    id: "notify",
+    parentId: parent,
+    title: "通知"
+  })
+
+  chrome.contextMenus.onClicked.addListener(function (info, tab) {
+    if (info.menuItemId === "test") {
+      alert('您点击了右键菜单！');
+    } else if (info.menuItemId === "notify") {
+      chrome.notifications.create(null, {
+        type: "basic",
+        iconUrl: "icon/icon48.png",
+        title: "通知",
+        message: "测试通知",
+      })
+    }
+  })
+}
+
+chrome.contextMenus.removeAll(function () {
+  createPluginMenus();
+});
+
--- a/source/src/content.ts
+++ b/source/src/content.ts
@@ -0,0 +1 @@
+console.log('11')
--- a/source/src/core/content.js
+++ b/source/src/core/content.js
@@ -0,0 +1,57 @@
+// 具有操作dom的能力
+// 加载其他脚本
+// content.js 和原始界面共享DOM,但是不共享js,要想访问页面js,只能通过注入的方式
+const PluginMsg = require("../core/plugin-msg");
+
+function injectScriptToPage(url) {
+  let content = chrome.extension.getURL(url)
+  console.log(`[cc-inspector]注入脚本:${content}`);
+  let script = document.createElement('script')
+  script.setAttribute('type', 'text/javascript')
+  script.setAttribute('src', content)
+  script.onload = function () {
+    // 注入脚本执行完后移除掉
+    this.parentNode.removeChild(this);
+  }
+  document.body.appendChild(script)
+}
+
+injectScriptToPage("js/inject.js");
+
+// 和background.js保持长连接通讯
+let conn = chrome.runtime.connect({name: PluginMsg.Page.Content})
+// conn.postMessage('test');
+conn.onMessage.addListener(function (data) {
+  // 将background.js的消息返回到injection.js
+  window.postMessage(data, "*");
+})
+// 接受来自inject.js的消息数据,然后中转到background.js
+window.addEventListener('message', function (event) {
+  let data = event.data;
+  if (data.data.log) {
+  }
+  console.log(`%c[content] ${JSON.stringify(data)}`, "color:#BD4E19");
+  chrome.runtime.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");
+  // 和background.js保持短连接通讯
+  chrome.runtime.sendMessage({
+    msg: PluginMsg.Msg.Support,
+    data: {
+      support: false,
+      msg: "未发现GameCanvas,不支持调试游戏!"
+    }
+  }, function (data) {
+    // console.log(data)
+  });
+}
--- a/source/src/core/event-mgr.js
+++ b/source/src/core/event-mgr.js
@@ -0,0 +1,7 @@
+// const PluginMsg = require("./plugin-msg");
+// module.exports = {
+//   id: "event-mgr",
+//   testInit(name) {
+//     chrome.runtime.connect({name: name})
+//   }
+// }
--- a/source/src/core/event.js
+++ b/source/src/core/event.js
@@ -0,0 +1,3 @@
+module.exports = {
+  id: "event-id",
+}
--- a/source/src/core/page.ejs
+++ b/source/src/core/page.ejs
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html style="width: 100%;height: 100%;">
+<head>
+  <meta charset="utf-8">
+  <title><%= htmlWebpackPlugin.options.title %></title>
+</head>
+<body style="width: 100%;height: 100%;">
+<div id="app" style="width: 100%;height: 100%;"></div>
+</body>
+</html>
--- a/source/src/core/plugin-msg.js
+++ b/source/src/core/plugin-msg.js
@@ -0,0 +1,17 @@
+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",
+  }
+}
--- a/source/src/core/tools.js
+++ b/source/src/core/tools.js
@@ -0,0 +1,17 @@
+const path = require('path')
+const HtmlWebpackPlugin = require('html-webpack-plugin')
+
+module.exports = {
+  htmlPage(title, filename, chunks, template) {
+    return new HtmlWebpackPlugin({
+      title: title,
+      hash: true,
+      cache: true,
+      inject: 'body',
+      filename: './pages/' + filename + '.html',
+      template: template || path.resolve(__dirname, './page.ejs'),
+      appMountId: 'app',
+      chunks: chunks
+    });
+  }
+}
--- a/source/src/devtools/index.js
+++ b/source/src/devtools/index.js
@@ -0,0 +1,28 @@
+const PluginMsg = require("../core/plugin-msg");
+// 对应的是Elements面板的边栏
+chrome.devtools.panels.elements.createSidebarPane('Cocos', function (sidebar) {
+  sidebar.setObject({some_data: "some data to show!"});
+});
+// 创建devtools-panel
+chrome.devtools.panels.create("Cocos", "icon/icon48.png", "pages/devtools_panel.html", function (panel) {
+    console.log("[CC-Inspector] Dev Panel Created!");
+    let conn = chrome.runtime.connect({name: PluginMsg.Page.DevToolsPanel});
+    conn.onMessage.addListener(function (event, sender) {
+      // debugger
+    });
+
+    panel.onShown.addListener(function (window) {
+      console.log("panel show");
+      // debugger
+      conn.postMessage({msg: PluginMsg.Msg.UrlChange, data: {}})
+    });
+    panel.onHidden.addListener(function (window) {
+      console.log("panel hide");
+    });
+    panel.onSearch.addListener(function (action, query) {
+      console.log("panel search!");
+      return false;
+    });
+  }
+);
+
--- a/source/src/devtools/panel/ccType/ComponentsProperty.vue
+++ b/source/src/devtools/panel/ccType/ComponentsProperty.vue
@@ -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>
--- a/source/src/devtools/panel/ccType/NodeBaseProperty.vue
+++ b/source/src/devtools/panel/ccType/NodeBaseProperty.vue
@@ -0,0 +1,279 @@
+<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="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>
+        </div>
+        <span style="width: 60px;">{{itemData.color}}</span>
+
+      </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.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'
+    ]
+  }
+</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>
--- a/source/src/devtools/panel/ccType/SceneProperty.vue
+++ b/source/src/devtools/panel/ccType/SceneProperty.vue
@@ -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>
--- a/source/src/devtools/panel/evalCodeString.js
+++ b/source/src/devtools/panel/evalCodeString.js
@@ -0,0 +1,3 @@
+export default function () {
+  console.log("11")
+}
--- a/source/src/devtools/panel/index.ts
+++ b/source/src/devtools/panel/index.ts
@@ -0,0 +1,22 @@
+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);
+
+Vue.use(ElementUI);
+new Vue({
+  el: '#app',
+  render: h => h(index)
+});
--- a/source/src/devtools/panel/index.vue
+++ b/source/src/devtools/panel/index.vue
@@ -0,0 +1,385 @@
+<template>
+  <div style="display: flex;width: 100%; height: 100%;flex-direction: column">
+    <div v-show="isShowDebug" style="display: flex;flex: 1; flex-direction: column;">
+      <div>
+        <el-button type="success" size="mini" @click="onBtnClickTest1">Test1</el-button>
+        <el-button type="success" size="mini" @click="onBtnClickTest2">Test2</el-button>
+        <el-button type="success" size="mini" @click="onMemoryTest">内存测试</el-button>
+      </div>
+      <div>
+        <span>JS堆栈限制: {{memory.performance.jsHeapSizeLimit}}</span>
+        <span>JS堆栈大小: {{memory.performance.totalJSHeapSize}}</span>
+        <span>JS堆栈使用: {{memory.performance.usedJSHeapSize}}</span>
+      </div>
+      <el-row style="display:flex; flex: 1;">
+        <el-col :span="8" style="display: flex;flex-direction: column;">
+          <div style="display: flex; flex-direction: row; ">
+            <el-switch active-text="实时监控" v-model="watchEveryTime" @change="onChangeWatchState"></el-switch>
+            <el-button type="success" class="el-icon-refresh" size="mini" @click="onBtnClickUpdateTree">刷新</el-button>
+          </div>
+          <div class="grid-content treeList" style="flex: 1;">
+
+            <el-tree :data="treeData"
+                     :props="defaultProps"
+                     :highlight-current="true"
+                     :default-expand-all="false"
+                     :expand-on-click-node="true"
+                     @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" style="display: flex; flex: 1;" class="center-center horizontal">
+      <span style="margin-right: 20px;">未发现cocos creator的游戏!</span>
+      <el-button type="success" class="el-icon-refresh" size="mini" @click="onBtnClickUpdatePage">刷新</el-button>
+    </div>
+  </div>
+</template>
+
+<script>
+  // import injectScript from '../injectScript.js'
+  // import EvalCode from "./evalCodeString.js";
+
+
+  const PluginMsg = require("../../core/plugin-msg");
+
+  export default {
+    data() {
+      return {
+        isShowDebug: false,
+        treeItemData: {},
+        treeData: [],
+        treeDataMap: {},
+        bgConn: null,// 与background.js的链接
+
+        defaultProps: {
+          children: 'children',
+          label: 'name'
+        },
+        watchEveryTime: false,// 实时监控节点树
+        memory: {
+          performance: {},
+          console: {},
+        },
+      }
+    },
+    created() {
+      // chrome.devtools.inspectedWindow.tabId
+      // 接收来自background.js的消息数据
+      this.bgConn = chrome.runtime.connect({name: PluginMsg.Page.Devtools});
+      this.bgConn.onMessage.addListener(function (data, sender) {
+        if (!data) {
+          return;
+        }
+        let eventData = data.data;
+        let eventMsg = data.msg;
+        if (eventMsg === PluginMsg.Msg.ListInfo) {
+          this.isShowDebug = true;
+          this._updateTreeView(eventData);
+        } else if (eventMsg === PluginMsg.Msg.Support) {
+          this.isShowDebug = eventData.support;
+        } else if (eventMsg === PluginMsg.Msg.NodeInfo) {
+          this.isShowDebug = true;
+          this.treeItemData = eventData;
+        } else if (eventMsg === PluginMsg.Msg.MemoryInfo) {
+          this.memory = eventData;
+        }
+      }.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) {
+          this.evalInspectorFunction("getNodeInfo", `"${uuid}"`);
+        }
+      },
+      onChangeWatchState() {
+        if (this.watchEveryTime) {
+          this.timerID = setInterval(function () {
+            this.onBtnClickUpdateTree();
+          }.bind(this), 100);
+        } else {
+          clearInterval(this.timerID);
+        }
+
+      },
+      _updateTreeView(data) {
+        this.treeData = [data.scene];
+        return;
+        // 构建树形数据
+        if (this.treeData.length === 0) {// 第一次赋值
+
+
+        } else {
+
+        }
+
+
+        let treeData = [];
+        debugger
+        let sceneData = data.scene;
+        if (sceneData) {
+          // scene info
+          let dataRoot = {
+            type: sceneData.type, uuid: sceneData.uuid,
+            label: sceneData.name, children: []
+          };
+          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);
+            treeData[0].children.push(sceneItem);
+          }
+        }
+        this.treeData = treeData;
+
+        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 injectScript = "";
+        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;
+      },
+
+      evalInspectorFunction(funcString, parm) {
+        if (funcString || funcString.length > 0) {
+          let injectCode =
+            `if(window.ccinspector){
+              let func = window.ccinspector.${funcString};
+              if(func){
+                console.log("执行${funcString}成功");
+                func.apply(window.ccinspector,[${parm}]);
+              }else{
+                console.log("未发现${funcString}函数");
+              }
+            }else{
+              console.log("可能脚本没有注入");
+            }`;
+          console.log(injectCode);
+          let ret = chrome.devtools.inspectedWindow.eval(injectCode, function (result, info) {
+            if (info && info.isException) {
+              console.log(info.value)
+            }
+
+          });
+          console.log(`ret:${ret}`);
+        } else {
+          console.log("执行失败!");
+        }
+      },
+      onBtnClickUpdateTree() {
+        this.evalInspectorFunction("updateTreeInfo");
+
+      },
+      onBtnClickUpdatePage() {
+        this.evalInspectorFunction("checkIsGamePage", "true");
+        // let code = this._getInjectScriptString();
+        // chrome.devtools.inspectedWindow.eval(code, function () {
+        //   console.log("刷新成功!");
+        // });
+      },
+      onBtnClickTest1() {
+        chrome.devtools.inspectedWindow.eval(`window.ccinspector.testMsg1()`)
+      },
+      _getTime() {
+        return new Date().getTime().toString();
+      },
+      onBtnClickTest2() {
+        // chrome.devtools.inspectedWindow.eval(`window.ccinspector.testMsg2()`)
+
+
+        let newData = [
+          {
+            name: this._getTime(),
+            children: [
+              {
+                name: this._getTime(),
+                children: [
+                  {
+                    name: this._getTime(),
+                  }
+                ]
+              },
+              {
+                name: this._getTime(),
+              }
+            ]
+          }
+
+        ]
+
+        // this.treeData = newData;
+        this._update37(this.treeData[0], newData[0])
+      },
+      _update37(oldTreeNode, newTreeNode) {
+        debugger
+        if (!newTreeNode) {
+          return;
+        }
+        if (!oldTreeNode) {
+          oldTreeNode = {name: "", children: []};
+        }
+        if (oldTreeNode.name !== newTreeNode.name) {
+          oldTreeNode.name = newTreeNode.name;
+        }
+
+        let oldChildren = oldTreeNode.children;
+        let newChildren = newTreeNode.children;
+
+        if (oldChildren.length === 0) {
+          oldChildren = newChildren;
+        } else {
+          // 比较2个数据: treeData, newTreeData
+          // 比较该层级的数据
+          for (let i = 0; i < newChildren.length; i++) {
+            let itemNew = newChildren[i];
+            let itemOld = oldChildren[i];
+            if (itemOld === undefined) {
+              // 老节点中没有
+              oldChildren.push(itemNew);
+            } else if (itemNew.name !== itemOld.name) {
+              // 替换
+              oldChildren.splice(i, 1, itemNew);
+            } else {
+              this._update37(itemOld, itemNew);
+            }
+          }
+          // 多余的删除了
+          if (oldChildren.length > newChildren.length) {
+            oldChildren.splice(newChildren.length, oldChildren.length - newChildren.length);
+          }
+        }
+      },
+      onBtnClickTest3() {
+        // chrome.devtools.inspectedWindow.eval(`window.ccinspector.testMsg3()`)
+        let f = require("../../core/event-mgr");
+        console.log(f.id);
+      },
+      onMemoryTest() {
+        this.evalInspectorFunction("onMemoryInfo");
+      }
+    }
+  }
+</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
+  }
+
+  .layout {
+    display: block;
+  }
+
+  .horizontal {
+    flex-direction: row;
+  }
+
+  .vertical {
+    flex-direction: column;
+  }
+
+  .center-center {
+    align-content: center;
+    align-items: center;
+    justify-content: center;
+  }
+</style>
--- a/source/src/devtools/panel/ui/ui-prop.vue
+++ b/source/src/devtools/panel/ui/ui-prop.vue
@@ -0,0 +1,76 @@
+<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
+      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>
+
+<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>
--- a/source/src/devtools/util.js
+++ b/source/src/devtools/util.js
@@ -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);
+
+
+
--- a/source/src/index.less
+++ b/source/src/index.less
@@ -0,0 +1,16 @@
+.layout {
+  display: flex;
+
+  .vertical {
+    flex-direction: column;
+  }
+
+  .horizontal {
+    flex-direction: row;
+
+  }
+}
+
+.flex1 {
+  flex: 1;
+}
--- a/source/src/inject.ts
+++ b/source/src/inject.ts
@@ -0,0 +1,216 @@
+// eval 注入脚本的代码,变量尽量使用var,后来发现在import之后,let会自动变为var
+const PluginMsg = require("../core/plugin-msg");
+
+let cc_inspector = {
+  inspectorGameMemoryStorage: {},
+  msgType: {
+    nodeInfo: 2,//节点信息
+    nodeListInfo: 1,// 节点列表信息
+    notSupport: 0,// 不支持的游戏
+  },
+  postData: {
+    scene: {
+      name: "",
+      children: []
+    },
+  },
+  init() {
+    setInterval(function () {
+      // this.checkIsGamePage(true);
+      // if (this.stop) {
+      // } else {
+      // }
+    }.bind(this), 1000);
+    // 注册cc_after_render事件
+    window.addEventListener('message', function (event) {
+      if (event.data.msg === PluginMsg.Msg.UrlChange) {
+        this.checkIsGamePage(true);
+      }
+    }.bind(this));
+  },
+  updateTreeInfo() {
+    let isCocosCreatorGame = this.checkIsGamePage(true);
+    if (isCocosCreatorGame) {
+      let scene = cc.director.getScene();
+      if (scene) {
+        this.postData.scene = {
+          type: 1,// 标识类型
+          uuid: scene.uuid,
+          name: scene.name,
+          children: [],
+        };
+        this.inspectorGameMemoryStorage[scene.uuid] = scene;
+        let sceneChildren = scene.getChildren();
+        for (let i = 0; i < sceneChildren.length; i++) {
+          let node = sceneChildren[i];
+          this.getNodeChildren(node, this.postData.scene.children);
+        }
+        // console.log(postData);
+        this.sendMsgToDevTools(PluginMsg.Msg.ListInfo, this.postData);
+      } else {
+        this.postData.scene = null;
+        this.sendMsgToDevTools(PluginMsg.Msg.Support, {support: false, msg: "未发现游戏场景,不支持调试游戏!"});
+      }
+    }
+  },
+  checkIsGamePage(isLog) {
+    // 检测是否包含cc变量
+    let isCocosCreatorGame = true;
+    let msg = "支持调试游戏!";
+    try {
+      cc
+    } catch (e) {
+      isCocosCreatorGame = false;
+      msg = "不支持调试游戏!";
+    }
+    this.sendMsgToDevTools(PluginMsg.Msg.Support, {support: isCocosCreatorGame, msg: msg, log: isLog});
+    return isCocosCreatorGame;
+  },
+  testEval() {
+    console.log("hello devtools eval")
+  },
+  testMsg2() {
+    debugger
+    chrome.runtime.connect({name: "inject"});
+  },
+  testMsg3() {
+    debugger
+    chrome.runtime.sendMessage("ffff");
+  },
+  // 收集组件信息
+  getNodeComponentsInfo(node) {
+    let ret = [];
+    let nodeComp = node._components;
+    for (let i = 0; i < nodeComp.length; i++) {
+      let itemComp = nodeComp[i];
+      this.inspectorGameMemoryStorage[itemComp.uuid] = itemComp;
+      ret.push({
+        uuid: itemComp.uuid,
+        type: itemComp.constructor.name,
+        name: itemComp.name,
+      });
+    }
+    return ret;
+  },
+
+  pluginSetNodeColor(uuid, colorHex) {
+    let node = this.inspectorGameMemoryStorage[uuid];
+    if (node) {
+      node.color = cc.hexToColor(colorHex);
+    }
+  },
+  pluginSetNodeRotation(uuid, rotation) {
+    let node = this.inspectorGameMemoryStorage[uuid];
+    if (node) {
+      node.rotation = rotation;
+    }
+  },
+  pluginSetNodePosition(uuid, x, y) {
+    let node = this.inspectorGameMemoryStorage[uuid];
+    if (node) {
+      node.x = x;
+      node.y = y;
+    }
+  },
+  pluginSetNodeSize(uuid, width, height) {
+    let node = this.inspectorGameMemoryStorage[uuid];
+    if (node) {
+      node.width = width;
+      node.height = height;
+    }
+  },
+  // 设置节点是否可视
+  pluginSetNodeActive(uuid, isActive) {
+    let node = this.inspectorGameMemoryStorage[uuid];
+    if (node) {
+      if (isActive === 1) {
+        node.active = true;
+      } else if (isActive === 0) {
+        node.active = false;
+      }
+    }
+  },
+  // 获取节点信息
+  getNodeInfo(uuid) {
+    let node = this.inspectorGameMemoryStorage[uuid];
+    if (node) {
+      let nodeComp = this.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;
+      }
+      this.sendMsgToDevTools(PluginMsg.Msg.NodeInfo, nodeData);
+    } else {
+      // 未获取到节点数据
+      console.log("未获取到节点数据");
+    }
+  },
+
+  // 收集节点信息
+  getNodeChildren(node, data) {
+    // console.log("nodeName: " + node.name);
+    let nodeData = {
+      uuid: node.uuid,
+      name: node.name,
+      children: [],
+    };
+    this.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);
+      this.getNodeChildren(childItem, nodeData.children);
+    }
+    data.push(nodeData);
+  },
+  sendMsgToDevTools(msg, data) {
+    window.postMessage({msg: msg, data: data}, "*");
+  },
+
+  onMemoryInfo() {
+    this.sendMsgToDevTools(PluginMsg.Msg.MemoryInfo, {
+      performance: {
+        jsHeapSizeLimit: window.performance.memory.jsHeapSizeLimit,
+        totalJSHeapSize: window.performance.memory.totalJSHeapSize,
+        usedJSHeapSize: window.performance.memory.usedJSHeapSize,
+      },
+      console: {
+        jsHeapSizeLimit: console.memory.jsHeapSizeLimit,
+        totalJSHeapSize: console.memory.totalJSHeapSize,
+        usedJSHeapSize: console.memory.usedJSHeapSize,
+      },
+    });
+  }
+}
+window.ccinspector = window.ccinspector || cc_inspector;
+window.ccinspector.init && window.ccinspector.init();// 执行初始化函数
+
+
+
+
--- a/source/src/manifest/icon/icon48.png
+++ b/source/src/manifest/icon/icon48.png
--- a/source/src/manifest/index.js
+++ b/source/src/manifest/index.js
@@ -0,0 +1,54 @@
+module.exports = {
+  name: "Cocos Creator Inspector",
+  version: "1.0.1",
+  description: "Cocos Creator Inspector",
+  browser_action: {
+    default_title: "CC-Inspector",
+    default_icon: "icon/icon48.png",
+    default_popup: "popup.html"
+  },
+  icons: {
+    48: "icon/icon48.png"
+  },
+  devtools_page: "pages/devtools.html",
+  content_scripts: [
+    {
+      matches: ["<all_urls>"],
+      js: ["content.common.js"],
+      run_at: "document_end",
+      all_frames: true
+    }
+  ],
+  background: {
+    scripts: ["background.js"],
+    persistent: false,// 需要时开启
+  },
+  // optionsV1的写法
+  options_page: "options.html",
+  // optionsV2的写法
+  options_ui: {
+    page: "options.html",
+    // 添加一些默认的样式，推荐使用
+    chrome_style: true,
+  },
+  manifest_version: 2,
+  permissions: [
+    "tabs",
+    "http://*/*",
+    "https://*/*",
+    "*://*/*",
+    "audio",
+    "system.cpu",
+    "clipboardRead",
+    "clipboardWrite",
+    "system.memory",
+    "processes",// 这个权限只在chrome-dev版本都才有
+    "tabs",
+    "storage",
+    "nativeMessaging",
+    "contextMenus",
+    "notifications",
+  ],
+  web_accessible_resources: ["*/*", "*"],
+  content_security_policy: "script-src 'self' 'unsafe-eval';  object-src 'self'"
+}
--- a/source/src/options/index.ts
+++ b/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");
--- a/source/src/options/index.vue
+++ b/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>
--- a/source/src/popup/HelloWorld.vue
+++ b/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>
--- a/source/src/popup/index.ts
+++ b/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");
--- a/source/src/popup/index.vue
+++ b/source/src/popup/index.vue
@@ -0,0 +1,117 @@
+<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 @click="onClickOptions">设置</el-button>
+      <el-button @click="onMsgToBg">To-Bg</el-button>
+      <el-button @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 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>
+  </div>
+
+</template>
+
+<script lang="ts">
+import {Component, Vue} from "vue-property-decorator";
+import HelloWorld from "./HelloWorld.vue";
+
+@Component({
+  components: {
+    HelloWorld,
+  },
+})
+export default class App extends Vue {
+  longConn: chrome.runtime.Port | null = null
+
+  data() {
+    return {
+      title: "cc-inspector",
+      isShowMoneyPng: true,
+    }
+  }
+
+  created() {
+    this._initLongConn();
+  }
+
+  onBtnClickGitHub() {
+    console.log("onBtnClickGitHub");
+  }
+
+  onClickOptions() {
+    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((data: any, sender: any) => {
+          this._onLongConnMsg(data, sender);
+        })
+      }
+    }
+  }
+
+  _onLongConnMsg(data: string, sender: any) {
+    // 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"});
+      //@import "../index.less";
+
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+#popup {
+  width: auto;
+}
+</style>
--- a/source/src/popup/res/github.png
+++ b/source/src/popup/res/github.png
--- a/source/src/popup/res/money.jpg
+++ b/source/src/popup/res/money.jpg
--- a/source/src/popup/res/qq.png
+++ b/source/src/popup/res/qq.png
--- a/source/src/popup/res/tiezi.png
+++ b/source/src/popup/res/tiezi.png
--- a/source/src/shims-chrome.d.ts
+++ b/source/src/shims-chrome.d.ts
@@ -0,0 +1,4 @@
+declare module "*.chrome" {
+  import chrome from "chrome";
+  export default chrome;
+}
--- a/source/src/shims-tsx.d.ts
+++ b/source/src/shims-tsx.d.ts
@@ -0,0 +1,13 @@
+import Vue, { VNode } from "vue";
+
+declare global {
+  namespace JSX {
+    // tslint:disable no-empty-interface
+    interface Element extends VNode {}
+    // tslint:disable no-empty-interface
+    interface ElementClass extends Vue {}
+    interface IntrinsicElements {
+      [elem: string]: any;
+    }
+  }
+}
--- a/source/src/shims-vue.d.ts
+++ b/source/src/shims-vue.d.ts
@@ -0,0 +1,4 @@
+declare module "*.vue" {
+  import Vue from "vue";
+  export default Vue;
+}
--- a/source/src/test/index.ts
+++ b/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");
--- a/source/src/test/index.vue
+++ b/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>