How to add action buttons in a popup and navigate

2019-09-08 14:45发布

站内问答 / 移动开发
1511 1 2

I am in need to a show 2 pop ups on 2 different situation.Presently I am checking a server file and storing its credentials in a localStorage.Each time when the user clicks on the extension,it should check if the localStorage is empty or not.If it is empty,then a pop up should be seen and asks for his username.this is stored in localstorage.Next time when the user clicks on the icon,the localstorage is not empty,so it should show another pop up showind a field for username with 2 buttons namely 'change settings' and 'go to website'.When the user clicks on change settings,again the popup shuuld appear asking user name.If he clicks go to website,it should navigate to a website.How can this be done?please help me.I have tried button the button is not working.And also the 2nd pop up is always shown only on reloading the extension.Please help me. Here is my background.js

here is my updated popup.js

  window.addEventListener('DOMContentLoaded', function() {   
  var divLoading  = document.querySelector('div#loadingContainer');
  var divSettings = document.querySelector('div#settingsContainer');
  var divLoggedIn = document.querySelector('div#loggedInContainer');
  var divChange = document.querySelector('div#settingsChange');


 var user1 = divSettings.querySelector('input#user1');
 var form  = divSettings.querySelector('form#userinfo');


 var user2   = divLoggedIn.querySelector('span#user2');   
 var change  = divLoggedIn.querySelector('input#change');
 var calpine = divLoggedIn.querySelector('input#calpine');

 var user3 = divChange.querySelector('input#user3');
 var form3  = divChange.querySelector('input#changeset');
 var cancel = divChange.querySelector('input#emailcancel');


 var user = localStorage.username;
  if (user) {

   // user1.value = user2.value = user;
   user1.value = user2.textContent = user;
    user3.value = user;        
    divLoggedIn.style.display = 'block';
    divSettings.style.display = 'none';
    divChange.style.display = 'none';      
    } else {

    divSettings.style.display = 'block';
    divChange.style.display = 'none';
    divLoggedIn.style.display = 'none';      
    user1.focus();
    user1.select();
    }
   divLoading.style.display = 'none';


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

   form3.addEventListener('click', function() {

    var userStr = user3.value;

    chrome.runtime.getBackgroundPage(function(bgPage) {
        bgPage.login(userStr);
    });
    window.close();
    });

   change.addEventListener('click', function(evt) {
    divLoggedIn.style.display = 'none';
    divSettings.style.display = 'none';
    divChange.style.display = 'block';

    user3.focus();
    user3.select();
   });

   cancel.addEventListener('click', function() {
    divLoggedIn.style.display = 'block';
    divSettings.style.display = 'none';
    divChange.style.display = 'none';

    user3.focus();
    user3.select();
    });


    calpine.addEventListener('click', function() {
    chrome.tabs.create({ url: 'http://www.calpinemate.com/' });
    });
    });

I have made some changed as i was asked to do so.I have added a new div named divchange. here is my updated userinfo.html

  <!DOCTYPE html>
   <html>
   <head>

    <script type="text/javascript" src="popbak.js"></script>       
  </head>
     <body>

    <div id="loadingContainer"></div>
    <div id="settingsContainer">
        <b>Please Enter your Email ID/Employee Code</b>
        <br />
        <br />
        <form id="userinfo">
            <table>
                <tr><td> <label for="user">Email/Employee Code:</label></td>
                    <td>    <input type="text" id="user1" required /></td></tr>
                <tr><td> <input type="submit" id="login" value="Log In" /></td></tr>
            </table>
        </form>
       </div>
       <div id="settingsChange">
        <b>Please Enter your Email ID/Employee Code</b>
        <br />
        <br />

            <table>
                <tr><td><label for="user">Email/Employee Code:</label></td>
                    <td><input type="text" id="user3" required /></td></tr>
                <tr><td><input type="button" id="emailchange" value="Change" /></td>
                    <td><input type="button" id="emailcancel" value="Cancel" /></td>                         </tr>
               </table>

        </div> 

      <div id="loggedInContainer">
        <table>
            <tr><td>   <label for="user">Email/Employee Code:</label></td>

      <!--   <input type="text" id="user2" readonly /> -->
         <td><span id="user2"></span></td> </tr>   
        <br />
        <tr><td><input type="button" id="calpine" value="Go to Calpinemate"/></td>
            <td><input type="button" id="change" value="Change Settings"/></td></tr>
        </table>
         </div>
         </body>
      </html>

