在Chrome擴展程序中使用Firebase進行身份驗證導致空白彈出

我有一個功能正常的Chrome擴展程序，並且正在嘗試添加Firebase身份驗證（Google & Facebook）。在Chrome擴展程序中使用Firebase進行身份驗證導致空白彈出

如果我運行從整個瀏覽器窗口彈出，我得到谷歌和Facebook的彈出窗口完全按照你的期望。

當我點擊打開彈出式窗口，然後選擇谷歌或Facebook登錄，我得到一個關於：空白的彈出窗口（有時其打開，有時它閃爍和消失）。

的奇怪的事情： 如果我通過點擊擴展圖標打開彈出，然後右鍵單擊揭露開發工具，保持控制檯打開後彈出，然後點擊谷歌或Facebook，在彈出的打開爲你所期望的，我都可以登錄。下面

清單......我試圖以匹配火力地堡的具體例子（https://github.com/firebase/quickstart-js/tree/master/auth/chromextension）。

任何想法或指示排除故障？

{ 

"manifest_version": 2, 

"name": "Annotate PRO for Chrome", 
"short_name": "Annotate PRO", 
"description": "Right-click access to a pre-written library of comments. Write it once, to perfection, and reuse forever!", 
"version": "3.1.1.0", 

"permissions": [ 
    "identity", 
    "identity.email", 
    "clipboardWrite", 
    "clipboardRead", 
    "activeTab", 
    "tabs", 
    "contextMenus", 
    "storage", 
    "webNavigation" 
], 

"content_security_policy": "script-src 'self' https://ssl.google-analytics.com; object-src 'self'", 

"externally_connectable": { 
    "matches": ["http://*.11trees.com/*"]}, 

    "commands": { 
     "_execute_browser_action": { 
     "suggested_key": { 
      "windows": "Alt+A", 
      "mac": "Alt+A", 
      "chromeos": "Alt+A", 
      "linux": "Alt+A" 
     } 
     } 
    }, 

"key": "XXXX", 

"oauth2": { 
    "client_id": "XXXX", 
    "scopes": [ 
     /*"https://www.googleapis.com/auth/chromewebstore.readonly",*/ 
      "https://www.googleapis.com/auth/userinfo.email", 
     "https://www.googleapis.com/auth/userinfo.profile" 
     ] 
    }, 

"background": { 
    "scripts": ["/dscripts/jquery-3.1.1.min.js","/scripts/background.js"]}, 


"content_security_policy": "script-src 'self' https://ssl.google-analytics.com https://apis.google.com/ https://www.gstatic.com/ https://*.firebaseio.com https://www.googleapis.com; object-src 'self'", 

"content_scripts": [ 
    { 
    "all_frames" : true, 
    "matches": ["http://*/*","https://*/*"], 
    "js": ["/scripts/content.js"] 
    } 
], 

"web_accessible_resources": ["/scripts/insertcomment.js"], 

"icons": { 
      "16": "Annotate16.png", 
      "48": "Annotate48.png", 
      "128": "Annotate128.png" 
     }, 

"browser_action": { 
    "default_icon": { 
     "19": "Annotate128.png", 
     "38": "Annotate128.png" 
    }, 
    "default_title": "Annotate PRO for Google Chrome", 
    "default_popup": "aHome.html" 
} 

}

來源

2017-05-23 11teenth

這是一種埋沒，而不是由Chrome /火力地堡提供的例子強調了......但這裏的答案：

只有彈出操作（signInWithPopup和linkWithPopup）是可用Chrome擴展程序，因爲Chrome擴展程序無法使用HTTP 重定向。您應該從後臺腳本而不是瀏覽器操作彈出窗口調用這些方法，因爲身份驗證彈出窗口將取消瀏覽器操作彈出窗口。

我將Firebase股票代碼添加到我的background.js頁面，並將firebase.js添加到清單的後臺腳本部分（firebase.js與Extension一起打包）。

"background": { 
    "scripts": ["/dscripts/jquery-3.1.1.min.js","/dscripts/firebase.js","/scripts/background.js"]},

從https://firebase.google.com/docs/auth/web/facebook-login

來源

2017-05-23 17:16:01 11teenth

在Chrome擴展程序中使用Firebase進行身份驗證導致空白彈出

回答

相關問題