我正在使用 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
最佳答案
解决此问题的最佳方法是使用扩展 API 的消息系统,使用 sendMessage功能和onMessage事件 - 或端口系统。请参阅 message passing 上的 chrome 教程获取更多信息。
或者,您可以直接在后台页面中访问 window
对象 - 例如,使用 window.foo = 'bar'
。然后 getBackgroundPage()
将按预期工作。跨上下文直接改变或访问变量是一种不太好的做法,我猜想通过 window
对象访问变量也可能是这样,但我认为这可能没问题,因为这就是 getBackgroundPage( )
无论如何都是为了。
关于javascript - WebPack + WebExtensions/Chrome 扩展 - getBackground() 不工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56354970/