Why does my background page become unavailable? - google-chrome-extension

Question

I've had a long-running Chrome Extension where I'm used to always have access to the background.js page for viewing console, trouble-shooting etc.
I'm implementing Firebase login and have made some changes...and now, after I log into my app, the 'background page' becomes the html of the current popup.
Manifest below...
When you reload or first install the Extension I see what I'm used to...and can click on the link to view the "_generated_background_page.html". Buttons in the popup correctly communicate (via messaging) to run functions in background.js.
However, after logging in, the new popup (I redirect to a new popup for logged in users) replaces the background page (my words) and (most importantly) I can't access the background page anymore. Messaging doesn't have any effect and I can't "see" the console / inspect the background.js page.
In the past I've seen a background page AND another, open page and can inspect them both.
Any thoughts on how I have succeeded in painting myself into a corner? It's as if I'm closing the background.js file.
Manifest:
{
"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": "XXX",
"oauth2": {
/*"client_id": "XXX",*/
"client_id": "XXX",
"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","/dscripts/firebase.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"]
}
],
"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"
}
}
background.js
//URLs for scripts
var baseURL = "http://localhost/AnnotateX/Scripts/Dev/"; //local server - macOS
var xmlhttp = new XMLHttpRequest(); //why put this up front? We need a new object on each call...
//Firebase constants
var config = {
apiKey: "XXX",
authDomain: "XXX",
databaseURL: "XXX",
storageBucket: "XXX",
// messagingSenderId: "XXX"
};
firebase.initializeApp(config);
//listener for chrome start
chrome.runtime.onStartup.addListener(initApp()); //This fires verification check...
function initApp() {
// Listen for auth state changes.
// [START authstatelistener]
firebase.auth().onAuthStateChanged(function(user) {
if (user) {
// User is signed in.
var displayName = user.displayName;
var email = user.email;
var emailVerified = user.emailVerified;
// var photoURL = user.photoURL;
// var isAnonymous = user.isAnonymous;
var uid = user.uid;
var providerData = user.providerData;
console.log('We\'re a user...coming through: ' + providerData);
if (user.emailVerified) { //Account is verified
console.log('We\'re a VERIFIED user... ' + emailVerified);
var url1 = baseURL + "aCheckUsers.php"
var url2 = "&fbUserID=" + uid + "&UserEmail=" + email + "&fullName=" + displayName;
$.ajax({
type: "POST",
url: url1,
data: url2,
dataType: 'json',
success: function(arrResult){
arrUserData = arrResult;
console.log('User data: ') + console.log(arrUserData);
localStorage.userDetails = JSON.stringify(arrUserData);
localStorage.userID = arrUserData.userID;
localStorage.licType = arrUserData.LicType;
startup();
},
error: function (jqXHR, textStatus, errorThrown) {
console.log('Error: ' + errorThrown + ' / ' + textStatus) + console.log(jqXHR);
}
});
}
// [START_EXCLUDE]
// [END_EXCLUDE]
} else {
// Let's try to get a Google auth token programmatically.
// [START_EXCLUDE]
console.log('Not a user (background.js)');
// [END_EXCLUDE]
}
});
}
function signOut() {
console.log("Logging out via subroutine in background.js.");
firebase.auth().signOut();
chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
chrome.tabs.sendMessage(tabs[0].id, {method: "logOut"});
});
chrome.browserAction.setPopup({ //Sets popup to last visited
popup: 'aHome.html' // Open this html file within the popup.
});
}
//function that determines whether userID exists and library can be loaded or if new user must be created first
function startup(){
console.log("Starting up...");
chrome.storage.sync.get('lastSave', function(obj) {
var syncSaveTime = obj.lastSave;
var localSaveTime = localStorage.lastSync;
console.log('local: ' + localSaveTime + ' | sync: ' + syncSaveTime);
// if (localSaveTime == null || syncSaveTime >= localSaveTime){ //test
if (localSaveTime == null || syncSaveTime > localSaveTime){ //production
// console.log("Current user: " + localStorage.userID);
console.log("Local version is outdated...should run db pulll...");
pullLibrary();
} //End process for running library load if outdated or NO data locally...
else {
console.log("We've got data - skip the heavyweight pull....use local");
processLibrary(JSON.parse(localStorage.library));
}
}); //End async storage GET
} //End STARTUP
// Firebase auth popups
function googleLoginPopUp() {
var provider = new firebase.auth.GoogleAuthProvider();
firebase.auth().signInWithPopup(provider).then(function(result) {
// This gives you a Google Access Token. You can use it to access the Google API.
var token = result.credential.accessToken;
// The signed-in user info.
var user = result.user;
// ...
}).catch(function(error) {
// Handle Errors here.
var errorCode = error.code;
var errorMessage = error.message;
// The email of the user's account used.
console.log(errorCode + ' - ' + errorMessage);
// ...
});
} //End Google Login
function facebookLoginPopUp() {
var provider = new firebase.auth.FacebookAuthProvider();
firebase.auth().signInWithPopup(provider).then(function(result) {
// This gives you a Facebook Access Token. You can use it to access the Facebook API.
var token = result.credential.accessToken;
// The signed-in user info.
var user = result.user;
// ...
}).catch(function(error) {
// Handle Errors here.
var errorCode = error.code;
var errorMessage = error.message;
console.log(errorCode + ' - ' + errorMessage);
});
}

Answer 1

Okay...good night's sleep and some basic debugging...
Part of my background.js startup process was to hand the user off to the post-login popup page.
self.location.href='aSearch.html'; //finally open core search page
I don't understand exactly why, but this line in background.js effectively replaced background.js with the aSearch.html and aSearch.js pages...background.js became unavailable to messaging etc.
Removing the line did the trick...and you can't open a page from background.js anyway.