here is my bgpage.login()

   function login(useremail){
     if(!useremail)
    {
  alert('Please enter your Email/Employee code');  //this is not working
 return;
   } 
  var urlPrefix = 'http://www.calpinemate.com/employees/attendanceStatus/';
   var urlSuffix = '/3';
   var req1 = new XMLHttpRequest();
   req1.addEventListener("readystatechange", function() {   
    if (req1.readyState == 4) {
    if (req1.status == 200) {          
    var item=req1.responseText;           
    if(item==1){
     localStorage.username=useremail;  
                 updateIcon();             
     }
      else
       {
           alert('Please enter a valid Email/employee code');
               updateIcon();

       }
     }
    else {
      alert("ERROR: status code " + req1.status);
     }
      }
       });

   var url = urlPrefix + encodeURIComponent(useremail) + urlSuffix;
   req1.open("GET", url);    
    req1.send(null);       
    }

Here is my background.js

var myNotificationID = null;
 var oldChromeVersion = !chrome.runtime;


  setInterval(function() {
      updateIcon();
      }, 1000); 

     function getGmailUrl() {
        return "http://calpinemate.com/";

      }


      function isGmailUrl(url) {
      return url.indexOf(getGmailUrl()) == 0;

          }




    function onInit() {

   updateIcon();

       if (!oldChromeVersion) { 

       chrome.alarms.create('watchdog',{periodInMinutes:5,delayInMinutes:  0}); 
     }

          }



        function onAlarm(alarm) {

         if (alarm && alarm.name == 'watchdog') {

             onWatchdog();

            } 

        else {

         updateIcon();

       }


   function onWatchdog() {

     chrome.alarms.get('refresh', function(alarm) {

       if (alarm) {

      console.log('Refresh alarm exists. Yay.');

          } 
     else {
   updateIcon();

      }
    });

     }



     if (oldChromeVersion) {
       updateIcon(); 
        onInit();

          } 

       else {

    chrome.runtime.onInstalled.addListener(onInit);

        chrome.alarms.onAlarm.addListener(onAlarm);

     }




    function updateIcon(){
      if(localStorage.username){

    var urlPrefix = 'http://www.calpinemate.com/employees/attendanceStatus/';
     var urlSuffix = '/2';

        var req = new XMLHttpRequest();

     req.addEventListener("readystatechange", function() {

              if (req.readyState == 4) {

            if (req.status == 200) {


       var item=req.responseText;


       if(item==1){

        chrome.browserAction.setIcon({path:"calpine_logged_in.png"});

        chrome.browserAction.setBadgeBackgroundColor({color:[190, 190, 190, 230]});

        chrome.browserAction.setBadgeText({text:""});  

        chrome.notifications.clear('id1', function(){});

         }

      else{

       chrome.browserAction.setIcon({path:"calpine_not_logged_in.png"});

       chrome.browserAction.setBadgeBackgroundColor({color:[190, 190, 190, 230]});

       chrome.browserAction.setBadgeText({text:""}); 

       chrome.notifications.create(
       'id1',{
       type: 'basic',
       iconUrl: '/calpine_not_logged_in.png',
       title: 'Warning : Attendance',
        message: 'Please mark your Attendance !',
       buttons: [{ title: 'Mark',
                        iconUrl: '/tick.jpg'
                  },{ title: 'Ignore',
                        iconUrl: '/cross.jpg'}],
       priority: 0},
       function(id) { myNotificationID = id;}
     );    

        }

      } 
   else {

        alert("ERROR: status code " + req.status);

       }

    }

          });
   var url = urlPrefix + encodeURIComponent(localStorage.username) + urlSuffix;
    req.open("GET", url);


   req.send(null);
     }
    }



     onInit();

1条回答
The star\"
2楼-- · 2019-09-08 15:24

First of all, the localStorage of the background-page and that of the popup are not the same objects. Besides, each time the popup is shown, it is loaded anew, thus the localStorage is empty.
UPDATE: Thx to rsanchez's comment, I correct my mistake: the popup shares the localStorage object of the extension (which is the same as the one of the background-page).
You should use the localStorage of the background-page. (Keep in mind this works only because you have a persistent background-page !)

The simplest (and most reliable) way is to have a single popup with two different divs (one for entering credentials and one for logging in) and display only one at a time.

E.g.:

1) Remove any chrome.browserAction.onClicked... listener from the background-page (it won't hurt leaving it there as it will never be triggered, but it will confuse you in the future).

2) Declare a popup in your manifest (if you don't have already done do): 

<pre>
...
"browser_action": {
    ...
    "default_popup": "popup.html"
},
...
</pre>

3). Create a file named popup.html with the following code:

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" src="popup.js"></script>       
    </head>
    <body>
        <div id="loadingContainer"><h3>Loading...</h3></div>
        <div id="settingsContainer" style="display:none;">
            <b>Enter your Email ID/Employee Code</b>
            <br />
            <br />
            <form id="userinfo">
                <label for="user">Email/Employee Code:</label>
                <input type="text" id="user1" required />
                <input type="submit" id="login" value="Log In" />
            </form>
        </div>
        <div id="loggedInContainer" style="display:none;">
            <label for="user">Email/Employee Code:</label>
            <!--<input type="text" id="user2" readonly />-->
            <span id="user2"></span>
            <br />
            <input type="button" id="calpine" value="Go to Calpinemate"/>
            <input type="button" id="change" value="Change Settings"/>
        </div>
    </body>
