基于template做代码结构调整

template/src/backend/index.js

@@ -1 +1,4 @@
-console.log('background !')
+chrome.runtime.onMessage.addEventListener(function (req, sender, callback) {
+    callback("hi ,i am background!")
+})
+console.log("background inited!");

template/src/content/index.js

@@ -1 +1,4 @@
 console.log('content-script!')
+// chrome.tabs.query({active: true, currentWindow: true}, function (tabs) {
+// })
+chrome.runtime.sendMessage({msg: "content msg"})

template/src/content/inject.js

@@ -2,4 +2,8 @@ var content = chrome.extension.getURL('js/content.js')
 var script = document.createElement('script')
 script.setAttribute('type', 'text/javascript')
 script.setAttribute('src', content)
+script.onload = function () {
+    // 注入脚本执行完后移除掉
+    this.parentNode.removeChild(this);
+}
 document.body.appendChild(script)

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

template/src/manifest.js

@@ -5,19 +5,25 @@ module.exports = {
     author: 'xu_yanfeng',
     manifest_version: 2,
     icons: {'16': 'icons/16.png', '128': 'icons/128.png'},
+    // 权限申请
     permissions: [
         '<all_urls>',
         '*://*/*',
         'activeTab',
-        'tabs',
+        'tabs',// 标签
         'cookies',
         'background',
-        'contextMenus',
+        'contextMenus',// 右键菜单
         'unlimitedStorage',
-        'storage',
-        'notifications',
+        'storage',// 本地存储
+        'notifications',// 通知
         'identity',
-        'identity.email'
+        'identity.email',
+        "http://*/*",
+        "https://*/*",
+        "*://*/*",
+        "system.cpu",
+        "nativeMessaging"
     ],
     browser_action: {
         default_title: 'title',
@@ -29,12 +35,13 @@ module.exports = {
     },
     devtools_page: 'pages/devtools.html',
     options_page: 'pages/options.html',
+    // 需要直接注入页面的js
     content_scripts: [{
         js: ['js/inject.js'],
-        run_at: 'document_end',
-        matches: ['<all_urls>'],
+        run_at: 'document_end',// 代码注入时间: "document_start", "document_end", or "document_idle"，
+        matches: ['<all_urls>'],// 匹配所有地址
         all_frames: true
     }],
-    content_security_policy: "script-src 'self' 'unsafe-eval'; object-src 'self'",
+    content_security_policy: "script-src 'self' 'unsafe-eval'; object-src 'self' allow-modals ",
     web_accessible_resources: ['panel.html', 'js/content.js']
 }

template/src/popup/root.vue

@@ -4,6 +4,7 @@
             <h3>{{title}}</h3>
             <div style="flex: 1"></div>
             <el-button size="mini" @click="tab">设置</el-button>
+            <el-button size="mini" @click="onMsgToBg">To-Bg</el-button>
         </div>
         <div style="text-align: center;width: 100%; color: #6d6d6d;">
             <span>支持作者</span>
@@ -50,6 +51,13 @@
         methods: {
             tab() {
                 chrome.tabs.create({url: 'pages/tap.html'})
+            },
+            onMsgToBg(){
+                debugger
+                let bg = chrome.extension.getBackgroundPage();
+                if(bg){
+                    bg.test();
+                }
             }
         }
     }