在 browser.runtime.getBackgroundPage() 中访问变量答案

【问题标题】：Accessing variables in browser.runtime.getBackgroundPage()在 browser.runtime.getBackgroundPage() 中访问变量
【发布时间】：2019-06-09 03:09:39
【问题描述】：

我目前正在构建一个以 create-react-app 为基础的浏览器扩展，尝试使用 getBackgroundPage() 而不是消息传递 API 在后台脚本（我定义了 3 个）和新标签页之间进行通信，但它似乎在新标签页中调用 browser.runtime.getBackgroundPage() 会返回一个 Window 对象，而没有我作为 Window 属性附加的后台脚本中的任何函数或变量。

以下返回“变量未定义”错误和“page.foo() 不是函数”。

// background_3.js

var test = [];

// Some stuff so webpack doesn't get rid of the unused variable.
for (let i = 0; i < 10; ++i) {
    test.push(i);
}

function foo() {
    console.log("foo");
}

// New Tab React page
import browser from "webextension-polyfill";

browser.runtime.getBackgroundPage()
    .then(page => {
        console.log(page.test);
        page.foo();
    });

我做错了什么吗？我应该只使用消息 API 吗？

【问题讨论】：

它应该像书面的那样工作。对该错误的唯一解释是您实际上使用了词法范围的声明，例如 const 或 let 而不是 var 和一个全局函数。或者也许你的捆绑器/编译器将后台脚本代码包装在 IIFE/whatever 中。
我使用create-react-app 作为我的基础。只是看了一下构建输出中的脚本，它看起来像是被包装在另一个函数中。如果不通过npm eject 拉出东西，我能做些什么还是我在这里不走运？
您可以手动公开window.foo = foo等内容。
看起来有效。谢谢！

标签： javascript google-chrome-extension firefox-addon-webextensions webextension-polyfill

【解决方案1】：

原来 webpack 正在将我的后台脚本包装在其他一些函数中，这就是问题所在。您可以像 wOxxOm 建议的那样，通过 window.foo = foo 手动将东西附加到后台脚本中的窗口对象。

【讨论】：