Login & Authentication in Chrome Extension Practice

Question

I'm working on a chrome extension and trying to implement an authentication method (firebase). I'm confused by what has to go where, since the popup.html doesn't allow inline script, it makes it a bit more difficult. As far as I see this there are 2 options:

1. Call external page (hosted by me) from the extension, open in new tab, handle login there. But in this case, how does the extension communicate with the login page? Cookies? I need the confirmation inside my popup.js

2. Try to handle Email/Password login in Chrome extension popup, which seems more complicated. I always violate the Content Security Policy, bit annoying. I tried this already, problem is once you close the popup, it looses the login state.

I researched already a lot, but there is no real good example so far, and other questions are barely answered. Thanks!

Answer 1

You could try to have the login/password input boxes in the popup but run the actual login code in the background page. You can do that sending a message from the popup to the background page or directly from the popup using something like:

popup.html:

<input type="text" id="email">
<input type="password" id="password">

popup.js:

var email = document.getElementById("email").value;
var password = document.getElementById("password").value;

chrome.runtime.getBackgroundPage(function(bgPage){
    bgPage.performFirebaseLoginWithEmailAndPassword(email,password);
});

Since the background page is always on, the login state should be preserved when the popup is closed.