删除

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([{

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: "通知",

source/src/core/plugin-msg.js

@@ -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",
-  }
-}

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",
+}

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

@@ -14,23 +14,21 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
+import Vue from "vue"
+import {Component, Prop} from "vue-property-decorator";
+
+@Component({})
+export default class ComponentsProperty extends Vue {
+  name: string = "";
+  isShowComp: boolean = true;
 
-  export default {
-    name: "",
-    data() {
-      return {
-        isShowComp: true,
-      }
-    },
-    methods: {
   onClickComp() {
     this.isShowComp = !this.isShowComp;
   }
-    },
-    props: [
-      'components'
-    ]
+
+  @Prop()
+  components = ""
 }
 </script>
 

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

@@ -132,7 +132,8 @@
       <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>
 
@@ -141,35 +142,47 @@
   </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) {
+  changeSizeActionWidth(step:number) {
     let w = parseFloat(this.itemData.width);
     this.itemData.width = w + step;
     this.changeSize();
-      },
-      changeSizeActionHeight(step) {
+  }
+
+
+  changeSizeActionHeight(step:number) {
     let h = parseFloat(this.itemData.height);
     this.itemData.height = h + step;
     this.changeSize();
-      },
-      changePositionActionX(step) {
+  }
+
+
+  changePositionActionX(step:number) {
     let x = parseFloat(this.itemData.x);
     this.itemData.x = x + step;
     this.changePosition();
-      },
-      changePositionActionY(step) {
+  }
+
+
+  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);
@@ -180,7 +193,9 @@
         "'" + this.itemData.y + "'" +
         ")");
     this._freshNode();
-      },
+  }
+
+
   changeSize() {
     // console.log("change width:" + this.itemData.width);
     // console.log("change height:" + this.itemData.height);
@@ -191,7 +206,9 @@
         "'" + this.itemData.height + "'" +
         ")");
     this._freshNode();
-      },
+  }
+
+
   changeRotation() {
     console.log("change rotation:" + this.itemData.rotation);
     this._evalCode(
@@ -199,7 +216,9 @@
         this.itemData.uuid + "','" +
         this.itemData.rotation + "')");
     this._freshNode();
-      },
+  }
+
+
   changeColor() {
     let color = this.itemData.color;
     console.log("color:" + color);
@@ -208,7 +227,9 @@
         this.itemData.uuid + "','" +
         color + "');");
     this._freshNode();
-      },
+  }
+
+
   onBtnClickNodeHide() {
     let uuid = this.itemData.uuid;
     if (uuid !== undefined) {
@@ -216,7 +237,9 @@
       this._evalCode(code);
       this._freshNode();
     }
-      },
+  }
+
+
   onBtnClickNodeShow() {
     let uuid = this.itemData.uuid;
     if (uuid !== undefined) {
@@ -224,23 +247,25 @@
       this._evalCode(code);
       this._freshNode();
     }
-      },
+  }
+
+
   _freshNode() {
     let uuid = this.itemData.uuid;
     let code2 = "window.ccinspector.getNodeInfo('" + uuid + "')";
     this._evalCode(code2);
-      },
-      _evalCode(code) {
+  }
+
+
+  _evalCode(code:string) {
     if (chrome && chrome.devtools) {
       chrome.devtools.inspectedWindow.eval(code);
     } else {
       console.log(code);
     }
-      },
-    },
-    props: [
-      'itemData'
-    ]
+  }
+
+
 }
 </script>
 

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

@@ -17,23 +17,29 @@
   </div>
 </template>
 
-<script>
-export default {
-  name: 'app',
-  data () {
-    return {
-      clientX: 0,
-    };
-  },
-  methods: {
+<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);
-    },
+    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
@@ -42,19 +48,17 @@ export default {
     } else {
       calcStep = -Math.abs(calcStep);
     }
-      this.$emit('movestep', 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',
-  ]
+    document.removeEventListener("mousemove", this._onMouseMove);
+    document.removeEventListener("mouseup", this._onMouseUp);
+    document.removeEventListener("onselectstart", this._onSelect);
+  }
+
+
 };
 </script>
 

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

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

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
     }

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]"