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

Question

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

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

当我点击打开弹出窗口，然后选择 Google 或 Facebook 登录时，我会看到“关于：空白”弹出窗口（有时它保持打开状态，有时会闪烁并消失）。

最奇怪的事情： 如果我通过单击扩展图标打开弹出窗口，然后右键单击以公开开发工具并在弹出窗口上保持控制台打开，然后单击 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"
}

}

Answer 1

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

Chrome 扩展程序只能使用弹出操作（signInWithPopup 和 linkWithPopup），因为 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