
该错误源于 chrome 浏览器阻止非授权扩展资源被网页加载,本质是第三方扩展(如 quillbot)注入了外部字体文件,而其 manifest 未声明 `web_accessible_resources`,触发浏览器安全策略。解决方法是禁用相关扩展或切换为无扩展干扰的浏览环境。
这个错误 并不是你代码的问题,也和你的 index.html、styles.css 或 Node.js Live Server 完全无关——它是一个典型的 Chrome 浏览器扩展冲突问题。
错误信息中的关键线索是:
chrome-extension://iidnbdjijdkbmajdffnidomddglmieko/fonts/open-sans-v23-latin-regular.woff
这表示某个 ID 为 iidnbdjijdkbmajdffnidomddglmieko 的 Chrome 扩展(经查询,常见于 QuillBot for Chrome)正尝试向你的网页注入 Open Sans 字体文件。但该扩展的 manifest.json 中未在 web_accessible_resources 字段中声明该 .woff 文件,因此 Chrome 出于安全策略主动拦截,抛出明确提示:“Resources must be listed in the web_accessible_resources manifest key”。
✅ 正确且最简单的解决方案(适合新手):
- 点击 Chrome 右上角「拼图图标」→「管理扩展程序」;
- 找到 QuillBot for Chrome(或其他近期安装的写作/翻译类扩展,如 Grammarly、Wordtune);
- 将其开关关闭(或直接点击「移除」);
- 重启浏览器标签页(关闭并重新打开你的 Live Server 页面);
- 错误即消失,页面正常运行。
? 验证是否解决:
- 按 F12 打开开发者工具 → 切换到「Console」面板;
- 刷新页面,确认不再出现 Denying load of chrome-extension://... 类报错;
- 同时检查「Network」选项卡中字体请求(Filter 输入 woff)应显示 200 或已由本地 CSS 加载(而非扩展注入)。
? 进阶建议(可选):
- 开发期间,推荐使用 Chrome 的「无痕模式 + 禁用所有扩展」启动:按 Ctrl+Shift+N(Windows/Linux)或 Cmd+Shift+N(Mac),再访问 http://127.0.0.1:5500(Live Server 默认地址),彻底规避扩展干扰;
- 若必须使用某扩展,请联系其开发者反馈该安全警告——合规扩展应在 manifest.json 中显式声明:
{ "web_accessible_resources": ["fonts/*.woff", "fonts/*.ttf"] }
⚠️ 注意:不要尝试修改自己的 HTML/CSS 去“修复”这个错误——你无法控制第三方扩展的行为,强行重写字体路径或添加 @font-face 反而可能引发样式混乱。聚焦于环境排查,才是高效开发的第一步。










