WebPack + WebExtensions/Chrome扩展- getBackground()无法工作

Question

我正在使用WebExtensions API和网络扩展.浏览器填充 (通过webpack和RequireJS)开发一个具有相同代码基的Firefox/Chrome /Extension。

我注意到了Firefox要求代码在提交版本时不受混淆和不受限制。，因此不得不安装unminify-webpack-plugin 这里。

我遇到的最后一个问题是，由于webpack将所有所需的文件都包含在一个文件中(通常是这样)，所以browser.extension.getBackground() 这里的功能无法工作，因为我的background.js中的所有函数都添加到一个匿名模块函数中。

对我如何解决这个问题有什么建议吗？

编辑1:这里有一些更多的见解，

我的文件夹结构如下：

plugin/
├── wepback.config.js
├── manifest.json
├── package.json
├── package-lock.json
├── node_modules/
├── *dist/
├── img/
│   ├── icon.png
│   ├── ... etc
├── src/
│   ├── background/
│   │   ├── background.js
│   │   └── background.html
│   └── popup/
│       ├── popup.js
│       └── popup.html

其中，我的配置如下：

const path = require('path');
const CopyPlugin = require('copy-webpack-plugin');
var UnminifiedWebpackPlugin = require('unminified-webpack-plugin');

module.exports = {
  entry: {
    background: './src/background/background.js',
    popup: './src/popup/popup.js'
  },
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "[name]/[name].min.js"
  },
  plugins: [
    new CopyPlugin([
      { from: './src/background/background.html', to: 'background/background.html'},
      { from: './src/popup/popup.html', to: 'popup/popup.html'},
      { from: './src/popup/popup.css', to: 'popup/popup.css'},
      { from: './manifest.json', to: 'manifest.json'},
      { from: './img', to: 'img/[name].[ext]'},
    ]),
    new UnminifiedWebpackPlugin()
  ],
};

编辑2:

找到了以下看上去很有前途的锅炉板。这看起来确实是一个问题，一旦解决了，就可以被重用了--所以我很快就会试一试，把我的项目移过去并进行测试。

https://github.com/fstanis/webextensions-webpack-boilerplate

Answer 1

解决这一问题的最佳方法是使用extension的消息系统、sendMessage函数和onMessage事件--或者端口系统。有关更多信息，请参见chrome关于讯息传递的教程。

或者，您可以直接访问背景页面中的window对象--例如，使用window.foo = 'bar'。然后，getBackgroundPage()将如预期的那样工作。在上下文中直接修改或访问变量是一种轻微的错误做法，我猜想通过window对象访问变量也可能是这样，但我认为这可能是好的，因为这是getBackgroundPage()的目的。