360 浏览器 Ai 插件导致的事故，前端小白一场酣畅淋漓的 bug 寻找之路

公司一个 toC 的网站，突然在近期大量收到客户反馈在 360 浏览器 中打开 一直转圈,无法正常加载页面，无法正常操作。

一开始我们部门本地下载 360 浏览器 测试没问题，只有个别客户有这个问题，没研究出来是什么导致的。尝试过：

1. 清理浏览器缓存


2. 使用无痕访问


3. 禁用所有浏览器插件


4. 关闭所有可疑设置


5. dev tools 中禁止插件的 css 、js 加载

问题依旧，最后试了下重装 360 浏览器，问题解决了。然后就开始了漫长的客服转接客户，让客户自己重装或者帮客户远程重装浏览器的工作。

事情的转机是昨天，昨天突然又新增一批客户反馈 360 浏览器 打开网页转圈，我们测试发现本地也有这个问题，并且重装已经解决不了问题了！！！只能推荐客户更换 Chrome 或者 Edge 。

客户用惯了 360 浏览器，有书签、浏览历史、密码记录，并且不想多装软件，担心多安装的软件让系统卡顿（小声 bb：难道 360 浏览器不是更毒瘤吗？）并且

「别的网站、同类网站在 360 浏览器是正常的，就你们的不行，这就是你们的问题」

没办法只能硬着头皮找问题，开始尝试联系 360 浏览器 工程师、客服，在 360 论坛中发帖，试了下我司别的站点，发现凡是我司的站点就都有问题，明明项目有的是 vue2 ，有的是 vue3 应该不是架构的问题，开始找共同点：域名？服务器？用到的 npm 包？

最后在一次机缘巧合下我在 360 浏览器 dev tools 来源面板点击了调试的 暂停⏸ 按钮，发现停在了 vendor.js 中，运行再暂停，又回到了这里，代码没有混淆加密上下看了下，是一个 水印插件「 watermark-js-plus 」，立即注释掉水印插件的代码，发现问题完美解决了。这个时候 360 浏览器 的工程师 QQ 上才联系我，我给他反馈了问题，并且去水印插件 github issues 准备反馈问题，才发现有人已经在一天前反馈了问题。

我开始找问题出现的根本原因，最后定位到是 360 浏览器 近期更新了 Ai 插件，插件会自动往 body 最后插入一个 #ai-assistant 节点，水印插件使用了 MutationObserver api 监听 body 节点的变化，当水印节点不是 body 最后一个元素就会销毁并在最后插入一个新的水印节点，Ai 插件发现自己不是 body 最后一个节点就会把自己插入到最后一个节点。

所以为什么 360 浏览器 要把自己插到 body 最后？并且在插件列表中找不到这个插件，无法禁用。关闭所有 ai 设置功能后仍在往页面中插入 ai 节点？？？

最后的解决方案：水印组件提供了「 mutationObserve 」监听配置，设置为 false 即可，又或者修改水印挂载位置，不要挂载到 body 最后即可。

我已投降，我已绝望，我已崩溃，我已无助，一直没遇到过这么奇怪的问题，真的搞得人头都大了。

挂个 github issues 吧： https://github.com/zhensherlock/watermark-js-plus/issues/1396