Firebase在webextension的後臺腳本中不起作用

我們的瀏覽器擴展的用戶通過firebase登錄。令牌Firebase問題持續1小時，但Firebase SDK中的User對象透明地處理令牌刷新。這就是爲什麼要在我的插件中加入Firebase SDK的原因。Firebase在webextension的後臺腳本中不起作用

在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"

此外，控制檯顯示阻止的CORS請求www.googleapis.com （請注意，此域名在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: "[email protected]", 
    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複製火力點。像curl -LO "https://www.gstatic.com/firebasejs/4.0.0/firebase.js"應該這樣做。

雖然我建議如果你想嘗試一下，你使用上面的鏈接回購。

來源

2017-08-25 Aleksandar Dimitrov

請編輯問題爲主題：包括[重複問題*的[mcve]]。對於Chrome擴展程序或Firefox WebExtensions，幾乎總是需要包含*清單。json *以及一些背景，內容和/或彈出腳本/ HTML，以及一些網頁HTML /腳本。尋求調試幫助的問題（「爲什麼我的代碼不按我想要的方式工作？」）必須包括：（1）期望的行爲，（2）特定問題或錯誤，以及（3）重現它所需的最短代碼*在問題本身*。請參閱：[我可以在這裏詢問什麼主題？]（/ help/on-topic）和[問]。 – Makyen

問題是：我必須包含MWE的整個存儲庫，即多個文件。使問題時間很長。 –

那裏，我包括它。使用鏈接庫可能更容易，但如果你知道如何設置web擴展，這應該就足夠了。 –

Chrome似乎允許隱式地從插件中調用www.googleapis.com，但Firefox並不支持。

Firefox正在報告的JavaScript嚴重錯誤似乎對運行時行爲不利。

將https://www.googleapis.com/*添加到manifest.json:permissions解決了Firefox無法進行身份驗證的問題。

來源

2017-08-27 05:44:01

Firebase在webextension的後臺腳本中不起作用

回答

相關問題