Vue CLI 插件 Chrome 扩展 CLI 使用教程

Vue CLI 插件 Chrome 扩展 CLI 使用教程

vue-cli-plugin-chrome-extension-cliuse vue plugin easy create chrome extension template 项目地址:https://gitcode.com/gh_mirrors/vu/vue-cli-plugin-chrome-extension-cli

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

vue-cli-plugin-chrome-extension-cli/
├── public/
│   ├── icon.png
│   └── manifest.json
├── src/
│   ├── assets/
│   ├── components/
│   ├── background.js
│   ├── content.js
│   ├── popup.html
│   ├── popup.js
│   └── options.html
│   └── options.js
├── .gitignore
├── babel.config.js
├── package.json
└── README.md

• public/: 存放公共资源，如 icon.png 和 manifest.json。
• src/: 存放源代码文件。
  • assets/: 存放静态资源文件。
  • components/: 存放 Vue 组件。
  • background.js: 扩展的后台脚本。
  • content.js: 注入到网页的内容脚本。
  • popup.html: 扩展的弹出页面。
  • popup.js: 弹出页面的脚本。
  • options.html: 扩展的选项页面。
  • options.js: 选项页面的脚本。
• .gitignore: Git 忽略文件配置。
• babel.config.js: Babel 配置文件。
• package.json: 项目依赖和脚本配置。
• README.md: 项目说明文档。

2. 项目的启动文件介绍

• src/background.js: 扩展的后台脚本，负责处理扩展的生命周期事件和后台任务。
• src/content.js: 注入到网页的内容脚本，负责与网页内容交互。
• src/popup.js: 弹出页面的脚本，负责处理弹出页面的逻辑。
• src/options.js: 选项页面的脚本，负责处理选项页面的逻辑。

3. 项目的配置文件介绍

• public/manifest.json: Chrome 扩展的清单文件，定义了扩展的基本信息、权限、资源等。
• babel.config.js: Babel 配置文件，用于转换 JavaScript 代码。
• package.json: 项目依赖和脚本配置，包括开发和构建命令。

以上是基于开源项目 vue-cli-plugin-chrome-extension-cli 的目录结构、启动文件和配置文件的介绍。希望这些信息能帮助你更好地理解和使用该项目。

vue-cli-plugin-chrome-extension-cliuse vue plugin easy create chrome extension template 项目地址:https://gitcode.com/gh_mirrors/vu/vue-cli-plugin-chrome-extension-cli