配置devtools

source/src/background.ts

@@ -3,7 +3,7 @@ import * as  PluginMsg from "./core/plugin-msg"
 let Devtools: chrome.runtime.Port | null = null;
 let DevtoolsPanel: chrome.runtime.Port | null = null;
 let Content: chrome.runtime.Port | null = null;
-console.error('on background')
+console.log('on background')
 
 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')
@@ -90,7 +90,7 @@ function createPluginMenus() {
     } else if (info.menuItemId === "notify") {
       chrome.notifications.create("null", {
         type: "basic",
-        iconUrl: "icon/icon48.png",
+        iconUrl: "icons/48.png",
         title: "通知",
         message: "测试通知",
       })

source/src/content.ts

@@ -1 +1 @@
-console.log('11')
+console.log('content code')

source/src/devtools/index.ts

@@ -2,8 +2,9 @@ import Vue from "vue";
 import ElementUI from "element-ui"
 import "element-ui/lib/theme-chalk/index.css"
 import index from "./index.vue";
+import './register-panel';
 
-Vue.use(ElementUI);
+Vue.use(ElementUI, {size: "mini"});
 new Vue({
   el: "#app",
   render: h => h(index)

source/src/devtools/index.vue

@@ -48,7 +48,7 @@
   // import EvalCode from "./evalCodeString.js";
 
 
-  const PluginMsg = require("../../core/plugin-msg");
+  const PluginMsg = require("../core/plugin-msg");
 
   export default {
     data() {
@@ -329,7 +329,7 @@
       },
       onBtnClickTest3() {
         // chrome.devtools.inspectedWindow.eval(`window.ccinspector.testMsg3()`)
-        let f = require("../../core/event-mgr");
+        let f = require("../core/event-mgr");
         console.log(f.id);
       },
       onMemoryTest() {

source/src/devtools/main.ts

@@ -1,31 +0,0 @@
-import * as PluginMsg from '../core/plugin-msg'
-console.log('on devtools')
-debugger
-import Manifest from '../manifest.json'
-Manifest.devtools_page
-
-// 对应的是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.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((window) => {
-      console.log("panel show");
-      conn.postMessage({msg: PluginMsg.Msg.UrlChange, data: {}})
-    });
-    panel.onHidden.addListener(() => {
-      console.log("panel hide");
-    });
-    panel.onSearch.addListener(function (action, query) {
-      console.log("panel search!");
-    });
-  }
-);
-

source/src/devtools/register-panel.ts

@@ -0,0 +1,33 @@
+import * as PluginMsg from '../core/plugin-msg'
+import Manifest from '../manifest.json'
+
+
+if (chrome && chrome.devtools) {
+  // 对应的是Elements面板的边栏
+  chrome.devtools.panels.elements.createSidebarPane('Cocos', function (sidebar) {
+    sidebar.setObject({some_data: "some data to show!"});
+  });
+// 创建devtools-panel
+  chrome.devtools.panels.create("Cocos", "icons/48.png", Manifest.devtools_page, (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((window) => {
+        console.log("panel show");
+        conn.postMessage({msg: PluginMsg.Msg.UrlChange, data: {}})
+      });
+      panel.onHidden.addListener(() => {
+        console.log("panel hide");
+      });
+      panel.onSearch.addListener(function (action, query) {
+        console.log("panel search!");
+      });
+    }
+  );
+
+
+}
+

source/src/manifest.json

@@ -25,7 +25,7 @@
   "icons": {
     "48": "icons/48.png"
   },
-  "devtools_page": "devtools_panel.html",
+  "devtools_page": "devtools.html",
   "background": {
     "scripts": [
       "js/background.js"

source/vue.config.js

@@ -4,21 +4,14 @@ module.exports = {
   publicPath: "/",
   outputDir: "dist",
   pages: {
-    popup: {
-      entry: "src/popup/index.ts",
-      template: "public/index.html",
-      filename: "popup.html",
-      title: "popup",
-    },
+    popup: "src/popup/index.ts",
     options: "src/options/index.ts",
-    devtools_panel: "src/devtools/panel/index.ts",
-    test: "src/test/index.ts",
+    devtools: "src/devtools/index.ts",
   },
   pluginOptions: {
     browserExtension: {
       components: {
         background: true,
-        devtools: true,
         contentScripts: true,
       },
       componentOptions: {
@@ -29,29 +22,8 @@ module.exports = {
         },
         background: {
           entry: "src/background.ts",
-        },
-        devtools: {
-          entry: "src/devtools/main.ts",
         }
       }
     }
   },
-  // configureWebpack: {
-  //   mode: "development",
-  //   devtool: "#source-map",
-  //   entry: {
-  //     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]"
-  //   },
-  //   plugins: [
-  //     new ChromeManifest({
-  //       manifest: Path.join(__dirname, "src/manifest/index.js")
-  //     }),
-  //   ]
-  // }
 };