├── src ├── content │ └── content.js ├── background │ └── background.js ├── popup │ ├── popup.js │ ├── popup.html │ └── App.vue ├── option │ ├── option.js │ ├── option.html │ └── App.vue └── manifest.json ├── static └── img │ └── icon.png ├── .babelrc.js ├── .gitignore ├── package.json ├── readme.md └── webpack.config.js /src/content/content.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/background/background.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /static/img/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ylfeng250/vue-crx/HEAD/static/img/icon.png -------------------------------------------------------------------------------- /.babelrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | "plugins": ["@babel/plugin-transform-runtime"], 3 | "presets": ["@babel/preset-env"] 4 | } -------------------------------------------------------------------------------- /src/popup/popup.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App.vue' 3 | new Vue({ 4 | el: '#popup', 5 | render: h => h(App) 6 | }) -------------------------------------------------------------------------------- /src/option/option.js: -------------------------------------------------------------------------------- 1 | import Vue from "vue"; 2 | import App from "./App.vue"; 3 | new Vue({ 4 | el: "#option", 5 | render: (h) => h(App), 6 | }); 7 | -------------------------------------------------------------------------------- /src/popup/popup.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 8 | 9 | -------------------------------------------------------------------------------- /src/option/option.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 |
7 |
8 | 9 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | dist/ 4 | npm-debug.log 5 | yarn-error.log 6 | tree.md 7 | .idea 8 | *.suo 9 | *.ntvs* 10 | *.njsproj 11 | *.sln 12 | *.zip 13 | -------------------------------------------------------------------------------- /src/option/App.vue: -------------------------------------------------------------------------------- 1 | 6 | 11 | 23 | -------------------------------------------------------------------------------- /src/popup/App.vue: -------------------------------------------------------------------------------- 1 | 6 | 11 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-crx", 3 | "version": "1.0.0", 4 | "description": "使用Vue开发Chrome扩展插件的模板", 5 | "scripts": { 6 | "build": "webpack --progress", 7 | "watch": "webpack --progress --watch --mode=development" 8 | }, 9 | "author": "No.96", 10 | "license": "ISC", 11 | "devDependencies": { 12 | "@babel/core": "^7.4.4", 13 | "@babel/plugin-transform-runtime": "^7.4.4", 14 | "@babel/preset-env": "^7.4.4", 15 | "babel-loader": "^8.0.6", 16 | "clean-webpack-plugin": "^2.0.2", 17 | "copy-webpack-plugin": "^5.0.3", 18 | "css-loader": "^2.1.1", 19 | "file-loader": "^3.0.1", 20 | "html-webpack-plugin": "^5.5.0", 21 | "style-loader": "^0.23.1", 22 | "url-loader": "^1.1.2", 23 | "vue-loader": "^15.7.0", 24 | "vue-style-loader": "^4.1.2", 25 | "vue-template-compiler": "^2.6.10", 26 | "webpack": "^4.31.0", 27 | "webpack-cli": "^3.3.2" 28 | }, 29 | "dependencies": { 30 | "@babel/runtime": "^7.4.4", 31 | "vue": "^2.6.10" 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /src/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "manifest_version": 2, 3 | "name": "Vue-crx 模板", 4 | "version": "1.0.0", 5 | "description": "1119030015@qq.com", 6 | "icons": { 7 | "16":"static/img/icon.png", 8 | "19":"static/img/icon.png", 9 | "38":"static/img/icon.png", 10 | "48": "static/img/icon.png", 11 | "128": "static/img/icon.png" 12 | }, 13 | "browser_action": 14 | { 15 | "default_icon": "static/img/icon.png", 16 | "default_title": "Vue-crx 模板", 17 | "default_popup": "popup.html" 18 | }, 19 | "options_page": "option.html", 20 | "background": 21 | { 22 | "persistent": false, 23 | "scripts": ["background.main.js"] 24 | }, 25 | "content_scripts": [ 26 | { 27 | "matches": ["https://*.baidu.com/*", "http://*.baidu.com/*"], 28 | "js": ["content.main.js"], 29 | "run_at": "document_end" 30 | }], 31 | "permissions": [ 32 | "http://*/*", 33 | "https://*/*", 34 | "" 35 | ] 36 | } -------------------------------------------------------------------------------- /readme.md: -------------------------------------------------------------------------------- 1 | ## 使用 Vue 2.0 开发 Chrome 插件的模板 2 | 3 | 最近看了一些 Chrome 插件开发的内容, 想要使用 Vue 的单文件来编写，但是没有现成的`webpack`打包方式，自己写了一个，第一次自己编写`webpack`的配置文件 4 | 5 | ## 目录结构 6 | 7 | ``` 8 | │ .babelrc.js 9 | │ .gitignore 10 | │ package-lock.json 11 | │ package.json 12 | │ webpack.config.js 13 | │ 14 | ├─src 15 | │ │ manifest.json 16 | │ │ 17 | │ ├─background 18 | │ │ background.js 19 | │ │ 20 | │ ├─content 21 | │ │ content.js 22 | │ │ 23 | │ ├─option 24 | │ │ App.vue 25 | │ │ option.html 26 | │ │ option.js 27 | │ │ 28 | │ └─popup 29 | │ App.vue 30 | │ popup.html 31 | │ popup.js 32 | │ 33 | └─static 34 | └─img 35 | icon.png 36 | ``` 37 | 38 | ## 目前模板支持 39 | 40 | - vue 模板解析 41 | - es6 语法转换 42 | - 图片打包 43 | - 字体打包 44 | 45 | ## 使用 46 | 47 | ```bash 48 | ## 安装依赖 49 | npm install 50 | ## 打包 51 | npm build 52 | ## 开发 53 | npm run watch 54 | ``` 55 | 56 | ## Chrome 插件开发 资源 57 | 58 | - [《Chrome 插件开发全攻略》配套完整 Demo](https://github.com/sxei/chrome-plugin-demo) 59 | - [Chrome 扩展及应用开发](https://github.com/Sneezry/chrome_extensions_and_apps_programming) 60 | - [Chrome 扩展及应用开发（首发版）](http://www.ituring.com.cn/book/1421?utm_source=tuicool) 61 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | let path = require("path"); 2 | let VueLoaderPlugin = require("vue-loader/lib/plugin"); 3 | var HtmlWebpackPlugin = require("html-webpack-plugin"); 4 | var CopyWebpackPlugin = require("copy-webpack-plugin"); 5 | var CleanWebpackPlugin = require("clean-webpack-plugin"); 6 | module.exports = { 7 | mode: "production", 8 | entry: { 9 | background: "./src/background/background.js", 10 | content: "./src/content/content.js", 11 | option: "./src/option/option.js", 12 | popup: "./src/popup/popup.js", 13 | }, 14 | output: { 15 | path: path.resolve(__dirname, "./dist"), 16 | publicPath: "./", 17 | filename: "[name].main.js", 18 | }, 19 | plugins: [ 20 | new VueLoaderPlugin(), 21 | new HtmlWebpackPlugin({ 22 | filename: "option.html", 23 | template: "src/option/option.html", 24 | inject: "body", 25 | chunks: ["option"], 26 | minify: { 27 | //压缩 28 | removeComments: true, 29 | collapseWhitespace: true, 30 | }, 31 | }), 32 | new HtmlWebpackPlugin({ 33 | filename: "popup.html", 34 | template: "src/popup/popup.html", 35 | inject: "body", 36 | chunks: ["popup"], 37 | minify: { 38 | //压缩 39 | removeComments: true, 40 | collapseWhitespace: true, 41 | }, 42 | }), 43 | new CleanWebpackPlugin(), 44 | new CopyWebpackPlugin( 45 | [ 46 | { from: path.resolve(__dirname, "src/manifest.json"), to: "" }, 47 | { from: path.resolve(__dirname, "static/"), to: "static/" }, 48 | ], 49 | { copyUnmodified: true } 50 | ), 51 | ], 52 | devtool: "source-map", 53 | module: { 54 | rules: [ 55 | { 56 | test: /\.vue$/, 57 | use: "vue-loader", 58 | }, 59 | { 60 | test: /\.js$/, 61 | exclude: /node_modules/, 62 | use: [ 63 | { 64 | loader: "babel-loader", 65 | }, 66 | ], 67 | }, 68 | { 69 | test: /\.css$/, 70 | use: ["vue-style-loader", "css-loader"], 71 | }, 72 | { 73 | test: /\.(png|jpg|gif|svg)$/, 74 | use: [ 75 | { 76 | loader: "url-loader", 77 | options: { 78 | name: "[name].[ext]?[hash]", 79 | }, 80 | }, 81 | ], 82 | }, 83 | { 84 | test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, 85 | use: [ 86 | { 87 | loader: "url-loader", 88 | options: { 89 | limit: 10000, 90 | name: path.posix.join("static", "fonts/[name].[hash:7].[ext]"), 91 | }, 92 | }, 93 | ], 94 | }, 95 | ], 96 | }, 97 | resolve: { 98 | alias: { 99 | vue$: "vue/dist/vue.esm.js", 100 | src: path.resolve(__dirname, "src"), 101 | }, 102 | }, 103 | watchOptions: { 104 | poll: 1000, 105 | aggregateTimeout: 600, 106 | }, 107 | }; 108 | --------------------------------------------------------------------------------