访问 browser.runtime.getBackgroundPage() 中的变量

Question

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

下面 returns 一个 "variable not defined" 错误和 "page.foo() is not a function".

// 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 吗？

Answer 1

事实证明 webpack 将我的后台脚本包装在其他一些函数中，这是破坏性的东西。您可以像 wOxxOm 建议的那样，通过 window.foo = foo 手动将内容附加到后台脚本中的 window 对象。