How to show a pop up only once in chrome extension?

StackOverflow https://stackoverflow.com/questions/20512641

سؤال

Hi I need to show a pop up in chrome extension. I have set my website as a chrome extension. Here is the use case:

  1. When the user installs the extension, and clicks on the extension icon, it should show a pop up asking his username.
  2. When user enters his name and login, the pop up gets closed.
  3. This name is stored in local storage.
  4. When user clicks the extension icon next time, it checks whether his name is stored in localstorage If not then it should again show pop up otherwise it should navigate to my website.

Now what my problem is that

  1. When I click twice on the icon only, only then pop up appears.
  2. After I enter name and click login pop up gets closed which is fine
  3. When I click again on icon, actually it should navigate to the website, but in my code it again shows pop up.
  4. When I reload the extension, it works correctly.

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 is my userinfo.html

<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript" src="test.js">
   </script>       
  </head>
   <body>
   <font face="sans-serif"><b>Enter your Email ID</b></font><br><br>
    <form id="userinfo">
        <table><tr><td>
                <font face="sans-serif"><label for="user">Email</label></font></td><td>:                    </td>
                <td><input type="text" id="user" /></td><span id="semail"></span>
        </table><br><br>
       <font face="sans-serif"><input type="submit" id="login" value="Log In"/></font>

    </form>
    </body>
  </html>

here is my test.js

  window.addEventListener('DOMContentLoaded', function() {
  var user  = document.querySelector('input#user');

   var form = document.querySelector('form#userinfo');

  form.addEventListener('submit', function(evt) {     
    evt.preventDefault();
    var userStr = user.value; 
    chrome.runtime.getBackgroundPage(function(bgPage) {
     bgPage.login(userStr/*,pwdStr*/); });
    window.close();

   }); 

   });

anyone please please help me

هل كانت مفيدة؟

المحلول

Let's go one by one with your problems.

1.When I click twice on the icon only, only then pop up appears.

When you click on extension icon, your browserAction.onClicked handler gets executed and it just sets the popup. It does not open it. You have to click on extension icon again to open the popup. That is why you have to click twice.

2.After I enter name and click login pop up gets closed which is fine.

This is because you are redirecting to a new page which closes the extension popup.

3.When I click again on icon, actually it should navigate to the website, but in my code it again shows pop up.

Since you have setup popup for extension click, it has over-ridden the chrome.browserAction.onClick handler which is why you are not able to navigate to your website.

4.When I reload the extension, it works correctly.

This is because after reload, your chrome.browserAction.onClick is not over-ridden by popup and since login credentials are present in localstorage, your code does not over-ride it.

Solution1

  1. In background script, check if the credentials are stored in localstorage then do not set the popup, else set the popup.
  2. Add the handler chrome.browserAction.onClick to always navigate to your website. You know that if popup opens then your handler will not be executed.
  3. When you store the credentials in localstorage and if they are correct, remove the popup.
  4. To remove popup, you can try chrome.browserAction.setPopup({popup: ""});

From chrome.broswerAction API

onClicked Fired when a browser action icon is clicked. This event will not fire if the browser action has a popup.

Solution2

  1. Popup has the same permissions which background scrips have. So instead of defining chrome.browserAction.onClicked event, just write your code in popup script.
  2. Check the localstorage, if credentials are present, create a new tab and open your page and close the popup with window.close()
  3. Otherwise don't close the popup.

PS: I have not tried it. Just giving you an idea.

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top