crx-selection-translate
crx-selection-translate copied to clipboard
hcfyapp
插件 (11.6.0) 影响到了网站 shopify.dev 样式
基本信息
划词翻译版本：11.6.0 浏览器版本：135.0.7049.86 (正式版本) （64 位） (cohort: Control) 操作系统：Windows 11 Version 24H2 (Build 26100.3775)
重现问题的步骤
- 创建一个全新的 Google Chrome 账户
- 安装“划词翻译”插件
- 打开 shopify.dev 网站的某篇文档如 https://shopify.dev/docs/api/admin-graphql/latest/mutations/fulfillmentserviceupdate
- 网页加载完成，网站样式错乱
预期行为
禁用插件，网页正常显示
实际行为
启用插件，网页样式异常
补充信息
百分百复现问题（Edge 浏览器也有问题）
经过研究发现，插件会删除该网页的 <html> 标签的 class Mode-Light
可能是插件修改了网站 DOM 树，导致结构变更报错：https://react.dev/errors/418?invariant=418
| xx | xx |
|---|---|
第一次打开这个链接的时候，确实出现了这个问题。然后，我将我浏览器里除了划词翻译之外的所有插件全都关闭，再次刷新页面，这个页面恢复正常了，见文末图片。
划词翻译以及其它插件均可能会导致这个问题，因为大部分插件都会需要往你浏览的网页中插入自己的 DOM 元素用来展示界面，而这就会引起使用服务器端渲染的网站出现“服务器渲染的 DOM” 和“实际浏览器里的 DOM”结构不一样的问题。
划词翻译其实做过优化，会在确保网页已经渲染完成之后（大概是 0.5 秒）才会插入 DOM，当然这个时机可能不够准确，但目前我确实没有在仅开启划词翻译的情况下重现这个问题。
第一次打开这个链接的时候，确实出现了这个问题。然后，我将我浏览器里除了划词翻译之外的所有插件全都关闭，再次刷新页面，这个页面恢复正常了，见文末图片。
划词翻译以及其它插件均可能会导致这个问题，因为大部分插件都会需要往你浏览的网页中插入自己的 DOM 元素用来展示界面，而这就会引起使用服务器端渲染的网站出现“服务器渲染的 DOM” 和“实际浏览器里的 DOM”结构不一样的问题。
划词翻译其实做过优化，会在确保网页已经渲染完成之后（大概是 0.5 秒）才会插入 DOM，当然这个时机可能不够准确，但目前我确实没有在仅开启划词翻译的情况下重现这个问题。
@lmk123 你创建一个全新浏览器账户试一下呢？我是仅安装划词翻译插件测试的
@lmk123 实际上网页未加载完成时，这个 class Mode-Light 是存在的，网页样式就没问题
但是当划词翻译插件插入 DOM 时，这个 class 就不见了
再试了下，确实在仅开启划词翻译的情况下又重现了。
本质上还是得改造成懒加载的形式才能避免这个问题，但这个改动起来牵扯太大，我先放着吧。。
当划词翻译插件插入 DOM 时，这个 class 就不见了
划词翻译只是插入了 DOM，不会修改原网页的任何信息。这是 ssr 的时候发现 DOM 不一致导致的。
再试了下，确实在仅开启划词翻译的情况下又重现了。
本质上还是得改造成懒加载的形式才能避免这个问题，但这个改动起来牵扯太大，我先放着吧。。
当划词翻译插件插入 DOM 时，这个 class 就不见了
划词翻译只是插入了 DOM，不会修改原网页的任何信息。这是 ssr 的时候发现 DOM 不一致导致的。
OK，那我暂时写个脚本延迟为 <html> 添加 class 解决这个问题 😂。
setTimeout(() => document.querySelector(`html`).classList.add(`Mode-Dark`), 500)
最后感谢作者开发出那么好用的插件👍