已编译的 chrome 扩展不支持多个后台脚本答案

【问题标题】：Multiple background scripts not supported in compiled chrome extension已编译的 chrome 扩展不支持多个后台脚本
【发布时间】：2018-09-20 00:50:44
【问题描述】：

我正在尝试在 chrome 扩展中跨多个背景脚本共享功能。只要您将脚本添加到 manifest.json，这通常很容易/按设计工作，然后只要先加载另一个脚本，从 background.js 调用的函数就可以调用另一个脚本中的代码。

但是，我尝试了一些 Chrome 扩展生成器模板，这些模板具有使用 gulp 或 webpack 进行编译的步骤。（例如这个：https://github.com/samuelsimoes/chrome-extension-webpack-boilerplate）

但不幸的是，编译的 background.js 脚本中的函数共享中断。

我不知道当使用编译代码时，chrome-extension 架构中的“魔法”被打破了。

任何关于什么可能会阻止功能共享的建议/见解表示赞赏。有关实施的详细信息，例如webpack.config 等请参阅样板，因为这也是我正在使用的。

【问题讨论】：

这听起来像是样板文件的问题，因为在一个页面中使用多个脚本的能力并不神奇，它是任何基于 DOM 的页面（例如扩展背景页面）的基本能力，它应该只是工作。我想样板文件不希望您共享功能，它希望您通过 require() 或 ES-modules 使用模块。
仍在研究中，但我认为这可能是由于 webpack 作为捆绑过程的一部分所做的，如下所述：stackoverflow.com/questions/34357489/…
另外，发现如果我在共享脚本中使用 module.exports = { functionA: function A} 等显示所有函数，我可以使用 require 来使用这些函数。以前我没有导出函数（并且在不使用 webpack 时也不需要），但我想这可能是一个解决方案。

【解决方案1】：

在进一步研究后回答我自己的问题：

问题似乎是 webpack 将每个文件编译成一个模块，需要进行更改以适应这些文件之间的功能共享。

与其在每个后台脚本中添加 module.exports 语句，并且必须在我所有的函数引用前加上模块名称，我认为依靠 webpack（特别是 webpack-concat-plugin）来连接背景更容易文件放在一起。

【讨论】：