update

source/plugins/copy.js

@@ -0,0 +1,31 @@
+const Fs = require("fs");
+const Path = require("path");
+const FsExtra = require("fs-extra");
+
+class Copy {
+  constructor(options) {
+    this.options = options;
+  }
+
+  apply(compiler) {
+    compiler.plugin("done", (compilation, callback) => {
+      const cfg = this.options;
+      if (cfg && cfg.length > 0) {
+        cfg.forEach(({src, dest}) => {
+          let fullSrc = Path.join(compilation.compilation.options.context, src);
+          if (Fs.existsSync(fullSrc)) {
+            let distPath = compilation.compilation.options.output.path;
+            let outFile = Path.join(distPath, dest);
+            FsExtra.ensureFileSync(outFile);
+            FsExtra.copyFileSync(fullSrc, outFile);
+          } else {
+            console.error(`manifest文件不存在：${src}`);
+          }
+        });
+      }
+    });
+
+  }
+}
+
+module.exports = Copy;

source/src/content.ts

@@ -1 +1,58 @@
 console.log('content code')
+// 具有操作dom的能力
+// 加载其他脚本
+// content.js 和原始界面共享DOM,但是不共享js,要想访问页面js,只能通过注入的方式
+import * as PluginMsg from './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)
+}
+debugger
+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)
+  });
+}

source/src/core/content.js

@@ -1,57 +0,0 @@
-// 具有操作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)
-  });
-}

source/src/core/event-mgr.js

@@ -1,7 +0,0 @@
-// const PluginMsg = require("./plugin-msg");
-// module.exports = {
-//   id: "event-mgr",
-//   testInit(name) {
-//     chrome.runtime.connect({name: name})
-//   }
-// }

source/src/core/event.js

@@ -1,3 +0,0 @@
-module.exports = {
-  id: "event-id",
-}

source/src/core/page.ejs

@@ -1,10 +0,0 @@
-<!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>

source/src/core/tools.js

@@ -1,17 +0,0 @@
-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
-    });
-  }
-}

source/src/devtools/ccType/NodeBaseProperty.vue

@@ -30,9 +30,11 @@ export default class NodeBaseProperty extends Vue {
   @Prop({default: () => testData,})
   allGroup: Array<Record<string, any>> | undefined;
 
-  onClickHeader(group) {
+  onClickHeader(group: any) {
+    if (group && group.hasOwnProperty('fold')) {
       group.fold = !group.fold;
     }
+  }
 
   @Prop({default: "label"})
   private label?: string | undefined
@@ -44,10 +46,12 @@ export default class NodeBaseProperty extends Vue {
   }
 
   created() {
+    if (this.allGroup) {
       this.allGroup.forEach(item => {
         this.$set(item, 'fold', false);
       })
     }
+  }
 
   changeSizeActionWidth(step: number) {
     let w = parseFloat(this.itemData.width);

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

@@ -110,7 +110,7 @@ export default class UiProp extends Vue {
     document.addEventListener("onselectstart", this._onSelect);
   }
 
-  colorReverse(OldColorValue) {
+  colorReverse(OldColorValue: string) {
     OldColorValue = "0x" + OldColorValue.replace(/#/g, "");
     var str = "000000" + (0xFFFFFF - OldColorValue).toString(16);
     return '#' + str.substring(str.length - 6, str.length);

source/src/devtools/index.vue

@@ -55,7 +55,7 @@ const PluginMsg = require("../core/plugin-msg");
   }
 })
 export default class Index extends Vue {
-  private isShowDebug: boolean = true;
+  private isShowDebug: boolean = false;
   treeItemData: Record<string, any> = {};
   treeData: Array<Record<string, any>> = []
   bgConn: chrome.runtime.Port | null = null// 与background.js的链接
@@ -342,8 +342,6 @@ export default class Index extends Vue {
 
   onBtnClickTest3() {
     // chrome.devtools.inspectedWindow.eval(`window.ccinspector.testMsg3()`)
-    let f = require("../core/event-mgr");
-    console.log(f.id);
   }
 
   onMemoryTest() {

source/vue.config.js

@@ -1,3 +1,4 @@
+const Copy = require("./plugins/copy");
 module.exports = {
   publicPath: "/",
   outputDir: "dist",
@@ -8,6 +9,9 @@ module.exports = {
   },
   pluginOptions: {
     browserExtension: {
+      extensionReloaderOptions: {
+        reloadPage: false,
+      },
       components: {
         background: true,
         contentScripts: true,
@@ -15,7 +19,8 @@ module.exports = {
       componentOptions: {
         contentScripts: {
           entries: {
-            content: "src/content.ts"
+            content: "src/content.ts",
+            inject: "src/inject.js"
           },
         },
         background: {
@@ -24,4 +29,9 @@ module.exports = {
       }
     }
   },
+  configureWebpack: {
+    plugins: [
+      // new Copy([{src: "src/inject.js", dest: "js/inject.js"}]),
+    ]
+  }
 };