使用Node.js Live Server遇Chrome扩展资源加载错误求解决方案

错误本质 #

这个错误和你的项目代码无关，是Chrome浏览器中某个扩展程序（ID: iidnbdjijdkbmajdffnidomddglmieko）的配置问题：该扩展的字体资源没有在它的manifest.json文件中声明为可被外部页面访问，导致你的Live Server页面加载时触发了权限限制。

详细解决步骤 #

步骤1：排查并定位问题扩展 #

1. 打开Chrome浏览器，点击右上角的「⋮」菜单 → 选择「更多工具」→「扩展程序」
2. 开启页面右上角的「开发者模式」开关
3. 点击所有扩展卡片下方的「禁用」，把所有扩展暂时关掉
4. 重新用Live Server打开你的项目页面，查看控制台错误是否消失
5. 如果错误消失，逐个重新启用扩展，每次启用后刷新页面，直到错误再次出现——此时启用的那个扩展就是问题根源

步骤2：处理问题扩展 #

找到问题扩展后（就是ID为iidnbdjijdkbmajdffnidomddglmieko的那个），优先选择以下简单方案：

• 直接卸载扩展：在该扩展的卡片上点击「移除」，确认卸载后重启Chrome，再运行Live Server即可解决
• 如果你不想卸载扩展（不推荐新手操作）：需要修改该扩展的manifest.json，添加web_accessible_resources字段声明对应的字体资源，但扩展更新后修改会被覆盖，操作复杂，不建议

步骤3：确认项目代码无关联引用 #

检查你的styles.css文件，确认有没有类似下面的代码：

@font-face {
  font-family: 'Open Sans';
  src: url('chrome-extension://iidnbdjijdkbmajdffnidomddglmieko/fonts/open-sans-v23-latin-regular.woff') format('woff');
}

如果有，删掉这段代码，换成本地字体或者公开的CDN字体（比如Google Fonts的Open Sans），示例：

<!-- 在index.html的<head>中添加Google Fonts引用 -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet">

/* 在styles.css中使用 */
body {
  font-family: 'Open Sans', sans-serif;
}

内容的提问来源于stack exchange，提问作者Harshit