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

问题描述 #

在Chrome Manifest V3扩展的popup.js中导入fetchTabDataFunc时，出现Failed to load resource: net::ERR_FILE_NOT_FOUND错误，已在popup.html中设置type="module"，manifest.json也配置了模块类型。

解决方案 #

1. 补全导入路径的文件扩展名 #

ES模块导入要求必须指定完整的文件扩展名，你的popup.js中导入语句缺少.js后缀，导致Chrome无法找到文件。

修改popup.js中的导入代码：

// 原代码
import fetchTabDataFunc from "./fetchTabDataFunc";

// 修改后
import fetchTabDataFunc from "./fetchTabDataFunc.js";

2. 确认文件名与路径匹配 #

检查根目录下的fetchTabDataFunc.js文件名是否完全一致（注意大小写，Chrome扩展会严格区分文件名大小写），确保相对路径./fetchTabDataFunc.js指向正确的文件。

3. 重新加载扩展并清除缓存 #

修改代码后，在Chrome扩展管理页面（chrome://extensions/）点击重新加载按钮，确保新代码被加载。若存在缓存问题，可勾选开发者模式后点击更新，或重新打包加载扩展。

额外优化建议 #

• fetchTabDataFunc.js中未声明tabData变量，建议添加const避免全局变量污染：

  const fetchTabDataFunc = async (linkContainer) => {
      try {
          console.log("i am in fetch func")
          const tabData = await chrome.tabs.query({}); // 声明局部变量
          const ul = document.createElement('ul');
          linkContainer.appendChild(ul);
          if (tabData) {
              ul.innerHTML = tabData.map((tab) => {
                  return `<li>${tab.title}</li>`
              }).join('');
          }
          console.log(tabData);
          return tabData;
      } catch (error) {
          console.log(error);
          throw error;
      }
  }
  
  export default fetchTabDataFunc;
  

• popup.js中调用异步函数时建议添加await，确保逻辑顺序正确：

  btn.addEventListener('click', async () => {
      console.log("i am in popup.js btn")
  
      if (tabData.length == 0) {
          tabData = await fetchTabDataFunc(linkContainer);
      }
  });
  

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