在 Chrome 扩展程序中使用 Firebase 进行身份验证会导致空白弹出窗口答案

【问题标题】：Using Firebase for auth inside Chrome Extension results in blank popup在 Chrome 扩展程序中使用 Firebase 进行身份验证会导致空白弹出窗口
【发布时间】：2017-10-23 15:21:29
【问题描述】：

我有一个正常运行的 Chrome 扩展程序，我正在尝试添加 Firebase 身份验证（Google 和 Facebook）。

如果我从一个完整的浏览器窗口运行弹出窗口，我会得到完全符合您期望的 Google 和 Facebook 弹出窗口。

当我点击打开弹出窗口，然后选择 Google 或 Facebook 登录时，我会看到一个 About:blank 弹出窗口（有时它保持打开状态，有时它会闪烁然后消失）。

最奇怪的事： 如果我通过单击扩展图标打开弹出窗口，然后右键单击以公开开发工具并在弹出窗口中保持控制台打开，然后单击 Google 或 Facebook，弹出窗口将按您的预期打开并且我可以登录。

清单如下...我尝试匹配来自 Firebase (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"
}

}

【问题讨论】：

标签： firebase google-chrome-extension firebase-authentication

【解决方案1】：

这有点被埋没了，在 Chrome/Firebase 提供的示例中没有突出显示...但答案如下：

只有弹出操作（signInWithPopup 和 linkWithPopup）是可用于 Chrome 扩展，因为 Chrome 扩展不能使用 HTTP 重定向。您应该从后台脚本调用这些方法而不是浏览器操作弹出窗口，因为身份验证弹出窗口将取消浏览器动作弹窗。

我将 Firebase 股票代码添加到我的 background.js 页面，并将 firebase.js 添加到清单的后台脚本部分（firebase.js 与扩展一起打包）。

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

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

【讨论】：