保证基础的运行工作

source/.eslintrc.js

@@ -21,6 +21,13 @@ module.exports = {
 
   rules: {
     "@typescript-eslint/explicit-module-boundary-types": "off",
-    "@typescript-eslint/no-unused-vars": "off"
+    "@typescript-eslint/no-unused-vars": "off",
+    "prettier/prettier": "off",
+    "no-empty": "off",
+    "prefer-const": "off",
+    "@typescript-eslint/no-var-requires": "off",
+    "no-undef": "off",
+    "no-debugger": "off",
+    "no-unreachable": "off",
   }
 };

source/package-lock.json

@@ -4317,7 +4317,7 @@
     },
     "cosmiconfig": {
       "version": "6.0.0",
-      "resolved": "https://registry.npm.taobao.org/cosmiconfig/download/cosmiconfig-6.0.0.tgz",
+      "resolved": "https://registry.npm.taobao.org/cosmiconfig/download/cosmiconfig-6.0.0.tgz?cache=0&sync_timestamp=1596310819353&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fcosmiconfig%2Fdownload%2Fcosmiconfig-6.0.0.tgz",
       "integrity": "sha1-2k/uhTxS9rHmk19BwaL8UL1KmYI=",
       "dev": true,
       "optional": true,
@@ -4331,7 +4331,7 @@
       "dependencies": {
         "path-type": {
           "version": "4.0.0",
-          "resolved": "https://registry.npm.taobao.org/path-type/download/path-type-4.0.0.tgz?cache=0&sync_timestamp=1611752074264&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fpath-type%2Fdownload%2Fpath-type-4.0.0.tgz",
+          "resolved": "https://registry.npm.taobao.org/path-type/download/path-type-4.0.0.tgz?cache=0&sync_timestamp=1611752058913&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fpath-type%2Fdownload%2Fpath-type-4.0.0.tgz",
           "integrity": "sha1-hO0BwKe6OAr+CdkKjBgNzZ0DBDs=",
           "dev": true,
           "optional": true
@@ -4741,7 +4741,7 @@
     },
     "deepmerge": {
       "version": "4.2.2",
-      "resolved": "https://registry.npm.taobao.org/deepmerge/download/deepmerge-4.2.2.tgz",
+      "resolved": "https://registry.npm.taobao.org/deepmerge/download/deepmerge-4.2.2.tgz?cache=0&sync_timestamp=1572279720382&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fdeepmerge%2Fdownload%2Fdeepmerge-4.2.2.tgz",
       "integrity": "sha1-RNLqNnm49NT/ujPwPYZfwee/SVU=",
       "dev": true,
       "optional": true
@@ -6231,7 +6231,7 @@
         },
         "chalk": {
           "version": "4.1.0",
-          "resolved": "https://registry.npm.taobao.org/chalk/download/chalk-4.1.0.tgz?cache=0&sync_timestamp=1591687076871&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fchalk%2Fdownload%2Fchalk-4.1.0.tgz",
+          "resolved": "https://registry.npm.taobao.org/chalk/download/chalk-4.1.0.tgz?cache=0&sync_timestamp=1591687070184&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fchalk%2Fdownload%2Fchalk-4.1.0.tgz",
           "integrity": "sha1-ThSHCmGNni7dl92DRf2dncMVZGo=",
           "dev": true,
           "optional": true,
@@ -6242,7 +6242,7 @@
         },
         "color-convert": {
           "version": "2.0.1",
-          "resolved": "https://registry.npm.taobao.org/color-convert/download/color-convert-2.0.1.tgz?cache=0&sync_timestamp=1566248870121&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fcolor-convert%2Fdownload%2Fcolor-convert-2.0.1.tgz",
+          "resolved": "https://registry.npm.taobao.org/color-convert/download/color-convert-2.0.1.tgz",
           "integrity": "sha1-ctOmjVmMm9s68q0ehPIdiWq9TeM=",
           "dev": true,
           "optional": true,
@@ -6266,7 +6266,7 @@
         },
         "lru-cache": {
           "version": "6.0.0",
-          "resolved": "https://registry.npm.taobao.org/lru-cache/download/lru-cache-6.0.0.tgz?cache=0&sync_timestamp=1594427573763&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Flru-cache%2Fdownload%2Flru-cache-6.0.0.tgz",
+          "resolved": "https://registry.npm.taobao.org/lru-cache/download/lru-cache-6.0.0.tgz?cache=0&sync_timestamp=1594427582110&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Flru-cache%2Fdownload%2Flru-cache-6.0.0.tgz",
           "integrity": "sha1-bW/mVw69lqr5D8rR2vo7JWbbOpQ=",
           "dev": true,
           "optional": true,
@@ -6276,7 +6276,7 @@
         },
         "schema-utils": {
           "version": "2.7.0",
-          "resolved": "https://registry.npm.taobao.org/schema-utils/download/schema-utils-2.7.0.tgz",
+          "resolved": "https://registry.npm.taobao.org/schema-utils/download/schema-utils-2.7.0.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fschema-utils%2Fdownload%2Fschema-utils-2.7.0.tgz",
           "integrity": "sha1-FxUfdtjq5n+793lgwzxnatn078c=",
           "dev": true,
           "optional": true,
@@ -6379,7 +6379,7 @@
     },
     "fs-monkey": {
       "version": "1.0.1",
-      "resolved": "https://registry.npm.taobao.org/fs-monkey/download/fs-monkey-1.0.1.tgz",
+      "resolved": "https://registry.npm.taobao.org/fs-monkey/download/fs-monkey-1.0.1.tgz?cache=0&sync_timestamp=1617321543111&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Ffs-monkey%2Fdownload%2Ffs-monkey-1.0.1.tgz",
       "integrity": "sha1-SoLzaUQ2XmGfRFTZ//EGVTBnt4E=",
       "dev": true,
       "optional": true
@@ -12882,7 +12882,7 @@
         },
         "chalk": {
           "version": "4.1.0",
-          "resolved": "https://registry.npm.taobao.org/chalk/download/chalk-4.1.0.tgz?cache=0&sync_timestamp=1591687076871&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fchalk%2Fdownload%2Fchalk-4.1.0.tgz",
+          "resolved": "https://registry.npm.taobao.org/chalk/download/chalk-4.1.0.tgz?cache=0&sync_timestamp=1591687070184&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fchalk%2Fdownload%2Fchalk-4.1.0.tgz",
           "integrity": "sha1-ThSHCmGNni7dl92DRf2dncMVZGo=",
           "dev": true,
           "optional": true,
@@ -12893,7 +12893,7 @@
         },
         "color-convert": {
           "version": "2.0.1",
-          "resolved": "https://registry.npm.taobao.org/color-convert/download/color-convert-2.0.1.tgz?cache=0&sync_timestamp=1566248870121&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fcolor-convert%2Fdownload%2Fcolor-convert-2.0.1.tgz",
+          "resolved": "https://registry.npm.taobao.org/color-convert/download/color-convert-2.0.1.tgz",
           "integrity": "sha1-ctOmjVmMm9s68q0ehPIdiWq9TeM=",
           "dev": true,
           "optional": true,
@@ -12917,7 +12917,7 @@
         },
         "loader-utils": {
           "version": "2.0.0",
-          "resolved": "https://registry.npm.taobao.org/loader-utils/download/loader-utils-2.0.0.tgz",
+          "resolved": "https://registry.npm.taobao.org/loader-utils/download/loader-utils-2.0.0.tgz?cache=0&sync_timestamp=1584445207623&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Floader-utils%2Fdownload%2Floader-utils-2.0.0.tgz",
           "integrity": "sha1-5MrOW4FtQloWa18JfhDNErNgZLA=",
           "dev": true,
           "optional": true,
@@ -13777,7 +13777,7 @@
     },
     "yaml": {
       "version": "1.10.2",
-      "resolved": "https://registry.npm.taobao.org/yaml/download/yaml-1.10.2.tgz?cache=0&sync_timestamp=1615677716891&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fyaml%2Fdownload%2Fyaml-1.10.2.tgz",
+      "resolved": "https://registry.npm.taobao.org/yaml/download/yaml-1.10.2.tgz",
       "integrity": "sha1-IwHF/78StGfejaIzOkWeKeeSDks=",
       "dev": true,
       "optional": true

source/package.json

@@ -4,12 +4,13 @@
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",
-    "build": "vue-cli-service build",
+    "build": "vue-cli-service build --watch",
     "lint": "vue-cli-service lint",
     "prepare1": "vue-cli-service build --target lib --name content src/content.ts"
   },
   "dependencies": {
     "@types/fs-extra": "^9.0.9",
+    "@types/node": "^14.14.37",
     "babel-eslint": "^10.1.0",
     "core-js": "^3.6.5",
     "element-ui": "^2.15.1",

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;
 }

source/vue.config.js

@@ -11,7 +11,7 @@ module.exports = {
       title: "popup",
     },
     options: "src/options/index.ts",
-    devtools: "src/devtools/index.ts",
+    devtools_panel: "src/devtools/panel/index.ts",
     test: "src/test/index.ts",
   },
   configureWebpack: {
@@ -19,6 +19,7 @@ module.exports = {
       content: Path.join(__dirname, "src/content.ts"),
       background: Path.join(__dirname, "src/background.ts"),
       inject: Path.join(__dirname, "src/inject.js"),
+      devtools: Path.join(__dirname, "src/devtools/main.ts"),
     },
     output: {
       filename: "js/[name].js?t=[hash]"