diff --git a/CocosCreatorInspector/src/webpack.config.js b/CocosCreatorInspector/src/webpack.config.js
index 17034a4..d5a6c02 100644
--- a/CocosCreatorInspector/src/webpack.config.js
+++ b/CocosCreatorInspector/src/webpack.config.js
@@ -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([{
diff --git a/source/src/background.ts b/source/src/background.ts
index 08bcd69..6f0020a 100644
--- a/source/src/background.ts
+++ b/source/src/background.ts
@@ -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: "通知",
diff --git a/source/src/core/plugin-msg.js b/source/src/core/plugin-msg.js
deleted file mode 100644
index e99a173..0000000
--- a/source/src/core/plugin-msg.js
+++ /dev/null
@@ -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",
-  }
-}
diff --git a/source/src/core/plugin-msg.ts b/source/src/core/plugin-msg.ts
new file mode 100644
index 0000000..bf5a022
--- /dev/null
+++ b/source/src/core/plugin-msg.ts
@@ -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",
+}
diff --git a/source/src/devtools/panel/ccType/ComponentsProperty.vue b/source/src/devtools/panel/ccType/ComponentsProperty.vue
index 11b265f..e848f44 100644
--- a/source/src/devtools/panel/ccType/ComponentsProperty.vue
+++ b/source/src/devtools/panel/ccType/ComponentsProperty.vue
@@ -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>
diff --git a/source/src/devtools/panel/ccType/NodeBaseProperty.vue b/source/src/devtools/panel/ccType/NodeBaseProperty.vue
index ea0bed1..9e8e658 100644
--- a/source/src/devtools/panel/ccType/NodeBaseProperty.vue
+++ b/source/src/devtools/panel/ccType/NodeBaseProperty.vue
@@ -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>
diff --git a/source/src/devtools/panel/ui/ui-prop.vue b/source/src/devtools/panel/ccType/ui-prop.vue
similarity index 54%
rename from source/src/devtools/panel/ui/ui-prop.vue
rename to source/src/devtools/panel/ccType/ui-prop.vue
index c26cd00..5c97f6c 100644
--- a/source/src/devtools/panel/ui/ui-prop.vue
+++ b/source/src/devtools/panel/ccType/ui-prop.vue
@@ -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>
 
diff --git a/source/src/devtools/panel/index.ts b/source/src/devtools/panel/index.ts
index 8dfb812..bbf0bfb 100644
--- a/source/src/devtools/panel/index.ts
+++ b/source/src/devtools/panel/index.ts
@@ -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)
 });
diff --git a/source/src/devtools/util.js b/source/src/devtools/util.js
index fb4769a..15060a3 100644
--- a/source/src/devtools/util.js
+++ b/source/src/devtools/util.js
@@ -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);
 
 
 
diff --git a/source/src/inject.ts b/source/src/inject.js
similarity index 100%
rename from source/src/inject.ts
rename to source/src/inject.js
diff --git a/source/src/manifest/index.js b/source/src/manifest/index.js
index 582b520..82e9af4 100644
--- a/source/src/manifest/index.js
+++ b/source/src/manifest/index.js
@@ -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
     }
diff --git a/source/vue.config.js b/source/vue.config.js
index 4745bd6..428caf0 100644
--- a/source/vue.config.js
+++ b/source/vue.config.js
@@ -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]"