序
最近一直在弄谷歌插件，做了一款工具类插件，帮助我提升一些工作和日常的效率。我给他取了一个好听的名字百川 Baichuan,最近刚好在谷歌商店审核通过了，借这个机会正好讲讲我在这期间遇到的一些问题和一些经验。
大家感兴趣的可以去谷歌商店下载看看：百川 Baichuan 下载
浏览器插件开发体验提升我做了什么
在开发百川时，有不断的推翻重写的过程。反反复复，没有想好下一步怎么做。简单弄了一个思维导图。
在我们日常开发过程中，浏览器插件相比大家都看过很多教程。原始的开发体验极其不友好，弄起来特别麻烦，仿佛回到 jQuery 时代。🤔
怎么像平常开发一样，支持热更新？
现在 web 开发没有热更新简直是一种折磨。所以但是了很多优秀的工具webpack
、vite 等。
今天介绍两个工具库辅助我们更好的完成浏览器插件开发
个人感觉crxjs用起来更简单，他可以配合rollup或者 vite 带来一流的开发体验。
还有一个也不错，我用的不多。
其实他们的本质原来就是在本地建立一个服务通过类似vite消息通讯的方式，完成热更新，感兴趣的同学可以自行搭建。或者站在巨人的肩膀上。
注入的视图怎么做样式隔离？
在我们开发浏览器插件的过程中我们往往需要在目标站点注入一些自己的视图，但是注入的视图怎么完成 css 隔离，不影响原站点，不被原站点影响。可能有点小伙伴已经想到了今天猪脚shadow dom,没错我们通过 shadow dom 可以很轻松的完成。
但是我们开发过程又遇到的一些难题，怎么管理这些 css 证明去热更新。我在想能不能通过vite plugin 完成。
初步设想
1、通过 url 链接引入 加入 shadow 即可、支持 传入参数 与 vite config 中参数对应即可，支持多 shadow dom 分割
import './style.css?shadow';
import './style.css?shadow=key';
2、 在 vue 中 style 同上
<style scoped shadow>
</style>
<style scoped shadow='key'>
</style>
vite-plugin-shadowcss
在上面的基础上我写了一个插件，支持上面特性
- 支持自定义 shadow css 输出位置
- 支持 shadow dom 多出口配置
- 开发环境支持 shadow css 热更新
- 构建模式，支持独立拆分 shadow css
目前这个插件仅仅满足我个人需求所以还比较简陋，需要使用的小伙伴注意一下
- 需要自行创建 shadow dom
- 如果 shadow dom 根元素下存在
shadowdomid-rootstyle 会插入此元素之前，没有则向后插入 - config 如果为数组 没有携带 key 的 shadow dom css 默认采用第一个配置
- 如果在 Vue 中使用 less，则默认情况下将使用 less 进行编译，目前不支持 Sass
到这里我们就完美的解决了 css 隔离的问题，极其简单的管理我们的 css
怎么支持跨浏览器兼容？
至于怎么跨浏览器兼容问题 直接使用 webextension-polyfill 就好了，很好的抹平了不同浏览器插件API之间差异。注意一些细节即可。
百川 Baichuan 介绍
百川是一款方便快捷，干净整洁无广告，小工具合集。提供更多方便快捷的功能，全面提升用户工作效率。
已经上线的工具：
- 超链直达 （屏蔽各做烦人链接拦截确认）
- 缓存助手 （查看当前站点 storage 相关信息、与相关操作）
- 同步助手 （支持同步其他站点的 storage 相关信息，对于开发来说是一个必备的工具）
规划中的工具：
- 闪记 （快速记录脑海中闪现的灵感）
- 密码盒子 （最好用的密码盒子）
- 图床 （超简单的free图床）
- 接口代理 （极简的借口代理方案）
- 脚本大师 （web操作复现，流程化）
- 饮茶君 （极简的任务计划）
- VuePro （开启生产环境 devtools工具）
- EasySwitch （极简的多平台开发账号切换工具）
- 掘金Pro （掘友们的好帮手）
- GithubPro （github个性化）
- YuquePro （语雀扩展）
- BilibiliPro （bilibili扩展）
- TwitterPro （Twitter扩展）
开源的动力是先满足自己
所以这些工具很多都是个人的需求，至于将来达到什么程度以后再说吧，目前已经成功发布的谷歌商店了。
最后
浏览器插件开发，其实比较简单。和我们普通开发差不多，对了需要发布到谷歌商店需要 5$。
