手摸手 带你准备 vue3 谷歌扩展/谷歌插件 开发环境

参考文章链接

• 谷歌插件开发文档 (opens new window)
• 【干货】Chrome插件(扩展)开发全攻略 (opens new window)

Let's go

克隆vue3-chrome-ext-template (opens new window)模板

git clone https://github.com/cinob/vue3-chrome-ext-template.git

进入项目目录，安装依赖包

// npm
npm install
// yarn
yarn

启动项目

// npm
npm run serve
// yarn
yarn serve

目录结构

├─pages
  ├─background  // 常驻后台的插件脚本
  ├─content     // 注入页面的脚本 (可以获取页面dom...)
  ├─options     // 插件的配置页
  └─popup       // 点击右上角插件图标展示的页面
├─manifest.json // 谷歌插件配置文件

运行到谷歌浏览器

• 点击谷歌浏览器右上角三个点 -> 更多工具 -> 扩展程序 -> 打开右上角开发者模式 -> 加载已解压的扩展程序 -> 选择我们项目目录下dist文件夹 -> 启用插件并更新插件列表

• 此时浏览器右上角插件列表已经成功加载出我们名为chrome-ext的插件

• 完美收工，快去试试吧！