Vue CLI 插件浏览器扩展项目教程

Vue CLI 插件浏览器扩展项目教程

vue-cli-plugin-browser-extensionBrowser extension development plugin for vue-cli 3.0项目地址:https://gitcode.com/gh_mirrors/vu/vue-cli-plugin-browser-extension

1. 项目的目录结构及介绍

vue-cli-plugin-browser-extension/
├── public/
│   ├── _locales/
│   │   └── en/
│   │       └── messages.json
│   ├── icons/
│   │   └── 各种尺寸的图标文件
│   └── manifest.json
├── src/
│   ├── assets/
│   ├── components/
│   ├── background.js
│   ├── contentScript.js
│   ├── popup.js
│   ├── options.js
│   └── main.js
├── .gitignore
├── .eslintrc.js
├── .prettierrc
├── package.json
├── README.md
└── yarn.lock

目录结构介绍

• public/：包含公共资源文件，如 manifest.json 和图标文件。
  • _locales/：用于多语言支持的目录。
  • icons/：包含不同尺寸的图标文件。
• src/：源代码目录。
  • assets/：静态资源文件。
  • components/：Vue 组件文件。
  • background.js：后台脚本文件。
  • contentScript.js：内容脚本文件。
  • popup.js：弹出窗口脚本文件。
  • options.js：选项页面脚本文件。
  • main.js：主入口文件。
• .gitignore：Git 忽略文件配置。
• .eslintrc.js：ESLint 配置文件。
• .prettierrc：Prettier 配置文件。
• package.json：项目依赖和脚本配置。
• README.md：项目说明文档。
• yarn.lock：Yarn 锁定文件。

2. 项目的启动文件介绍

src/main.js

main.js 是项目的入口文件，负责初始化 Vue 应用并挂载到指定的 DOM 元素上。

import Vue from 'vue';
import App from './App.vue';

new Vue({
  render: h => h(App),
}).$mount('#app');

public/manifest.json

manifest.json 是 Chrome 扩展的配置文件，定义了扩展的基本信息和资源路径。

{
  "manifest_version": 2,
  "name": "Vue Browser Extension",
  "version": "1.0",
  "description": "A browser extension built with Vue CLI",
  "icons": {
    "16": "icons/16.png",
    "48": "icons/48.png",
    "128": "icons/128.png"
  },
  "background": {
    "scripts": ["src/background.js"]
  },
  "browser_action": {
    "default_popup": "popup.html"
  },
  "permissions": [
    "activeTab"
  ]
}

3. 项目的配置文件介绍

package.json

package.json 文件定义了项目的依赖和脚本命令。

{
  "name": "vue-cli-plugin-browser-extension",
  "version": "1.0.0",
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "vue": "^2.6.11"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^4.5.0",
    "@vue/cli-plugin-eslint": "^4.5.0",
    "@vue/cli-service": "^4.5.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.2.2",
    "vue-template-compiler": "^2.6.11"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node":

vue-cli-plugin-browser-extensionBrowser extension development plugin for vue-cli 3.0项目地址:https://gitcode.com/gh_mirrors/vu/vue-cli-plugin-browser-extension