hcfyapp / crx-selection-translate

一站式划词 / 截图 / 网页全文 / 音视频翻译扩展。
https://hcfy.app
4.06k stars 539 forks source link

直接打开React Query文档页面会加载失败 #1993

Open Xy2002 opened 2 months ago

Xy2002 commented 2 months ago

基本信息

划词翻译版本: 10.6.2 浏览器版本:124.0.6367.60 (正式版本) (arm64) 操作系统:macOS Sonoma 版本14.4.1 (23E224)

重现问题的步骤

  1. 直接打开React Query文档
  2. 页面白屏

预期行为

应该能正常加载出页面

实际行为

页面白屏,控制台显示React相关的错误

补充信息

我推测是划词翻译扩展向页面添加节点导致页面在水合过程中发生错误(并且,在SSR的网站里,如果启用网页全文翻译功能,然后点击任意一个a标签,都会报错),附上一条控制台的报错:DOMException: Failed to execute 'appendChild' on 'Node': Only one element on document allowed.

即使我在划词翻译扩展内禁用了该网页,但是划词翻译仍会注入一个DOM节点,我希望当我在划词翻译扩展内针对某个网站进行禁用后,划词翻译不会再向页面内注入DOM节点。

lmk123 commented 2 months ago

感谢反馈,已重现。相关 issue #1923

我希望当我在划词翻译扩展内针对某个网站进行禁用后,划词翻译不会再向页面内注入DOM节点。

这样做也没有用,因为划词翻译的很多功能都会往 DOM 注入节点,而“针对某个网站禁用”仅仅只表示划词后不会再弹出翻译按钮了

Xy2002 commented 2 months ago

感谢反馈,已重现。相关 issue #1923

我希望当我在划词翻译扩展内针对某个网站进行禁用后,划词翻译不会再向页面内注入DOM节点。

这样做也没有用,因为划词翻译的很多功能都会往 DOM 注入节点,而“针对某个网站禁用”仅仅只表示划词后不会再弹出翻译按钮了

那可以让用户设定一个时间作为setTimeout的参数去往DOM注入节点吗,这样就可以一定程度上避免SSR类网页水合失败的问题

lmk123 commented 2 months ago

加 setTimeout 参数不算是一个好的解决方案,首先不懂技术的用户不会知道这个参数是干嘛的,他们仍然会遇到这个问题;其次这个等待时间会作用在所有网站里,也就导致划词翻译在不是 ssr 的网站里也会需要在一秒后(假如设为了一秒)才响应用户的操作

最好的办法是能自动检测出当前网站是不是一个 ssr 网站,然后来判断注入时机,但这个检测目前我没想到有什么方案 :joy:

Xy2002 commented 2 months ago

确实,这个解决方案我没有考虑全面,对于大部分用户都不适用。

对于自动检测当前网站是否是SSR网站这个解决方案,我觉得如果做一个比较粗略的检测应该是不难的,我用过几款检测技术栈的扩展(例如wappalyzer)基本都是用JS去检测特征和人工标记去实现检测功能的,不过我觉得划词翻译不需要实现那么精准的检测😂

据我目前的经验,在一般情况下,CSR框架的root节点基本是div.id=root,对应的,SSR框架会改成相应的框架名称,例如__next,__nuxt等,这是最简单的检测方法,像Remix之类的框架可能就不太适用。

另外,这个扩展vue-telescope-analyzer可以用来检测Vue相关技术栈,可以看看这个项目的源码,它还是挺准确的,只要开发者不主动抹掉那些特征。

希望作者可以快点想出好办法,有时候看一些文档真的很难受😭