前言

最近在开发一个Chrome插件,在阅读官方文档时发现它提供的都是js的方式,完全没有工程化的概念,而且插件的版本已经到v3了,v3版本限制了非常多的东西,比如我们使用vue的template渲染,由于vue用到了eval来实现,导致插件会报错,蛋疼的很,总不能写手写render函数吧,太累了。

最好的解决办法就是用vite来打包vue项目,这样既可以用vue组件的方式开发,打包时也会将template转换成render函数,从而避免了eval的报错,我们还可以使用到ts和scss这些便利的工具。

为此我们搭建一个开发模板需要实现以下功能:

  1. 支持vite打包
  2. 支持typescript
  3. 支持scss
  4. 支持pinia
  5. 支持vue-router
  6. 自动生成manifest.json文件
  7. 自动生成background.js文件
  8. 封装常用插件方法:message发布订阅、上下文菜单生成、浏览器消息通知、fetch请求等

此处内容已隐藏回复后方可阅读。

分类: Chrome插件 标签: 插件模板vue3TypeScriptviteChrome

评论

全部评论 47

  1. yelk
    yelk
    Google Chrome Windows 10
    让我看看11
  2. 1
    1
    Google Chrome Windows 10
    111sad撒大青蛙
  3. 22
    22
    Google Chrome Windows 10
    让我看看[喜欢]
  4. giky
    giky
    Google Chrome Windows 10
    很有帮助的内容,继续加油
  5. 222
    222
    Google Chrome MacOS
    测试是啥啥
  6. 2
    2
    Google Chrome Windows 10
    测试从测试从测试从测试从测试从
  7. a
    a
    Google Chrome MacOS
    看看吧看看吧
  8. mavin
    mavin
    Google Chrome Windows 10
    必须学习一下
  9. johnnyye
    johnnyye
    Google Chrome Windows 10
    学习一下,看看有用不
    1. 木灵鱼儿
      木灵鱼儿
      FireFox Windows 10
      @johnnyye看不到吗?居然回复了两下
  10. johnnyye
    johnnyye
    Google Chrome Windows 10
    你说的都对

目录