参考文章链接

Let's go

克隆vue3-chrome-ext-template模板

  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的插件

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