├── .browserslistrc ├── .eslintignore ├── .eslintrc ├── .gitignore ├── .vscode └── settings.json ├── README.md ├── babel.config.js ├── manifest.json ├── package.json ├── pnpm-lock.yaml ├── public └── index.html ├── src ├── assets │ └── logo.png ├── components │ └── HelloWorld.vue └── pages │ ├── background │ └── main.js │ ├── content │ └── main.js │ ├── options │ ├── Index.vue │ └── main.js │ └── popup │ ├── Index.vue │ └── main.js └── vue.config.js /.browserslistrc: -------------------------------------------------------------------------------- 1 | > 1% 2 | last 2 versions 3 | not dead 4 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | dist 2 | node_modules 3 | -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": [ 3 | "plugin:vue/essential", 4 | "@vue/standard" 5 | ], 6 | "parserOptions": { 7 | "parser": "@babel/eslint-parser" 8 | } 9 | } -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | /dist 3 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "prettier.enable": false, 3 | "editor.codeActionsOnSave": { 4 | "source.fixAll.eslint": true 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # vue3-chrome-ext-template 2 | Vue3 Chrome Extension Template 3 | Vue3 谷歌插件开发模板 4 | 5 | ## 参考文章链接 6 | 7 | - [ 谷歌插件开发文档 ](https://developer.chrome.com/docs/extensions/mv3/ "谷歌插件开发文档") 8 | - [【干货】Chrome插件(扩展)开发全攻略](https://www.cnblogs.com/liuxianan/p/chrome-plugin-develop.html "【干货】Chrome插件(扩展)开发全攻略") 9 | 10 | ## Let's go 11 | ### 下载[vue3-chrome-ext-template](https://github.com/cinob/vue3-chrome-ext-template "vue3-chrome-ext-template")模板 12 | ```bash 13 | // 纯净模板 14 | npx degit cinob/vue3-chrome-ext-template your-program 15 | // or 克隆代码 16 | git clone https://github.com/cinob/vue3-chrome-ext-template.git 17 | ``` 18 | 19 | ### 进入项目目录，安装依赖包 20 | 21 | ```bash 22 | pnpm install 23 | ``` 24 | 25 | ### 启动项目 26 | 27 | ```bash 28 | pnpm dev 29 | ``` 30 | 31 | ### 目录结构 32 | 33 | ```bash 34 | ├─pages 35 | ├─background // 常驻后台的插件脚本 36 | ├─content // 注入页面的脚本 (可以获取页面dom...) 37 | ├─options // 插件的配置页 38 | └─popup // 点击右上角插件图标展示的页面 39 | ├─manifest.json // 谷歌插件配置文件 40 | ``` 41 | 42 | ### 运行到谷歌浏览器 43 | 44 | - 点击谷歌浏览器右上角三个点 -> 更多工具 -> 扩展程序 -> 打开右上角开发者模式 -> 加载已解压的扩展程序 -> 选择我们项目目录下dist文件夹 -> 启用插件并更新插件列表 45 | 46 | - 此时浏览器右上角插件列表已经成功加载出我们名为`vue3-chrome-ext`的插件 47 | 48 | -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/cli-plugin-babel/preset' 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "manifest_version": 2, 3 | "name": "vue3-chrome-ext", 4 | "description": "chrome extension", 5 | "version": "0.0.1", 6 | "options_page": "options.html", 7 | "browser_action": { 8 | "default_popup": "popup.html" 9 | }, 10 | "background": { 11 | "page": "background.html", 12 | "persistent": false 13 | }, 14 | "permissions": ["http://*/*", "https://*/*", "tabs", "contextMenus", "notifications", "webRequestBlocking", "storage", "activeTab", "declarativeContent"], 15 | "content_scripts": [{ 16 | "matches": ["http://*/*", "https://*/*"], 17 | "js": ["js/content.js"], 18 | "run_at": "document_start" 19 | }], 20 | "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'" 21 | } 22 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue3-chrome-ext-template", 3 | "version": "0.2.0", 4 | "private": true, 5 | "scripts": { 6 | "dev": "vue-cli-service build --watch", 7 | "build": "vue-cli-service build", 8 | "lint": "eslint ." 9 | }, 10 | "dependencies": { 11 | "vue": "^3.2.47" 12 | }, 13 | "devDependencies": { 14 | "@babel/core": "^7.21.3", 15 | "@babel/eslint-parser": "^7.21.3", 16 | "@vue/cli-plugin-babel": "~5.0.8", 17 | "@vue/cli-service": "~5.0.8", 18 | "@vue/compiler-sfc": "^3.2.47", 19 | "@vue/eslint-config-standard": "^8.0.1", 20 | "copy-webpack-plugin": "^11.0.0", 21 | "eslint": "^8.36.0", 22 | "eslint-plugin-vue": "^9.9.0" 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | <%= htmlWebpackPlugin.options.title %> 9 | 10 | 11 | 14 |
15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cinob/vue3-chrome-ext-template/b280cf3ece45714a06a631f2bb2c5779cfc3983a/src/assets/logo.png -------------------------------------------------------------------------------- /src/components/HelloWorld.vue: -------------------------------------------------------------------------------- 1 | 32 | 33 | 41 | 42 | 43 | 62 | -------------------------------------------------------------------------------- /src/pages/background/main.js: -------------------------------------------------------------------------------- 1 | console.log('background is open') 2 | -------------------------------------------------------------------------------- /src/pages/content/main.js: -------------------------------------------------------------------------------- 1 | console.log('content is open') 2 | -------------------------------------------------------------------------------- /src/pages/options/Index.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 12 | 13 | 23 | -------------------------------------------------------------------------------- /src/pages/options/main.js: -------------------------------------------------------------------------------- 1 | import { createApp } from 'vue' 2 | import App from './Index.vue' 3 | 4 | createApp(App).mount('#app') 5 | -------------------------------------------------------------------------------- /src/pages/popup/Index.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 18 | 19 | 29 | -------------------------------------------------------------------------------- /src/pages/popup/main.js: -------------------------------------------------------------------------------- 1 | import { createApp } from 'vue' 2 | import App from './Index.vue' 3 | 4 | createApp(App).mount('#app') 5 | -------------------------------------------------------------------------------- /vue.config.js: -------------------------------------------------------------------------------- 1 | const path = require('node:path') 2 | const CopyWebpackPlugin = require('copy-webpack-plugin') 3 | 4 | const pages = {} 5 | 6 | const chromeName = ['popup', 'background', 'options', 'content'] 7 | 8 | chromeName.forEach((name) => { 9 | pages[name] = { 10 | entry: `src/pages/${name}/main.js`, 11 | template: 'public/index.html', 12 | filename: `${name}.html` 13 | } 14 | }) 15 | 16 | module.exports = { 17 | pages, 18 | filenameHashing: false, 19 | configureWebpack: { 20 | plugins: [ 21 | new CopyWebpackPlugin({ 22 | patterns: [{ 23 | from: path.resolve('manifest.json'), 24 | to: `${path.resolve('dist')}/manifest.json` 25 | }] 26 | })] 27 | } 28 | } 29 | --------------------------------------------------------------------------------