Question

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

如果我从完整的浏览器窗口运行弹出窗口，我会完全按照您的预期获得Google和Facebook弹出窗口。

当我点击打开弹出窗口，然后选择谷歌或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提供的示例中没有突出显示......但是答案是：

只有弹出操作（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

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

1 个答案: