Chrome 扩展干扰本地网页字体加载:快速定位与禁用方案

3次阅读

Chrome 扩展干扰本地网页字体加载:快速定位与禁用方案

该错误并非项目代码问题,而是由 chrome 浏览器中某款扩展(如 quillbot)劫持并尝试加载本地字体资源所致;只需临时禁用相关扩展即可立即解决,无需修改 htmlcss 或配置 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 步完成)

  1. 打开 Chrome 地址栏,输入
    chrome://extensions/
    回车进入扩展管理页。

  2. 找到可疑扩展
    重点关注近期安装、带“写作辅助”“语法检查”“PDF 增强”“AI 改写”等功能的扩展,例如:

    • QuillBot for Chrome(报错中 chrome-extension://iidnbd… ID 已被社区确认属于此扩展)
    • Grammarly
    • wordtune
    • 知网研学、Sci-Hub Helper 等学术类工具
  3. 临时禁用 → 验证 → 永久卸载(可选)

    • 点击对应扩展右上角的开关,关闭其启用状态
    • 切换回你的 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 的安全保护;这不是你的代码要改,是你浏览器的某个“热心过头”的扩展该歇一歇了。禁用它,世界立刻清净。

text=ZqhQzanResources