How to use inside a Chrome extension popup?
See original GitHub issueContext
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'"
}
Issue Analytics
- State:
- Created 5 years ago
- Reactions:4
- Comments:7 (1 by maintainers)
Top 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 >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
I hope I don’t get downvoted… but I’ve personally solved this with a good old iframe.
@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!