Next.JS页面底部出现多余分号的问题排查与解决求助

原因 #

这个多余的分号并非你的Next.js项目代码导致，而是来自一款ID为cmenipfkicambillfofhinidejiekggi的Chrome扩展（BUILDIT）。该扩展在向页面注入浮动按钮的DOM结构时存在代码错误——将本应属于代码逻辑的分号，意外作为文本节点插入到了页面中。由于扩展会自动向所有打开的页面注入内容，所以你的个人项目和Next.js Dashboard示例都会出现这个问题。

解决方法 #

方案一：直接禁用扩展 #

打开Chrome的扩展管理页面（输入chrome://extensions/回车），找到BUILDIT扩展并关闭开关，分号会立即消失。

方案二：修复扩展代码（如需继续使用） #

1. 在扩展管理页面开启「开发者模式」，找到BUILDIT扩展并点击「查看源代码」。
2. 定位到负责注入DOM的内容脚本文件（通常在content目录下）。
3. 找到生成<div id="BUILDIT-floating-button-container-root">的代码块，删除其中多余的";"文本节点。
4. 保存修改后，回到扩展管理页面点击「重新加载」按钮，页面就不会再出现多余分号了。

内容的提问来源于stack exchange，提问作者Harlan