
该错误并非项目代码问题,而是由 chrome 浏览器中某款扩展(如 quillbot)劫持并尝试加载本地字体资源所致;只需临时禁用相关扩展即可立即解决,无需修改 html、css 或配置 manifest 文件。
你看到的这条报错:
Denying load of chrome-extension://iidnbdjijdkbmajdffnidomddglmieko/fonts/open-sans-v23-latin-regular.woff. Resources must be listed in the web_accessible_resources manifest key in order to be loaded by pages outside the extension.
并不是你的 index.html 或 styles.css 出了错,也不是 Node.js Live Server 配置的问题——它根本与你的代码无关。这是一个典型的 浏览器扩展越权行为触发的安全拦截。
? 错误本质解析
Chrome 为保障安全,严格限制扩展程序向普通网页注入或加载资源(如字体、脚本、图片)。当某个扩展(例如 QuillBot for Chrome、Grammarly、某些 PDF 工具或广告增强插件)试图将自身内置字体(如 open-sans-v23-latin-regular.woff)“偷偷”注入你本地运行的网页时,Chrome 会主动阻止,并抛出上述提示——它是在说:“这个扩展没在 manifest 中声明允许外链加载该字体,我拒绝执行”。
⚠️ 注意:你甚至没有在 CSS 中显式引用该字体,它可能是扩展自动注入的样式表所触发的,因此你在 index.html 和 styles.css 中完全找不到对应代码。
✅ 解决步骤(新手友好,3 步完成)
打开 Chrome 地址栏,输入:
chrome://extensions/
回车进入扩展管理页。-
找到可疑扩展:
重点关注近期安装、带“写作辅助”“语法检查”“PDF 增强”“AI 改写”等功能的扩展,例如:- QuillBot for Chrome(报错中 chrome-extension://iidnbd... ID 已被社区确认属于此扩展)
- Grammarly
- Wordtune
- 知网研学、Sci-Hub Helper 等学术类工具
-
临时禁用 → 验证 → 永久卸载(可选):
- 点击对应扩展右上角的开关,关闭其启用状态;
- 切换回你的 Live Server 页面(通常是 http://127.0.0.1:5500/),刷新页面(Ctrl+R / Cmd+R);
- 若控制台错误消失、字体正常显示,即确认定位成功;
- 如无需该扩展,可点击「移除」彻底卸载,避免后续干扰开发环境。
? 补充建议
- 开发期间保持扩展最小化:建议新建一个 Chrome 用户配置文件(设置 → 用户 → 添加),专用于前端开发,并仅启用必要扩展(如 Vue Devtools、React Devtools);
- 不要尝试修改 manifest.json:该错误不发生在你的项目中,你的项目根本没有 manifest.json 文件(那是 Chrome 扩展才需要的),强行添加反而误导方向;
- Live Server 本身无害:VS Code 的 Live Server 插件只是起一个本地 HTTP 服务,它不会注入任何扩展资源——根源永远在浏览器端。
✅ 总结一句话:这不是 bug,是 Chrome 的安全保护;这不是你的代码要改,是你浏览器的某个“热心过头”的扩展该歇一歇了。禁用它,世界立刻清净。










