Firebase 在 webextension 的后台脚本中不起作用

Question

我们浏览器扩展的用户通过 firebase 登录。 Firebase 发出的令牌持续 1 小时，但 Firebase SDK 中的 User 对象透明地处理令牌刷新。这就是为什么要在我的插件中包含 Firebase SDK。

在 webextension 的上下文中加载 Firebase js SDK 在 Firefox 中不起作用。它适用于 Chrome。我创建了一个测试存储库，它将测试用户登录到测试应用程序 here.

点击申请按钮后，应用程序将尝试登录用户。

对于 Firefox 55.0.2（Linux 64 位），在单击按钮之前会出现以下错误（仅通过加载插件）：

[firefox/index.js][debug] Firefox stderr: JavaScript strict warning: moz-extension://ec7f4b77-3e2d-48c6-8e27-bb75d93980d1/firebase.js, line 52: SyntaxError: test for equality (==) mistyped as assignment (=)?
[firefox/index.js][debug] Firefox stderr: JavaScript strict warning: moz-extension://ec7f4b77-3e2d-48c6-8e27-bb75d93980d1/firebase.js, line 57: SyntaxError: test for equality (==) mistyped as assignment (=)?
JavaScript strict warning: moz-extension://ec7f4b77-3e2d-48c6-8e27-bb75d93980d1/firebase.js, line 57: SyntaxError: test for equality (==) mistyped as assignment (=)?
JavaScript strict warning: moz-extension://ec7f4b77-3e2d-48c6-8e27-bb75d93980d1/firebase.js, line 82: SyntaxError: test for equality (==) mistyped as assignment (=)?
JavaScript strict warning: moz-extension://ec7f4b77-3e2d-48c6-8e27-bb75d93980d1/firebase.js, line 101: SyntaxError: test for equality (==) mistyped as assignment (=)?
JavaScript strict warning: moz-extension://ec7f4b77-3e2d-48c6-8e27-bb75d93980d1/firebase.js, line 106: SyntaxError: test for equality (==) mistyped as assignment (=)?
JavaScript strict warning: moz-extension://ec7f4b77-3e2d-48c6-8e27-bb75d93980d1/firebase.js, line 107: SyntaxError: test for equality (==) mistyped as assignment (=)?
JavaScript strict warning: moz-extension://ec7f4b77-3e2d-48c6-8e27-bb75d93980d1/firebase.js, line 125: SyntaxError: test for equality (==) mistyped as assignment (=)?
JavaScript strict warning: moz-extension://ec7f4b77-3e2d-48c6-8e27-bb75d93980d1/firebase.js, line 177: SyntaxError: test for equality (==) mistyped as assignment (=)?
JavaScript strict warning: moz-extension://ec7f4b77-3e2d-48c6-8e27-bb75d93980d1/firebase.js, line 272: SyntaxError: test for equality (==) mistyped as assignment (=)?
JavaScript strict warning: moz-extension://ec7f4b77-3e2d-48c6-8e27-bb75d93980d1/firebase.js, line 274: SyntaxError: test for equality (==) mistyped as assignment (=)?
JavaScript strict warning: moz-extension://ec7f4b77-3e2d-48c6-8e27-bb75d93980d1/firebase.js, line 396: SyntaxError: test for equality (==) mistyped as assignment (=)?
JavaScript strict warning: moz-extension://ec7f4b77-3e2d-48c6-8e27-bb75d93980d1/firebase.js, line 412: SyntaxError: test for equality (==) mistyped as assignment (=)?
JavaScript strict warning: moz-extension://ec7f4b77-3e2d-48c6-8e27-bb75d93980d1/firebase.js, line 471: SyntaxError: test for equality (==) mistyped as assignment (=)?
JavaScript strict warning: moz-extension://ec7f4b77-3e2d-48c6-8e27-bb75d93980d1/firebase.js, line 475: SyntaxError: test for equality (==) mistyped as assignment (=)?
JavaScript strict warning: moz-extension://ec7f4b77-3e2d-48c6-8e27-bb75d93980d1/firebase.js, line 477: SyntaxError: test for equality (==) mistyped as assignment (=)?
[firefox/index.js][debug] Firefox stderr: JavaScript strict warning: moz-extension://ec7f4b77-3e2d-48c6-8e27-bb75d93980d1/firebase.js, line 28: ReferenceError: reference to undefined property "name_"
[firefox/index.js][debug] Firefox stderr: JavaScript strict warning: moz-extension://ec7f4b77-3e2d-48c6-8e27-bb75d93980d1/firebase.js, line 285: ReferenceError: reference to undefined property "a"
[firefox/index.js][debug] Firefox stderr: JavaScript strict warning: moz-extension://ec7f4b77-3e2d-48c6-8e27-bb75d93980d1/firebase.js, line 28: ReferenceError: reference to undefined property "Auth"

