Chrome扩展开发：导入模块时出现net::ERR_FILE_NOT_FOUND错误

问题分析 #

控制台提示Failed to load resource: net::ERR_FILE_NOT_FOUND，核心原因是ES模块的使用不符合Manifest V3的规范，或是文件路径配置存在错误。

解决方案 #

1. 为options.js声明模块类型 #

在options.html中引入options.js时，必须给<script>标签添加type="module"属性，否则浏览器会将其当作普通脚本处理，无法识别ES模块的import语法：

<!-- options.html 中的脚本引用 -->
<script src="options.js" type="module"></script>

2. 校验文件路径准确性 #

确认commonActions.js与options.js的目录结构匹配：

• 若两者在同一目录下，建议在导入时加上.js扩展名避免解析歧义：

  import { search } from "./commonActions.js";
  

• 若目录层级不同，调整相对路径：比如options.js在/js/options/目录，commonActions.js在/js/目录，路径应改为../commonActions.js

3. 检查文件命名与扩展名 #

确保commonActions.js的文件名拼写无误（注意系统是否区分大小写），且文件扩展名确实为.js。

4. 确认Manifest配置正确性 #

你的manifest.json中options_page指向options.html的配置是正确的，只需保证options.html及关联JS文件的实际路径与配置对应即可。

修正后示例代码 #

• options.html：

<!DOCTYPE html>
<html>
<head>
  <title>Extension Options</title>
</head>
<body>
  <!-- 页面内容 -->
  <script src="options.js" type="module"></script>
</body>
</html>

• options.js：

import { search } from "./commonActions.js";

// 调用测试
console.log(search());

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