配置devtools

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!");
+      });
+    }
+  );
+
+
+}
+