javascript - WebPack + WebExtensions/Chrome 扩展 - g

我正在使用 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/

相关文章:

git - 一个 git 子模块卡在错误的提交 ('submodule update' 不工作)

kotlin - 在 IntelliJ IDEA 中导入 kotlinx 是不可能的

sql-server - SQL Server Management Studio v18 的命令行

php - Docker 从容器内部复制 Composer 供应商

reactjs - 在 NavigationOptions 中调用 setstate React n

google-chrome-extension - Chrome 扩展程序 - 不在请求中发送 co

azure-active-directory - 企业应用程序中基于组角色的授权

angular - 如何在构造函数中选择性地注入(inject) MAT_DIALOG_DATA

python - 消息 : Error: Polling for changes failed: N

r - 在 ggplotly 散点图上添加辅助 x 和 y 轴