javascript - 在 browser.runtime.getBackgroundPage() 中访问变量

Question

我目前正在构建一个以 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 吗？

Answer 1

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