React+Webpack开发Chrome扩展：内容脚本注入React失败及解决

问题场景 #

基于React 19、TypeScript并使用Webpack编译的Chrome扩展项目，弹窗已成功集成React，但内容脚本overview.tsx在向页面注入元素时出现异常：

• 移除脚本中的React代码，仅保留console.log语句，控制台能正常输出内容；
• 一旦引入React相关代码，哪怕保留console.log，控制台也无任何输出。

排查过程 #

• 先后使用ts-loader和babel-loader处理tsx文件，结果一致：编译后的模块被包裹在IIFE中；
• 尝试通过chrome.scripting.executeScript注入脚本，API返回成功但无实际效果；
• 已在manifest.json中添加scripting和tabs权限；
• 更换ts/tsx文件的loader、添加全部权限、从后台脚本注入等操作均未解决问题。

最终解决方案 #

修改Webpack配置文件中的optimization.splitChunks配置，将原本的：

splitChunks: {chunks: "all"}

替换为：

splitChunks: {
  chunks(chunk) {
      // 排除overview内容脚本参与代码分割
      return !["overview"].includes(chunk.name);
  },
  // 保留原有其他splitChunks配置项
}

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