Chrome扩展添加content.ts后加载content.js失败，重载及构建报错求助

• 核对文件路径与webpack输出
  你在manifest里配置的"chrome/content.js"必须和webpack编译后的实际文件路径完全一致。默认webpack会把产物输出到dist或build目录，比如如果你的content.ts编译后生成在dist/content.js，那manifest里的路径要改成"dist/content.js"。
  打开webpack配置文件，查看output.path和output.filename的设置，确认content脚本的输出位置，再对应调整manifest里的路径。

• 确保webpack正确编译content.ts
  检查webpack的entry配置，必须将content.ts加入编译入口，示例如下：

  module.exports = {
    entry: {
      popup: './src/popup.ts',
      content: './src/content.ts' // 需包含该入口
    },
    // 其他配置项
  };
  

  执行webpack编译命令后，去输出目录确认content.js是否存在，路径是否和manifest配置匹配。

• 修正manifest的相对路径基准
  manifest.json的位置决定了路径的基准：

  • 如果manifest在项目根目录，路径是相对于根目录的；
  • 如果manifest被webpack复制到输出目录（比如dist），那content脚本的路径要相对于这个输出目录，比如直接写"content.js"（若content.js和manifest同目录）。

• 排查webpack插件干扰
  部分Chrome扩展模板会用CopyWebpackPlugin复制manifest到输出目录，此时要确保manifest里的路径是针对输出目录的，而非源码目录。比如manifest复制到dist/manifest.json，content.js也在dist下，那配置应为"content.js"而非"chrome/content.js"。

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