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

Question

我们浏览器扩展的用户通过 firebase 登录。 Firebase 发出的 token 持续 1 小时，但 Firebase SDK 中的 User 对象透明地处理 token 刷新。这就是为什么要在我的插件中包含 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 如下:

list .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" 应该可以。

尽管我建议如果您想尝试一下，请使用我链接的上述存储库。

Answer 1

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

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

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