徒手开根号二 » 日志
萌新的第一次小组件开发体验

{
"14":null,"15":null,"21":null,"23":"\uD83C\uDF7B","29":"\uD83D\uDCA2",
"37":null,"40":"\u2764\uFE0F","41":"\uD83D\uDE0D","44":"\uD83C\uDF38","46":null,
"49":"\uD83D\uDC40","51":"\uD83D\uDC94","53":null,"65":null,"79":"\uD83D\uDE05",
"83":"\u2728","89":null,"93":"\uD83E\uDD21","98":null,"101":"\uD83D\uDC4F",
"102":null,"08":null
}

-splitter-



https://bgm.tv/dev/app/2620

记录一下开发体验。第一次写js，纯粹照猫画虎。
目标是把站里的贴贴icon从辨识度有限的bgm表情包系列替换成更有区分度攻击性的emoji系列。

首先写了一个全局监听（DOMSubtreeModified），页面一有动静就扫描整个页面，把bgm替换成emoji。虽然全局监听很拖网站的反应的后腿，不过还是凑合着跑起来了。随后提交小组件、审核通过。我们姑且称之为版本A。

不过在版本A上，从bgm到emoji替换的mapping是hardcode在代码里、如果日后有任何bgm表情包的扩展、索引更改、或者是我单纯的想修改映射，都得再提交一份新的小组件以及再一次等待审核；于是在下一版本上、打算用GET从别的地方获取mapping，然后再应用到网页。github提供了非常方便的静态托管、轻松地实现了版本B。同时还写了个GET timeout的fallback，感觉万事大吉。

可随后便意识到墙内用户基本没法正常访问github这一事实，这使得版本B的预期目的几乎没有实现。自然而然的解决办法是使用国内可以访问的代码托管来实现静态api，比如gitee与gitlab。但这一企图很快不了了之，原因之一是相当不平衡的访问延时，墙内和墙外总有一边的延时会明显到几百毫秒（cache或许是可行解决方式）、更严重的问题在于：不同于github，这两个备胎直接给我扔了403。一个免费的、稳定的、延迟平衡的静态api实现是版本C亟续解决的问题。

一拍脑袋，bgm的用户日志不就是免费公开又稳定的托管渠道么：得益于cloudflare遍布全球的分发节点、国内国外访问bgm日志都非常快捷；GET一下日志页面，parse出其中重要的内容不就行了。由于牵涉到emoji、沿途还需要解决表情包的编码问题。另一方面，早就听闻bgm有反爬虫策略，单位时间的GET响应有限，于是用sessionStorage做了local cache，一并节约了parse html的时间（但后来才发现浏览器本来就会帮你做cache，根本不用担心）。额外的参照chrome warning的建议，把全局监听改成了mutationObserver，扫描触发少了一个数量级、应该不用再担心影响网页响应了。版本C曲折地完成（提交审核中）。

萌新第一次写userscript、一点一点拿着console logout；不过还算是挺有意思的体验。