保证基础的运行工作

source/src/devtools/main.ts

@@ -1,27 +1,25 @@
-const PluginMsg = require("../core/plugin-msg");
+import * as PluginMsg from '../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) {
+chrome.devtools.panels.create("Cocos", "icon/icon48.png", "pages/devtools_panel.html", function (panel: chrome.devtools.panels.ExtensionPanel) {
     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) {
+    panel.onShown.addListener((window) => {
       console.log("panel show");
-      // debugger
       conn.postMessage({msg: PluginMsg.Msg.UrlChange, data: {}})
     });
-    panel.onHidden.addListener(function (window) {
+    panel.onHidden.addListener(() => {
       console.log("panel hide");
     });
     panel.onSearch.addListener(function (action, query) {
       console.log("panel search!");
-      return false;
     });
   }
 );

source/src/devtools/panel/ccType/NodeBaseProperty.vue

@@ -145,9 +145,10 @@
 <script lang="ts">
 import Vue from "vue"
 import {Component, Prop} from "vue-property-decorator"
-import  UiProp from './ui-prop'
+import UiProp from './ui-prop.vue'
+
 @Component({
-  'ui-prop':UiProp
+  components: {UiProp},
 })
 export default class NodeBaseProperty extends Vue {
   name: string = "app"
@@ -155,28 +156,28 @@ export default class NodeBaseProperty extends Vue {
   @Prop()
   itemData: any = null;
 
-  changeSizeActionWidth(step:number) {
+  changeSizeActionWidth(step: number) {
     let w = parseFloat(this.itemData.width);
     this.itemData.width = w + step;
     this.changeSize();
   }
 
 
-  changeSizeActionHeight(step:number) {
+  changeSizeActionHeight(step: number) {
     let h = parseFloat(this.itemData.height);
     this.itemData.height = h + step;
     this.changeSize();
   }
 
 
-  changePositionActionX(step:number) {
+  changePositionActionX(step: number) {
     let x = parseFloat(this.itemData.x);
     this.itemData.x = x + step;
     this.changePosition();
   }
 
 
-  changePositionActionY(step:number) {
+  changePositionActionY(step: number) {
     let y = parseFloat(this.itemData.y);
     this.itemData.y = y + step;
     this.changePosition();
@@ -257,7 +258,7 @@ export default class NodeBaseProperty extends Vue {
   }
 
 
-  _evalCode(code:string) {
+  _evalCode(code: string) {
     if (chrome && chrome.devtools) {
       chrome.devtools.inspectedWindow.eval(code);
     } else {

source/src/devtools/panel/ccType/ui-prop.vue

@@ -24,13 +24,14 @@ import {Component, Prop} from "vue-property-decorator"
 @Component({})
 export default class UiProp extends Vue {
   @Prop()
-  name = null;
+  name: string = '';
 
   @Prop()
-  step = null;
+  step: number = 1;
+
   clientX: number = 0;
 
-  changePositionMouseAction(event) {
+  changePositionMouseAction(event: MouseEvent) {
     document.addEventListener("mousemove", this._onMouseMove);
     document.addEventListener("mouseup", this._onMouseUp);
     document.addEventListener("onselectstart", this._onSelect);
@@ -40,9 +41,9 @@ export default class UiProp extends Vue {
     return false;
   }
 
-  _onMouseMove(event) {
+  _onMouseMove(event: MouseEvent) {
     let x = event.clientX;
-    let calcStep = parseFloat(this.step) || 1;// 默认值为1
+    let calcStep = this.step;
     if (x > this.clientX) {
       calcStep = Math.abs(calcStep);
     } else {
@@ -52,7 +53,7 @@ export default class UiProp extends Vue {
     this.clientX = x;
   }
 
-  _onMouseUp(event) {
+  _onMouseUp(event: MouseEvent) {
     document.removeEventListener("mousemove", this._onMouseMove);
     document.removeEventListener("mouseup", this._onMouseUp);
     document.removeEventListener("onselectstart", this._onSelect);

source/src/index.less

@@ -1,11 +1,13 @@
 .layout {
   display: flex;
 
-  .vertical {
+  &.vertical {
+    display: flex;
     flex-direction: column;
   }
 
-  .horizontal {
+  &.horizontal {
+    display: flex;
     flex-direction: row;
 
   }

source/src/inject.js

@@ -1,5 +1,5 @@
 // eval 注入脚本的代码,变量尽量使用var,后来发现在import之后,let会自动变为var
-const PluginMsg = require("../core/plugin-msg");
+const PluginMsg = require("./core/plugin-msg");
 
 let cc_inspector = {
   inspectorGameMemoryStorage: {},

source/src/manifest/index.js

@@ -10,17 +10,17 @@ module.exports = {
   icons: {
     48: "icon/icon48.png"
   },
-  devtools_page: "pages/devtools.html",
+  devtools_page: "devtools_panel.html",
   content_scripts: [
     {
       matches: ["<all_urls>"],
-      js: ["content.js"],
+      js: ["js/content.js"],
       run_at: "document_end",
       all_frames: true
     }
   ],
   background: {
-    scripts: ["background.js"],
+    scripts: ["js/background.js"],
     persistent: false,// 需要时开启
   },
   // optionsV1的写法

source/src/popup/index.ts

@@ -1,5 +1,6 @@
 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;

source/src/popup/index.vue

@@ -1,9 +1,9 @@
 <template>
   <div id="popup">
     <div style="display: flex;flex-direction: row;align-items: center;">
-      <h3 v-show="false">title</h3>
+      <h3>{{ title }}</h3>
       <div style="flex: 1"></div>
-      <el-button @click="onClickOptions">设置</el-button>
+      <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>
     </div>
@@ -68,7 +68,10 @@ export default class App extends Vue {
 
   onClickOptions() {
     if (chrome && chrome.tabs) {
-      chrome.tabs.create({url: "pages/options.html"})
+      const manifest = require('../manifest/index')
+      if (manifest.options_page) {
+        chrome.tabs.create({url: manifest.options_page})
+      }
     }
   }
 
@@ -103,7 +106,6 @@ export default class App extends Vue {
   onSendMsg() {
     if (this.longConn) {
       this.longConn.postMessage({send: "hello"});
-      //@import "../index.less";
 
     }
   }
@@ -111,6 +113,8 @@ export default class App extends Vue {
 </script>
 
 <style scoped lang="less">
+@import "../index.less";
+
 #popup {
   width: auto;
 }