浏览器扩展版本的进度 🚀

[beijixiaohu]

该脚本即将推出浏览器扩展（又称浏览器插件）版本✨

🔧 规划：

• 计划分为两个扩展，一个专注于任意网站的翻译和汉化，名称待定；一个整合当前 OJ Better 各个插件的小功能，名称仍然为 OJ Better。
• 其中翻译扩展将会仅提供浏览器扩展版本，而 OJ Better 扩展将同时提供篡改猴（Tampermonkey）版本。

🔒 新的扩展将：

• 继续开源，届时欢迎贡献代码。
• 采用现代前端开发的主流工具链，这将使代码更易读、易于协作和扩展，并更容易实现跨浏览器兼容。

📜 关于旧的脚本：

• 新的扩展发布后，旧的脚本将仅进行维护，不再添加新功能，脚本会一直保留，敬请放心。

此外，作者会尽力维持良好的性能，至少不低于对应功能在市面上已有的商用扩展（如果有）。这相当复杂，当前已经顺利完成了一部分核心功能，预计还需数月的开发，敬请期待！✨

💬 作者会在讨论区中分享当前的进展和开发心得，欢迎有兴趣的朋友前往 #173 讨论。

[beijixiaohu]

🎉 网页全文翻译目前已经实现了主要功能

先说说目前的主要实现思路：

获取文本：

• 使用原生的 innerText 属性获取元素的可读文本，其排版接近实际看到的效果。
• 根据 innerText 返回的字符数，将页面拆分为若干个大块的元素区域，每块字符数不超过指定值。
• 对每块区域，将文本按照换行符和制表符分割成条，保存到 pageSegmentationMap: Map<HTMLElement, string[]>，因为 HTML 本身就是结构化的，因此每块内的字符是语义相关的，一起发送给翻译服务器可确保上下文，从而获得更好的翻译结果。

译文附着：

• 为每条文本添加唯一 ID 进行关联，使用双向映射 idToOriginalMap 方便根据原文查找id。
• 递归每个区域内的所有元素，判断每个元素的 innerText 是否在 idToOriginalMap 内。
• 若在，则递归查找可维持 innerText 不变的最小元素，创建容器插入到其内部后面（若为文本节点，则插入到外部后面）。
• 为实现样式隔离，以及减少对依赖网页上的原文文本来执行特定逻辑的 JS （通常是一些脚本）的影响，容器内使用 shadow dom。使用 idToShadowRootMap 保存各原文对应的 shadow root，便于后续响应式的实现。放弃了使用 shadow dom ，改为使用普通的 span 标签，因为会导致”元素保留“体验不佳，样式隔离使得译文中的保留的元素在shadow dom中显示异常。
• 此外，为保证尽量不破坏页面原本样式，会判断当前翻译结果是否导致了换行，如果产生了换行，则直接另起一行显示翻译结果，否则不换行显示，这样会更美观

翻译：

• 将每块的原文发送给翻译服务器，收到译文后将原文与译文关联，存入 idToTranslatedMap。

后文跟帖说，评论区因为过长会被折叠，点击下面蓝色的 Show previous reply 即可展开

[beijixiaohu]

再说说所做的性能优化：

任务队列：

扩展中利用 requestAnimationFrame 实现了一个基于屏幕刷新率的轮转任务队列，将页面分割和插入容器这两个长递归任务进行队列管理。

这得益于上述的依赖关系分离，通过轮转可以让"插入容器"任务更快的进行，而无需等待页面完全分割完成，让用户更早看到部分翻译结果。

此外，通过统计任务耗时，限制一次动画时间内的任务总耗时不超过 16ms，这样可以避免线程长时间阻塞，让交互事件可以正常响应。这也大幅缩短了渲染和绘制的总耗时。

缓存重计算：

由于 innerText 和元素可见性、换行检查等操作会导致页面重排重绘，是昂贵的计算，因此使用 Pinia 缓存，减少重排重绘的发生次数。

还有一些细节优化，作者一时想不起来了，有的话后面再补充

[beijixiaohu]

可以看到，总的来说，OJBetter的性能还是不错的，不会影响正常的网页浏览。

而且由于实现方式不同，这三个插件即使使用相同的翻译服务，得到的结果也有不少差别，

世上安得两全法，而且当前的方案也有很多改进的空间，如果你有更好的想法或者建议，欢迎分享🌹

[beijixiaohu]

值得一提的是，OJBetter 目前还未对任何网站做特殊优化，但是世上网站千千万，还是有很多布局比较奇葩但是又很常用的网站的，为此仍然需要对一些网站进行适配，（比如 medium 的文章底部推荐部分。。。）

关于如何更好的对特殊网站进行适配作者还没有想好，后续有进展了再来分享，感谢阅读

[ZZC2012]

把插件转给我呗，不是上次转我的那个啥也没有的插件

[beijixiaohu]

待功能相对完善后会提供测试版本

[ZZC2012]

OK

[ZZC2012]

不过你上次那个......真的是一言难尽呀。

[beijixiaohu]

🎉 现已实现页面中动态元素的翻译

下面分享下这两周所做的工作，

由于之前的网页全文翻译实现方式存在一些难以处理的问题：

• 无法区分上下文中的两段相同的文本，导致译文显示不全
• 难以实现页面动态元素的翻译，因为元素变动导致的文本变动难以追踪

经过了一段时间的研究，最终放弃了之前的原文获取的实现方式，改为了如下：

原文获取：

对于每一个切分块，不再如之前那样处理，而是将区块划分为一个个的翻译单元 translationUnit：

从块的根节点开始检查每个子节点。