</html>
</pre>

4) Create a file named popup.js with the following code:

window.addEventListener('DOMContentLoaded', function() {

    /* Container divs */
    var divLoading  = document.querySelector('div#loadingContainer');
    var divSettings = document.querySelector('div#settingsContainer');
    var divLoggedIn = document.querySelector('div#loggedInContainer');

    /* Settings-container fields */
    var user1 = divSettings.querySelector('input#user1');
    var form  = divSettings.querySelector('form#userinfo');

    /* LoggedIn-container fields */
    //var user2   = divLoggedIn.querySelector('input#user2');
    var user2   = divLoggedIn.querySelector('span#user2');
    var change  = divLoggedIn.querySelector('input#change');
    var calpine = divLoggedIn.querySelector('input#calpine');

    /* Query the extension's localStorage
     * in order to decide which DIV to show */
    var user = localStorage.username;
    if (user) {
        /* 'Username' is set: Show the LoggedIn-container
         * (after updating the value of the (readonly) '#user' field) */
        //user1.value = user2.value = user;
        user1.value = user2.textContent = user;
        divLoggedIn.style.display = 'block';
    } else {
        /* 'Username' is not set: Show the Settings-container */
        divSettings.style.display = 'block';
        user1.focus();
        user1.select();
    }
    divLoading.style.display = 'none';

    /* Listener for '#userinfo' form */
    form.addEventListener('submit', function(evt) {
        evt.preventDefault();
        var userStr = user1.value;
        chrome.runtime.getBackgroundPage(function(bgPage) {
            bgPage.login(userStr);
        });
        window.close();
    });

    /* Listener for '#change' button */
    change.addEventListener('click', function(evt) {
        divLoggedIn.style.display = 'none';
        divSettings.style.display = 'block';
        user1.focus();
        user1.select();
    });

    /* Listener for '#calpine' button */
    calpine.addEventListener('click', function() {
        chrome.tabs.create({ url: 'https://your.domain.goes/here' });
    });
});
查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(2)