question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

How to use inside a Chrome extension popup?

See original GitHub issue

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

soapstone login

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'"
}

Issue Analytics

  • State:open
  • Created 5 years ago
  • Reactions:4
  • Comments:7 (1 by maintainers)

github_iconTop GitHub Comments

2reactions
The-Don-Himselfcommented, Nov 28, 2018

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

1reaction
The-Don-Himselfcommented, Jan 7, 2019

@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!

Read more comments on GitHub >

github_iconTop Results From Across the Web

popup window in Chrome extension - Stack Overflow
In Chrome extension, I only found chrome.pageAction.setPopup and chrome.browserAction.setPopup can be used to show popup windows, ...
Read more >
Build a simple Google Chrome Extension in few minutes
For this tutorial we will build a basic Chrome extension that displays a simple popup message when clicked. We'll need a couple of...
Read more >
How to implement a Chrome Extension - freeCodeCamp
The popup refers to the main page users see when using your extension. It consists of two files: Popup.html and a JavaScript file,...
Read more >
Creating popup Chrome extensions that interact with the DOM
The HTML and scripts in the extension should be pretty self explanatory, there's an input, a button and event listeners to use that...
Read more >
Block or allow pop-ups in Chrome - Computer - Google Support
Change your default pop-ups & redirects settings · On your computer, open Chrome Chrome . · At the top right, click More More...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found