Chrome扩展字体加载问题解决方法

你是否在本地开发时突然遇到字体加载失败的报错，控制台赫然显示“Denying load of chrome-extension://...fonts/...woff”，却翻遍HTML、CSS和配置文件都找不到问题根源？别慌——这根本不是你的代码出了错，而是Chrome中某个“热心过头”的扩展（如QuillBot、Grammarly等）试图偷偷注入自身字体资源，触发了浏览器严格的安全拦截机制；只需三步：打开chrome://extensions/、定位并临时禁用可疑扩展、刷新页面，错误立即消失，字体恢复正常。这不是bug，是Chrome在保护你；解决方法简单到无需改一行代码，只需让那个越界的插件安静一会儿。

该错误并非项目代码问题，而是由 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 步完成）

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 的安全保护；这不是你的代码要改，是你浏览器的某个“热心过头”的扩展该歇一歇了。禁用它，世界立刻清净。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《Chrome扩展字体加载问题解决方法》文章吧，也可关注golang学习网公众号了解相关技术文章。