打开并访问 chrome 扩展程序中的弹出窗口

嗨，我需要知道如何访问 chrome 扩展程序中弹出窗口的内容。目前，我已将我的网站设置为chrome扩展程序。我需要的是，当我安装扩展程序时，应该打开一个弹出窗口，询问用户名和密码。当用户输入用户名和密码时，它应该存储在本地存储中。目前我可以打开一个弹出窗口。但是我不知道如何存储用户输入为用户名的名称。任何人请帮助我。我不知道该怎么做。这是清单.json

{
"name": "Calpine Extension",
"version": "1.0",
"description": "Log on to calpinemate",
"manifest_version": 2,
"browser_action": {
    "default_icon": "icon_128.png"
},
"background": {
    "persistent": false,
    "scripts": ["background.js"]
},
"browser_action": {
    "default_title": "Test Extension",
    "default_icon": "calpine_not_logged_in.png"
},
"permissions": [
   "*://blog.calpinetech.com/test/index.php",
   "alarms",
    "notifications"
     ],
        "web_accessible_resources": [
        "/icon_128.png"]
      }

这是背景.js

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

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

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


       chrome.browserAction.onClicked.addListener(function(tab) {

          chrome.tabs.query({
           url: "http://calpinemate.com/*",
         currentWindow: true
            },
         function(tabs) {
       if (tabs.length > 0) {
       var tab = tabs[0];
       console.log("Found (at least one) Gmail tab: " + tab.url);
       console.log("Focusing and refreshing count...");
       chrome.tabs.update(tab.id, { active: true });
       updateIcon();
        }
      else {
      console.log("Could not find Gmail tab. Creating one...");
       chrome.tabs.create({ url: getGmailUrl() });
       updateIcon();
       }
      });
    });

       function onInit() {
        console.log('onInit');

        updateIcon();
       if (!oldChromeVersion) {
         chrome.alarms.create('watchdog', {periodInMinutes:5});
           }
         }


        function onAlarm(alarm) {
       console.log('Got alarm', 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 {
      console.log('Refresh alarm doesn''t exist!? ' +
              'Refreshing now and rescheduling.');
        updateIcon();
     }
       });
        } 

       if (oldChromeVersion) {
        updateIcon();
         onInit();
        } 
       else {
          chrome.runtime.onInstalled.addListener(onInit);
          chrome.alarms.onAlarm.addListener(onAlarm);
             }


            function updateIcon(){

         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:""});   
         }
      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: '/icon_128.png',
       title: 'Calpinemate',
        message: 'Hello calpiner',
       buttons: [{ title: 'Mark',
                        iconUrl: '/tick.jpg'
                  },{ title: 'Ignore',
                        iconUrl: '/cross.jpg'}],
       priority: 0},
       function(id) { myNotificationID = id;}
           );

     chrome.notifications.onButtonClicked.addListener(function(notifId, btnIdx) {
    if (notifId === myNotificationID) {
    if (btnIdx === 0) {
        window.open("http://www.calpinemate.com/");
    } else if (btnIdx === 1) {
       notification.close();
    }
    }
     });
     chrome.notifications.onClosed.addListener(function() {
      notification.close();
     });

    }
      } 
   else {
        // Handle the error
        alert("ERROR: status code " + req.status);
       }
    }
         });
            req.open("GET", "http://blog.calpinetech.com/test/index.php", true);
         req.send(null);
   }

  function login() {
/* First retrieve the credentials */
    chrome.storage.local.get(['username', 'password'], function(items) {
    var user = items.username;
    var pass = items.password;
    if (!user || !pass) {
        /* Missing credentials. Prompt the user. */
        chrome.windows.create({ url : "test.html" });
        return;
    }
    /* Log-in */
    // ...code that logs the user in
      });
      }

这是测试.html

   <html>
    <head>
    <script type="text/javascript">
        function log(){
            var uname=document.getElementById('name');

             document.getElementById('pp').innerHTML = uname;
        }
      </script>
     </head>
   <body>
    <form name="userinfo" id="userinfo">
    username : 
    <input id="name" type="text" name="username"/><br><br>
    password :
    <input type="password" name="password"/><br><br>
    <input type="button" value="Log In" onclick="log()"/>
    <p id="pp"></p>
    </form>
  </body>
  </html>

测试.js

  window.addEventListener('DOMContentLoaded', function() {
   var user  = document.querySelector('input#user');
   var pwd  = document.querySelector('input#pass');
  var form = document.querySelector('form#userinfo');
  form.addEventListener('submit', function(evt) {     
    evt.preventDefault();
    var userStr = user.value; 
    var pwdStr = pwd.value;
   if ((userStr.length === 0) || (passStr.length === 0)) {
        alert('Please, specify both Username and Password !');
        return;
    }
   chrome.runtime.getBackgroundPage(function(bgPage) {
     bgPage.login(userStr,pwdStr); });
    window.close();

   }); 
  });