How to show a popup in chrome extension just on a single condition on OnClick event? - google-chrome-extension

Question

Hi I am in need to show a popup just once during installation of the extension asking for username and a log in button.When the user first clicks on the extension icon,a pop up should appear asking for username.when the user enters his username correctly,and clicks login,the pop up should be closed and then when the user again clicks on the extension icon,it should navigate to a website.What I did is when the user enters his username,it is stored in the localStorage,Each time when the user clicks on the extension icon,it checks for whether there is username in localstorage.if yes,then it should navigate to website otherwise,it should show the popup again.How can this be done?Please help me.
Here is my background.js
chrome.browserAction.onClicked.addListener(function(tab) {
if(!localStorage.username){
chrome.browserAction.setPopup({
popup: "userinfo.html"
});
}
else{//navigate to website }
});
Here the problem is that when the user first clicks on the icon,the pop up appears and the user enters his name and login.Next time when i click it again shows the pop up only.IT is not navigating to the website.Until i reload the extension,it shows only the popup on the onclick event.Anyone please help me.

Answer 1

You could register a listener for the chrome.browserAction.onClicked event that checks if the username is stored in localStorage and:
if it is there navigate to the website.
if it is not there navigate to userinfo.html (either in a new tab or opening a new popu window (using chrome.windows.create()), which enables you to define its location and size).
when submitting the username and password in your userinfo.html page you can store them in localStorage and log the user in.
E.g.:
In background.js:
var myWebsite = 'https://your.domain.goes/here';
var myUserinfo = chrome.extension.getURL('userinfo.html');
chrome.browserAction.onClicked.addListener(function(tab) {
if (localStorage.username) {
/* Navigate to website */
chrome.tabs.create({ url: myWebsite });
} else {
/* Navigate to `userifo.html` */
chrome.tabs.create({ url: myUserinfo });
}
});
chrome.runtime.onMessage.addListener(function(msg, sender) {
if ((msg.action === 'saveCredentials')
&& msg.user && msg.pass) {
/* Store the credentials in localStorage */
localStorage.username = user;
localStorage.password = pass;
/* For a better user-experience, let's
* navigate the user to the website right away */
chrome.tabs.updated(sender.tab.id, { url: myWebsite });
}
});
In userinfo.html's JS:
// ...once the userinfo is "submitted"
var user = ...;
var pass = ...;
chrome.runtime.sendMessage({
action: 'saveCredentials',
user: user,
pass: pass
});