首页vue命令搭建一个chrome插件项目

vue命令搭建一个chrome插件项目

时间: 2023-08-02 11:44:46 浏览: 175

vue开发chrome插件，实现获取界面数据和保存到数据库功能

5星 · 资源好评率100%

前言最近在评估项目时，要开启评估平台，查看平台和保存平台，感觉非常繁琐，开发了一款可以获取评估平台数据，查看项目排期和直接保存数据到数据库的chrome插件，由于我需要使用之前vue封装的一个日历插件，这里就用vue来开发这个插件。开发前准备要开发一个chrome插件，我们首先需要了解chrome插件的基本结构和对应的功能。每个扩展的文件类型和目录数量有所不同，但都必须有 manifest。一些基本但有用的扩展程序可能仅由 manifest 及其工具栏图标组成。 manifest.json { name: My Extension, // 扩展名 versi

可以使用 Vue CLI 插件 `vue-cli-plugin-chrome-extension`，它提供了快速创建一个基于 Vue.js 的 Chrome 插件项目的功能。下面是具体步骤： 1. 确保已经安装了最新版本的 Vue CLI： ``` npm install -g @vue/cli ``` 2. 创建一个新的 Vue 项目： ``` vue create my-chrome-extension ``` 3. 进入项目所在的文件夹： ``` cd my-chrome-extension ``` 4. 安装 `vue-cli-plugin-chrome-extension` 插件： ``` vue add chrome-extension ``` 5. 运行 `npm run build` 命令编译项目： ``` npm run build ``` 6. 在 Chrome 浏览器中打开 `chrome://extensions/` 页面，点击右上角的“开发者模式”按钮，然后点击“加载已解压的扩展程序”按钮，选择项目中的 `dist` 文件夹即可。至此，一个基于 Vue.js 的 Chrome 插件项目就搭建完成了。你可以在项目的 `src` 文件夹中编写你的插件逻辑，然后通过 `npm run build` 命令打包发布你的插件。

阅读全文