How to show a pop up in chrome extension?

Question

I need to show a pop-up in chrome extension. Presently the pop-up is showing in a new window when the extension icon is clicked.

What I need is that when I click on the extension a popup window should be seen just below the extension icon. Just like this (please check the pop-up in this link).

My pop-up window(userinfo.html) asks for a login with username and password. When the user enters both username and password, and logins, the pop-up should be closed and when the user again clicks on the extension icon, it should navigate to a website. How can I do this? Here is my background.js

chrome.browserAction.onClicked.addListener(function(tab) {
 if(!localStorage.username){
   chrome.browserAction.setPopup({
    popup: "userinfo.html"
   });
 }
 else
   //navigate to website
});

In this way, I show my pop-up. When the user clicks on the icon for the first time after installation the pop-up appears. Otherwise, it navigates to a website. Now my problem is that when I click twice on the icon only, the pop-up appears. The second problem is that after I enter the username and password and click login the pop-up closes, which is fine. When I clicked again on icon actually it should navigate to the website, but in my code it again shows pop up. When I reload the extension, it works correctly. Why is it like that? please help me. There is a file named userinfo.html, which should be shown as a pop-up. How can I do this? Please help me.

Answer 1

In browser action, you should include default_popup value which points to the HTML file to be rendered as popup. In your case it is userinfo.html.

"browser_action": 
     {
   "default_icon": "icon.png",
   "default_popup": "popup.html"
    }

More information here: https://developer.chrome.com/docs/extensions/reference/browserAction/