前言

本人算是个浏览器插件重度使用者，在用各种各样的插件，因此对其也比较感兴趣。

这个时间恰巧几个事情凑在了一起：

• 工作摸鱼时间长
• 想学下 React，毕竟更主流
• 发现 anime1 追番存在的痛点，并且通过浏览器插件解决是最好的
• 正好看到了 Randy 写的这篇 现代浏览器插件开发指南

在这个插件之前，我花了很长一段时间在写一个番剧客户端，这个项目在 Animeko 之前就开始做了，与 Animeko 定位不同，我想做的是一个 wiki / api / 统一追番管理 站点，做出通用的番剧匹配，结合各大网站的数据进行输出。Animeko 出来之后，也有工作忙的原因，后来就没怎么做了。（感兴趣接手的务必来细聊）

Randy 的开发指南给了我正确的方向，让我在学习途中基本没遇到什么阻碍，不过内容偏少，只能作为最基础的入门。而本插件的内容要多很多。

正题

插件地址：enhanced-anime1

技术栈：typescript, wxt, vite, tailwind

代码行数统计：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

(py) iyume@WIN-0E9NMHBTRLL:~/workspace/enhanced-anime1$ cloc . --vcs git
      62 text files.
      60 unique files.
       3 files ignored.

github.com/AlDanial/cloc v 2.06  T=0.08 s (789.9 files/s, 151346.8 lines/s)
-------------------------------------------------------------------------------
Language                     files          blank        comment           code
-------------------------------------------------------------------------------
TypeScript                      50            246           1565           5123
YAML                             1             19              3           4120
CSS                              2             16             10            134
JSON                             3              3              0            107
JavaScript                       2             13             14            100
Markdown                         1              8              0             13
Bourne Shell                     1              0              0              2
-------------------------------------------------------------------------------
SUM:                            60            305           1592           9599
-------------------------------------------------------------------------------

总的开发时间其实不算很长。一开始在纠结要不要和 bangumi 集成一起做了，想来想去问题有很多，其中包括需要做动漫 mapping （就是将 anime1 的动漫匹配到 bangumi / MyAnimeList 上面）这个工作量是很大的，虽然有看到相应的工具，不过起一个服务器 / Worker 肯定是少不了的。

对于 bangumi 的集成，我最终只写了一个 OAuth worker 登录和一些 api。想要做到想象中的模样，包括评分、评论、海报、收藏同步、观看进度同步，这个工作量实在是太恐怖了。

为了理解 React 的工作原理，同时也有 tailwind vdom 集成性不好的原因，编写插件所用到的 React Hooks 和 Components 均是纯手写的。

简单提一下遇到过的几个难点：

• oauth 登录授权时，本地不好存 app secret 有安全性问题，需要通过 worker 去搞，浏览器拓展 ID 变了的时候会有问题
• vdom cssvar 和 @media 隔离问题，研究了很久，结果是隔离不了
• vdom 的 UI 配色需要和网站主题一致，暗色模式切换需要想办法监听

写完之后就打包发到 Firefox / Chrome 上面了。Firefox 一周就审查完了，Chrome 大约是两周。发布之后也去 anime1 dc 社区发了条消息宣传下，看起来大家都挺喜欢的。

感想

插件的效果还是不错的，自己用了半年体验非常棒，也推荐在用 anime1 看番的人来用一下。

浏览器插件的编写难度是比 electron 低很多的，只要理解了前台任务和后台任务的交互和生命周期、UI 注入大概就行了，其余都是原生 DOM 开发的基础知识。开发期间甚至还给 wxt 提了个 pr。

对于 React 虽然不能说完全掌握了，但绝对可以说 react-client 的内容掌握了七七八八。这就不得不说 React 真是个畜生工具，最让我头疼的就是 re-render 要在各种地方控制它，一会儿是父组件触发的，一会儿是某个地方没包 memo 触发的，一会儿是一个我根本用不到的状态触发的（比如 useQuery）

这个项目是比较扭曲的，将原生监听、React、持久化糅合在了一起，不推荐初学者去学习。浏览器插件需要一个灵活的设计去支持，比如用 vue 去搞。