WebPack + WebExtensions / Chrome扩展-getBackground（）不起作用

Question

我正在通过WebExtensions API和web-extensions-browser polyfill（通过webpack和RequireJS）开发具有相同代码库的Firefox / Chrome插件/扩展。

我注意到Firefox requires code to be unobfuscated and unminified when submitting a version，因此必须安装unminify-webpack-plugin here。

[我遇到的最后一个问题是，由于webpack在一个文件中包含了所有必需的文件（通常如此），browser.extension.getBackground() here的功能不起作用，因为我的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

解决此问题的最佳方法是使用扩展API的消息系统以及sendMessage函数和onMessage事件-或端口系统。有关更多信息，请参见chrome的message passing教程。

或者，您可以直接在后台页面中访问window对象-例如，使用window.foo = 'bar'。然后getBackgroundPage()将按预期工作。直接在上下文中变异或访问变量是一种较差的做法，我猜想通过window对象访问变量也可以，但是我认为这很好，因为无论如何getBackgroundPage()都打算这样做。