使用Browserify打包Chrome扩展脚本时遇puppeteer-core模块找不到错误

核心问题 #

你遇到的模块找不到错误只是表象，本质是Chrome扩展的沙箱运行环境不支持Node.js核心API和puppeteer这类依赖Node环境的库：

• puppeteer依赖Node.js的child_process模块启动浏览器进程，这在Chrome扩展中被完全禁止
• fs是Node.js专属模块，Chrome扩展没有文件系统读写权限，必须用扩展原生API替代
• Browserify只能处理CommonJS模块语法，无法抹平Node环境与浏览器沙箱的本质差异

重构方案 #

1. 移除puppeteer，改用IMDb直接搜索逻辑 #

放弃通过Google搜索抓取IMDb ID的思路，直接利用easyimdbscraper的搜索能力获取目标ID，绕开需要启动浏览器的逻辑。

2. 替换Node.js的fs模块为Chrome扩展存储API #

Chrome扩展中禁止读写本地文件，改用chrome.storage.local存储爬取到的电影数据。

3. 适配Chrome扩展的生命周期 #

扩展弹出页需要等待DOM加载完成后再执行业务逻辑，不能直接在脚本顶层调用入口函数。

修改后的代码示例 #

// popup.js
const imdbScraper = require('easyimdbscraper');

// 等待DOM加载完成后启动逻辑
document.addEventListener('DOMContentLoaded', async () => {
  await main();
});

async function getMovieId(movieTitle) {
  // 直接用easyimdbscraper搜索获取IMDb ID
  const searchResults = await imdbScraper.search(movieTitle);
  return searchResults[0]?.id || null;
}

async function getInfoAboutMovie(movieId) {
  if (!movieId) return null;
  const info = await imdbScraper.getInfoByID(movieId);
  // 用Chrome本地存储替代fs.writeFile
  await chrome.storage.local.set({ movieInfo: info });
  console.log('数据已存储到扩展本地存储');
  return info;
}

async function changeData(info) {
  const imgElement = document.querySelector(".resim");
  if (imgElement && info?.poster) {
    imgElement.src = info.poster;
    console.log('海报已更新');
  }
}

async function main() {
  let movieTitle = 'spiderman across';
  const movieId = await getMovieId(movieTitle);
  const movieInfo = await getInfoAboutMovie(movieId);
  await changeData(movieInfo);
}

额外配置说明 #

1. Browserify打包调整：
   打包时排除不支持浏览器环境的模块：

   browserify popup.js -o bundle.js --ignore puppeteer --ignore fs
   

2. 扩展权限配置：
   在manifest.json中添加必要权限：

   {
     "manifest_version": 3,
     "name": "电影信息爬取工具",
     "version": "1.0",
     "permissions": ["storage"],
     "host_permissions": ["https://*.imdb.com/*"],
     "action": {
       "default_popup": "popup.html"
     }
   }
   

3. popup.html结构：
   引入打包后的脚本并包含海报显示元素：

   <!DOCTYPE html>
   <html>
   <body>
     <img class="resim" alt="电影海报">
     <script src="bundle.js"></script>
   </body>
   </html>
   

关键注意事项 #

• Manifest V3禁止远程代码执行，需确保easyimdbscraper的实现不包含动态加载远程脚本的逻辑
• 所有网络请求对应的域名必须在host_permissions中声明，否则会被浏览器拦截

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