基于template做代码结构调整

template/src/devtools/index.js

@@ -1,3 +1,12 @@
-chrome.devtools.panels.create('panel', 'img/logo.png', 'pages/panel.html', function (panel) {
-    console.log('hello from callback')
+chrome.devtools.panels.create('cc-inspector', 'img/logo.png', 'pages/panel.html', function (panel) {
+    panel.onShown.addListener(function (window) {
+        console.log("panel show");
+    });
+    panel.onHidden.addListener(function (window) {
+        console.log("panel hide");
+    });
+    panel.onSearch.addListener(function (action, query) {
+        console.log("panel search!");
+        return false;
+    });
 })

template/src/devtools/root.vue

@@ -1,12 +1,15 @@
 <template lang="html">
     <div>
+        <span>{{tips}}</span>
         <el-button size="mini" @click="onClickTest"> 检测</el-button>
 
     </div>
 </template>
 <script>
     export default {
-        data: () => ({}),
+        data: () => ({
+            tips: "",
+        }),
         computed: {},
         created() {
         },
@@ -14,7 +17,16 @@
         },
         methods: {
             onClickTest() {
+                this.tips = "";
                 console.log("onClickTest")
+                let views = chrome.extension.getViews({type: 'popup'});
+                if (views.length > 0) {
+                    this.tips = "找到popup";
+                    console.log(views[0].location.href);
+                } else {
+                    this.tips = "未找到popup";
+
+                }
             }
         }
     }