title: How to show a pop up in chrome extension?
body: <p>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.</p>
  <p>What I need is that when I click on the extension a popup window should be seen just below the extension icon. Just like <a href="https://developer.chrome.com/docs/extensions/mv3/getstarted/#user_interface" rel="nofollow noreferrer">this</a> (please check the pop-up in this link).</p>
  <p>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</p>
  <pre><code>chrome.browserAction.onClicked.addListener(function(tab) {
   if(!localStorage.username){
     chrome.browserAction.setPopup({
      popup: &quot;userinfo.html&quot;
     });
   }
   else
     //navigate to website
  });
  </code></pre>
  <p>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.</p>