How to use inside a Chrome extension popup?

Context

I would like to sign in a user via a Chrome extension popup menu. I know I have configured my Firebase application for Google and Facebook auth correctly as this works fine in my extension’s companion web app. The email/password flow works inside the extension popup.

I am using the popup signInFlow as the redirect flow wouldn’t make sense from inside an extension popup.

Issue

The issue is that the OAuth flows for Google and Facebook do not work in the extension popup. Here is the flow I would expect:

• Open Chrome extension popup menu
• Click on the Facebook button
• Popup window is opened prompting user to log in with Facebook
• Popup window is closed
• The signInSuccessWithAuthResult callback is called inside the extension popup

Instead, this happens:

• Open Chrome extension popup menu
• Click on the Facebook button
• Popup window briefly opens and then closes
• Extension popup closes

[EDIT] I suspect this may be due to behaviour of Chrome extension popups - the popup closes automatically due to the other window closing, despite it being a child window.

Questions

• Are Firebase OAuth sign-ins even possible from a Chrome extension popup? The domain triggering the OAuth flow would be chrome-extension://<id>, which I’ve added to the authorised redirect URLs for the Firebase app, though I wouldn’t have thought this necessary given I’m using the popup flow. Maybe OAuth needs to be initiated from a domain using the HTTP or HTTPS protocol, I’m not sure.
• Is there something missing in my manifest.json (see below)?

Happy to provide further context if needed.

Issue GIF

manifest.json

{
  "manifest_version": 2,

  "name": "Soapstone",
  "description": "",
  "version": "1.0",

  "background": {
    "scripts": ["background.js"]
  },
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content.bundle.js"],
      "css": ["content.css"]
    }
  ],
  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html"
  },
  "permissions": [
    "tabs",
    "activeTab",
    "https://ajax.googleapis.com/",
    "contextMenus",
    "storage"
  ],
  "content_security_policy": "script-src 'self' 'unsafe-eval' https://ajax.googleapis.com; object-src 'self'"
}

[The-Don-Himself]

I hope I don’t get downvoted… but I’ve personally solved this with a good old iframe.

[The-Don-Himself]

@adampopkiewicz No. iframe poses no issue at all if it can work on the page without the iframe, then it will work exactly the same within the iframe because even things like recaptcha will just work. What I can think of off the top of my head if you are facing issues is :- 1.) SSL This library will only work on SSL enabled websites (with the only exception of localhost) 2.) Make sure whatever framework or CMS you are using does not send headers to block itself from being embedded in an iframe, at least for the page(s) with firebase-ui

All the best!