然后在点击按钮后：

 [firefox/index.js][debug] Firefox stderr: JavaScript strict warning: moz-extension://ec7f4b77-3e2d-48c6-8e27-bb75d93980d1/firebase.js, line 279: ReferenceError: reference to undefined property "currentUser"
 [firefox/index.js][debug] Firefox stderr: JavaScript strict warning: moz-extension://ec7f4b77-3e2d-48c6-8e27-bb75d93980d1/firebase.js, line 59: ReferenceError: reference to undefined property "closure_lm_434254"
 [firefox/index.js][debug] Firefox stderr: JavaScript strict warning: moz-extension://ec7f4b77-3e2d-48c6-8e27-bb75d93980d1/firebase.js, line 54: ReferenceError: reference to undefined property "storage"
 [firefox/index.js][debug] Firefox stderr: JavaScript strict warning: moz-extension://ec7f4b77-3e2d-48c6-8e27-bb75d93980d1/firebase.js, line 176: ReferenceError: reference to undefined property "Va"
 [firefox/index.js][debug] Firefox stderr: JavaScript strict warning: moz-extension://ec7f4b77-3e2d-48c6-8e27-bb75d93980d1/firebase.js, line 176: ReferenceError: reference to undefined property "Oe"
 [firefox/index.js][debug] Firefox stderr: JavaScript strict warning: moz-extension://ec7f4b77-3e2d-48c6-8e27-bb75d93980d1/firebase.js, line 91: ReferenceError: reference to undefined property "readystatechange"

此外，控制台显示对 www.googleapis.com 的已阻止 CORS 请求（注意这个域在 manifest.json 的 CPS 指令中被列入白名单）和一个 Firebase 错误 auth/network-request-failed.

详细说明在自述文件中。

我的问题是：Firebase 是否不能与 Firefox 一起使用，或者我可以做些什么来让它工作？ 特别是，我是否遗漏了 manifest.json 还是我需要先通过 Babel 传输 Firebase SDK，因为 SpiderMonkey 不理解 V8 理解的一些 JS？

郑重声明，使用 Firebase 在网页中加载 Firebase 工作顺利。

编辑：MWE如下：

manifest.json

{
  "description": "Firebase & Firefox test case",
  "homepage_url": "https://github.com/adimit/test-firebase",
  "manifest_version": 2,
  "name": "firebase-test-case",
  "version": "1.0.0",

  "icons": {
    "64": "icons/logo-64.png"
  },

  "browser_action": {
    "browser_style": true,

    "default_icon": {
      "64": "icons/logo-64.png"
    }
  },

  "background": {
    "scripts": [
      "firebase.js", "background.js"
    ]
  },

  "content_security_policy": "script-src 'self' 'unsafe-eval' https://www.gstatic.com/ https://*.firebaseio.com https://www.googleapis.com; object-src 'self'",

  "permissions": [
    "tabs",
    "storage"
  ]
}

background.js:

const clickButton = () => {
  console.log("firebase object", firebase);

  var config = {
    apiKey: "AIzaSyABe5Ge-PSeZzfZU2EhllUI-w3fMb1nci8",
    authDomain: "webext-firefox.firebaseapp.com",
    databaseURL: "https://webext-firefox.firebaseio.com",
    projectId: "webext-firefox",
    storageBucket: "",
    messagingSenderId: "909758240321"
  };
  firebase.initializeApp(config);

  const user = {
    id: "no.email@example.com",
    password: "test-password"
  };

  firebase.auth().signInWithEmailAndPassword(
    user.id,
    user.password
  ).then(
    user => {
      console.log("user", user);
    },
    error => {
      console.log("error", error);
    }
  );
};

chrome.browserAction.onClicked.addListener(clickButton);

您必须从 CDN 复制 firebase。 curl -LO "https://www.gstatic.com/firebasejs/4.0.0/firebase.js" 应该可以。

虽然我建议如果你想尝试一下，你可以使用我链接的上面的 repo。

Answer 1

Chrome 似乎允许隐含地从插件调用 www.googleapis.com，但是 Firefox 不允许。

Firefox 报告的 JavaScript 严格错误似乎不会对运行时间行为产生不利影响。

将https://www.googleapis.com/*添加到manifest.json:permissions解决了Firefox无法验证的问题。

Firebase 在 webextension 的后台脚本中不起作用

Firebase doesn't work in background script of webextension

javascript

firefox

firebase

firefox-addon-webextensions