基于template做代码结构调整

template/core/webpack.base.js

@@ -96,6 +96,7 @@ module.exports = {
     htmlPage('devtools', 'devtools', ['devtools']),
     htmlPage('options', 'options', ['options']),
     htmlPage('background', 'background', ['background']),
+
     new CopyWebpackPlugin([{ from: path.join(__dirname, '..', 'static') }]),
     new ChromeReloadPlugin({
       port: 9090,

template/core/webpack.config.js

@@ -0,0 +1,108 @@
+const path = require('path')
+const webpack = require('webpack')
+const CleanWebpackPlugin = require("clean-webpack-plugin")
+const {cssLoaders, htmlPage} = require('./tools')
+const CopyWebpackPlugin = require('copy-webpack-plugin')
+
+let resolve = dir => path.join(__dirname, '..', 'src', dir)
+module.exports = {
+    entry: {
+        tab: resolve('./tab'),
+        popup: resolve('./popup'),
+        options: resolve('./options'),
+        content: resolve('./content'),
+        devtools: resolve('./devtools'),
+        background: resolve('./backend'),
+        panel: resolve('./devtools/panel'),
+        inject: resolve('./content/inject'),
+    },
+    output: {
+        path: path.join(__dirname, '..', 'build'),
+        publicPath: '/',
+        filename: 'js/[name].js',
+        chunkFilename: 'js/[id].[name].js?[hash]',
+        library: '[name]'
+    },
+    resolve: {
+        extensions: ['.js', '.vue', '.json'],
+        alias: {
+            'vue$': 'vue/dist/vue.esm.js',
+            '@': resolve('src')
+        }
+    },
+    module: {
+        rules: [
+            {
+                test: /\.(js|vue)$/,
+                loader: 'eslint-loader',
+                enforce: 'pre',
+                include: [path.join(__dirname, '..', 'src'), path.join(__dirname, '..', 'test')],
+                options: {
+                    formatter: require('eslint-friendly-formatter')
+                }
+            },
+            {
+                test: /\.vue$/,
+                loader: 'vue-loader',
+                options: {
+                    extractCSS: true,
+                    loaders: {
+                        ...cssLoaders(),
+                        js: { loader: 'babel-loader' }
+                    },
+                    transformToRequire: {
+                        video: 'src',
+                        source: 'src',
+                        img: 'src',
+                        image: 'xlink:href'
+                    }
+                }
+            },
+            {
+                test: /\.js$/,
+                loader: 'babel-loader',
+                include:  [path.join(__dirname, '..', 'src'), path.join(__dirname, '..', 'test')],
+            },
+            {
+                test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
+                loader: 'url-loader',
+                options: {
+                    limit: 10000,
+                    name: 'img/[name].[hash:7].[ext]'
+                }
+            },
+            {
+                test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
+                loader: 'url-loader',
+                options: {
+                    limit: 10000,
+                    name: 'media/[name].[hash:7].[ext]'
+                }
+            },
+            {
+                test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
+                loader: 'url-loader',
+                options: {
+                    limit: 10000,
+                    name: 'fonts/[name].[hash:7].[ext]'
+                }
+            }
+        ]
+    },
+    plugins: [
+        new CleanWebpackPlugin(['../build/*.*']),
+        htmlPage('home', 'tap', ['tab']),
+        htmlPage('popup', 'popup', ['popup']),
+        htmlPage('panel', 'panel', ['panel']),
+        htmlPage('devtools', 'devtools', ['devtools']),
+        htmlPage('options', 'options', ['options']),
+        htmlPage('background', 'background', ['background']),
+
+        new CopyWebpackPlugin([{ from: path.join(__dirname, '..', 'static') }]),
+
+    ],
+    devServer: {
+        contentBase: "./build",
+    },
+    performance: { hints: false },
+}

template/package.json

@@ -19,7 +19,8 @@
     "lint": "eslint --ext .js,.vue src",
     "dev": "webpack --config ./core/webpack.dev.js --hide-modules",
     "dev-info": "webpack --config ./core/webpack.dev.js",
-    "build": "webpack --config ./core/webpack.prod.js -p --progress  --hide-modules --colors"
+    "build": "webpack --config ./core/webpack.prod.js -p --progress  --hide-modules --colors",
+    "webpack": "webpack --config ./core/webpack.config.js --watch"
   },
   "devDependencies": {
     "archiver": "^2.1.0",

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