• 如果节点是文本且可见，就积累到暂存列表。
• 如果遇到内联元素，继续递归检查其子节点。
• 如果遇到块级元素，就把当前积累的文本节点组合成一个翻译单元，然后清空暂存列表，继续递归处理子节点。
• 如果遇到表格，特殊处理：遍历每个单元格，把它们的内容提取出来，并为每个单元格生成一个翻译单元。

对于每一个翻译单元，使用 useNodeToIdMapStore 维护唯一 ID，方便追踪。

译文附着：

由于 translationUnit 中包含节点们的引用，因此添加译文容器非常简单，只需要添加到最后一个节点的后面即可，其他的基本与之前相同。

对了，上述词条获取的方式也带来了新的问题：

如果最后一个元素是包裹在 a、sub 、sup 内的，则可能导致大段地译文都被错误的包裹在其中，不美观且难以阅读（比如很多维基百科的页面）

这里目前是这样处理的：如果译文文本超过 20 字符，则认为被 a、sub 、sup 包裹是不易阅读的，

会向上查找祖先元素，直到找到不会被包裹的，将容器添加到其的后面。

[beijixiaohu]

还调整了翻译数据状态管理相关的流程，

去掉了 pageSegmentationMap 和对应的 subject，因为发现并不需要额外维护它们，都放在 segmentToData 中就行，

也对翻译数据更新逻辑进行了调整，这里就不啰嗦了

[beijixiaohu]

现在的实测截图（理论上来说应该性能会好很多，实际上好像变化不太大哈哈哈）：

测试网页链接：https://github.com/isaurssaurav/hot-reload-extension-vite-plugin/issues

测试网页链接：https://netflixtechblog.com/java-21-virtual-threads-dude-wheres-my-lock-3052540e231d

[ghost]

能不能加入一个 html to markdown with katex 的东西，有很多古老的题解翻译不了（12000字）

[beijixiaohu]

会有的

[beijixiaohu]

🎉 现已实现翻译任务中的一些关键模块

包括：缓存、限流、缓冲

缓存：

每一次翻译后，会将 翻译文本的 sha256 值 和 压缩的翻译结果数据（使用 lz-string ）存放在扩展的 indexdb 数据库中，

对于 sha256 相同的翻译文本，再次遇到时会直接从数据库中取数据，而不必再重复翻译。

限流：

使用令牌桶算法来限流，对于每个翻译服务，均可以单独设置其令牌池大小和令牌填充速率。

缓冲：

使用 RxJS 来合并小的翻译请求。

创建一个 translateSubject 来收集任务，每次收到新任务时，同时加入缓冲区 taskBuffer。

监听 ”定时器 timerBuffer“ 和 ”任务流 taskSubject“，当缓冲区中的字符数超过设置值或者时间到了时，缓冲区中的所有任务会被批量合并翻译。

[beijixiaohu]

🎉 本周进展

实现了译文样式切换和样式自定义

实现了"忽略与保持"相关的功能和自定义配置

[beijixiaohu]

实测截图：

https://codeforces.com/contest/2009/problem/A

https://codeforces.com/contest/167/problem/A

https://codeforces.com/blog/entry/4214

[ZZC2012]

加油，等插件相对完整时发在这里

[beijixiaohu]

🎉 本周进展

区域翻译

[beijixiaohu]

效果截图：

[beijixiaohu]

🎉 本周进展

现已部分实现网站本地化功能：

[beijixiaohu]

这一部分的实现非常复杂，预计还需三周以上的时间来完成

[wrk-123]

应该有批量添加/导出规则？

[beijixiaohu]

确实，此外后期计划提供一个后端平台，来支持协作，同步规则

[bakebakebakebake]

加油，我在等着用ipad打CF呢😀👍

[beijixiaohu]

感谢支持，但是ipad的支持优先级不会很高，因为之前搜了下，ipad的浏览器扩展要想上架商店，需要一年交99美元的开发者认证……

因此除非某一天起，扩展开始能获得正向收益，否则不会考虑

[bakebakebakebake]

原来是这样的么，那若上架浏览器拓展商店的话可能是得需要收费的🥲，如果是其他浏览器(非safari但似乎还是safari内核)的话呢可不可以支持这个插件呢

[beijixiaohu]

不行，ios系统上的浏览器都是safari套壳

mac上的chrome倒是可以

[ZZC2012]

发一下呗

[beijixiaohu]

做好了会发的，别着急

[ZZC2012]

所以你给出那么多截图，让人很想要一个！！

[wrk-123]

现在能不能提一下进展

[beijixiaohu]

感谢关注，这段时间很忙，所以项目整体进展不大，基本属于每天新增几行代码的情况。

而且现在需要实现的几个功能都是不好实现的那种，特别是”译文原文对照“这个功能，卡了很久，远比之前我想的要复杂，等这个实现了会再来这里分享一下思路。

[wrk-123]

感谢关注，这段时间很忙，所以项目整体进展不大，基本属于每天新增几行代码的情况。

而且现在需要实现的几个功能都是不好实现的那种，特别是”译文原文对照“这个功能，卡了很久，远比之前我想的要复杂，等这个实现了会再来这里分享一下思路。

如果实在太难的话可以先放一下

[beijixiaohu]

如果实在太难的话可以先放一下

这个功能已经基本实现啦

default.mp4

[wrk-123]

新年好，加油

[beijixiaohu]

目前进度在50%左右，还有很多工作没有完成，尤其是后端部分，我录几个gif展示下

[beijixiaohu]

这是网站汉化的“快捷添加规则“功能

default.mp4

[beijixiaohu]

这是单击扩展图标的弹出页以及单词本

2.mp4

[beijixiaohu]

划词

3.mp4

[beijixiaohu]

目前具体的功能进展就这些了，感谢关注