- Published on
最近开发了 2 个谷歌插件
- Store: awesome-find，and GitHub
- Store: sync-storage，and GitHub
sync-storage
工作中，在本地开发公司后台往往需要把公司统一登录门户的认证信息(如token)手动从 localstorage 复制出来，然后再粘贴进在本地开发环境打开的浏览器页面的 localstorage 中。别问我为什么这么做，因为在我刚刚进入这个公司的时，交接工作的同事就叫我这么干的😂。
是的，最早我也寻思这太 low 了吧! 所以当初写了 2 个 js 代码片段，复制到 devtools 中执行，一个负责提取拷贝目标网站的storage信息，一个负责把剪贴板的信息注入到目标开发环境。
直到最近开始开发谷歌插件，我就想不如实现一个chrome插件来解决这个痛点得了，最好可以一次设置，自动同步，这样以后再也不用手动复制了，于是 sync-storage 就诞生了。
使用方式看截图应该还算比较简单明了吧。个人实测下来，比较好用， 完全符合我的预期！
我主要实现这么几个功能：
- 手动同步，点击绿色的按钮会自动同步一次 localstorage 的信息，使用这个功能的前提是两个站点都得打开，且源站点一般需要登录（不然获取个啥）。为此， 我做了检查功能，如果发现网站没打开会就会自动打开，方便你进行下一步。
- 自动同步，我当然是更推荐大家使用这种模式的，点击紫色的👁按钮，它将开启一个监听，当源站、目标站都存在，且设定的 key 也都有时，就会触发自动同步。
简单说，想象以下3中场景：
- 仅目标站已打开：当源站打开并登录后，就会触发自动同步
- 仅源站已经打开且登录：目标站一旦打开，就会触发自动同步。
- 源站和目标站都存在，但还未登录：一旦登录，也会触发自动同步。
希望你能够喜欢这个插件，如果有什么建议或问题，欢迎随时联系我。如果你喜欢这个插件，可以给我一个star，谢谢！
awesome-find
在地铁上看到了 v2ex 论坛中的一个帖子，[chrome 扩展程序] 一个可以使用正则表达式的高亮查找工具，支持实时监测 DOM 变化。作为前端，我被它的高颜值所吸引，立马下载安装并使用。
在使用过程中我发现了一些问题，或者说让使用更加方便的功能，比如快捷键的设置。后来和作者在 GitHub 上联系，把建议和bug反馈给了他，俺也给项目findwhatever提了点 pr。
在我开发 awesome-find 的之前 findwhatever 的快速频繁拖拽会有点卡顿，频繁切换显示也会触发chrome的报错，加之 findwhatever 的功能过多，我更希望要一个简约点的 findwhaterver，再结合我个人的使用习惯，我决定开发一个简版的搜索文本插件，最终如图所示
对比 findwhatever，awesome-find 完全从头实现，阉割了部分功能，如：不支持实时监测 DOM 变化。以下是部分不同的地方：
- 把一键复制功能挪到了正则匹配模式下，因为我觉得这才有意义。在正则模式下，过滤掉了一些范围过大的正则比如
.*等，避免性能问题。 - 把固定列表直接放到了插件表面，让常用的快速搜索更方便
- 历史记录的按钮触发动画更漂亮
如果你用起来还可以，也希望能获得一个 star 哦~
vv-cli
本文的插件全是使用俺搭建的 @twotwoba/vv-cli 工具开发的。
这是我长期维护的一个自用的 cli 工具， 支持快速创建 vue3/react19 以及 chrome 插件项目。