Webpack打包Chrome扩展后，service_worker与popup.js通信失效

1. 未将popup.js纳入Webpack打包范围 #

你的Webpack配置仅声明了background和content两个入口，但popup.js未被加入打包流程。如果popup.js内使用了import语句，未打包的代码会继续报错；同时通信逻辑若在popup.js中，未打包的脚本也无法正常与其他扩展脚本交互。

修改webpack.config.js的entry部分，补充popup入口：

entry:{
  background: './background.js',
  content: './index.js',
  popup: './popup.js' // 替换为你实际的popup.js文件路径
},

重新执行npm run build后，在popup的HTML文件中引用打包后的dist/popup.js。

2. 脚本引用路径错误 #

你在index.html中使用./dist/content.js引用脚本，但该HTML作为web_accessible_resource注入网页后，相对路径的基准是当前网页而非扩展根目录，会导致脚本加载失败。

改用扩展绝对路径引用，推荐通过chrome.runtime.getURL动态获取路径（避免硬编码扩展ID）：

<script></script>
<script>
  const script = document.createElement('script');
  script.src = chrome.runtime.getURL('dist/content.js');
  document.currentScript.parentNode.appendChild(script);
</script>

同时确保manifest.json的web_accessible_resources包含打包后的脚本：

"web_accessible_resources": [
  {
    "resources": ["dist/*.js", "index.html"],
    "matches": ["<all_urls>"] // 根据需求调整匹配的网址范围
  }
]

3. Webpack封装导致通信逻辑被隐藏 #

Webpack默认会将代码包裹在自执行函数中，原本处于全局作用域的消息监听逻辑（如chrome.runtime.onMessage.addListener）会被封装到局部作用域，导致其他脚本发送的消息无法被捕获。

解决方法有两种：

• 配置Webpack将打包后的代码挂载到全局window对象：

output: {
  path: path.resolve(__dirname, 'dist'),
  filename: '[name].js',
  libraryTarget: 'window' // 新增该行，让代码暴露到全局
},

• 在脚本中手动将监听逻辑挂载到window：

// 示例：在content.js中
window.messageHandler = chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  // 你的通信处理逻辑
});

4. Manifest未更新脚本路径 #

检查manifest.json，确认service_worker和content_scripts的路径指向打包后的dist目录文件，而非原始源文件：

"background": {
  "service_worker": "dist/background.js"
},
"content_scripts": [
  {
    "matches": ["<all_urls>"],
    "js": ["dist/content.js"]
  }
]

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