javascript - WebPack + WebExtensions/Chrome 扩展 - getBackground() 不工作

Question

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

我注意到了 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事件 - 或端口系统。请参阅 message passing 上的 chrome 教程获取更多信息。

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