前言

最近在开发一个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

评论

全部评论 22

  1. aa
    aa
    Google Chrome Windows 10
    小杨好卷啊
  2. aaa
    aaa
    Google Chrome Windows 10
    休息一下把方法
  3. 啊
    Google Chrome Windows 10
    休息一下把方法
  4. a
    a
    Google Chrome Windows 10
    休息一下把方法
  5. 小涛
    小涛
    Google Chrome MacOS
    正想学习呢。
  6. 游客
    游客
    Google Chrome Windows 10
    参考一下吧
  7. xxx
    xxx
    Google Chrome Windows 10
    主要是想看文章
  8. 刘哈哈
    刘哈哈
    Google Chrome Windows 10
    文章是不错,感谢感谢。就是dom注释不正经[滑稽]
    1. 木灵鱼儿
      木灵鱼儿
      FireFox Windows 10
      @刘哈哈[doge]是正经的嗷
  9. 111
    111
    Google Chrome Windows 10
    111aaa啊啊
  10. Joe
    Joe
    Google Chrome MacOS
    主要是想看文章
    1. 木灵鱼儿
      木灵鱼儿
      FireFox Windows 10
      @Joe太多内容了,仓库还在完善,可以先参考参考

目录