Chrome 扩展干扰本地网页资源加载的解决方案

该错误源于某 chrome 扩展（如 quillbot）试图注入字体等资源到你的本地 html 页面，但因 manifest v3 安全策略限制而被拦截；解决方法是临时禁用可疑扩展，而非修改项目文件。

这个错误 不是你代码的问题，也与 index.html、styles.css 或 node.js Live Server 本身无关。它是一条来自 Chrome 浏览器的安全警告，核心信息是：

Denying load of chrome-extension://…/fonts/xxx.woff. Resources must be listed in the web_accessible_resources manifest key…

这意味着：某个已安装的 Chrome 扩展（例如 QuillBot、Grammarly、广告拦截器、翻译插件等）正尝试向你的本地网页注入字体、脚本或样式资源，但该扩展未在它的 manifest.json 中正确声明这些资源为“网页可访问”——因此 Chrome 主动阻止了加载，并抛出此提示。

⚠️ 注意：你根本不需要、也不应该去编辑任何 manifest.json 文件（因为你没开发 Chrome 扩展），更无需配置 web_accessible_resources——这是扩展开发者要处理的事。

✅ 正确且唯一的解决步骤（面向初学者）：

1. 打开 Chrome 地址栏，输入并访问：
   chrome://extensions/
   （或点击浏览器右上角 ⋮ →「扩展程序」→ 开启右上角「开发者模式」）

2. 找到可能干扰网页的扩展：
   常见“嫌疑扩展”包括：

   • QuillBot for Chrome
   • Grammarly
   • Mate Translate / DeepL Web Translate
   • AdGuard / uBlock Origin（极少数情况下）
   • 任何近期新装、带“网页增强”“ai 写作”“自动填充”功能的插件

3. 逐个禁用测试：

   • 点击扩展右侧的「启用/禁用」开关 → 关闭一个
   • 切换回你的 Live Server 页面（如 http://127.0.0.1:5500/）
   • 刷新页面（Ctrl+R / Cmd+R）
   • 查看控制台（F12 → console）是否还出现该报错
   • 若消失 → 即为该扩展导致；若仍在 → 继续禁用下一个

4. 确认后，可选择：

   • ✅ 临时禁用该扩展（开发时关闭，用完再开）
   • ✅ 或点击扩展「详情」→「站点访问」→ 改为「在特定网站上启用」→ 移除 file://* 和 http://127.0.0.1:* 等本地地址（推荐）
   • ❌ 不要卸载——除非你确定不再需要它

? 小贴士：

• Live Server 启动的是 http://127.0.0.1:5500/（HTTP），不是 file:// 协议，因此部分扩展仍会尝试注入；
• 此错误不会影响页面正常运行（字体可能回退到系统默认，但功能完全不受限）；
• 如果你未来开发 Chrome 扩展，才需关注 web_accessible_resources 字段——但当前阶段完全无关。

总结：这不是编程错误，而是浏览器环境干扰。对新手最安全、最高效的解法就是——关掉那个多管闲事的扩展。专注写代码，让浏览器干干净净地跑你的 HTML 就好。