title: Google Chrome Extension Login Functionality
body: <p>I am developing a Chrome Extension and I am trying to achieve this: </p>
  
  <p>You click on a your chrome extension icon and you're presented with a simple Login page, you type in your credentials and I need to send them to a REST API that has a login method that will return an API key that I will need to store (when I get to that point I will decide where exactly to store it but for the time being it might be in <a href="https://developer.chrome.com/extensions/storage" rel="nofollow">https://developer.chrome.com/extensions/storage</a> ). And afterwards I'd like for the user to be presented with a different page rather than the login if everything was successful so far. I have an idea how to make the request but my question is this: How do I implement the logic for checking credentials and sending them in a background.js page (it's actually an event page since it has '"persistent": false' property rather than in popup.js, because you'd obviously need to login just once and afterwards I'd track him by his API key.</p>
  
  <p>So far I've tried something like this:</p>
  
  <p>popup.js</p>
  
  <pre><code>document.getElementById('login-btn').addEventListener('click', function() {
      chrome.runtime.getBackgroundPage(function(bgWindow) {
          bgWindow.myBackgroundMethod();
      });
  });
  </code></pre>
  
  <p>background.js</p>
  
  <pre><code>function myBackgroundMethod() {
      console.log('mybackgroundMEthoDasd');
  
      // ideally here will be the code for the XMLHttpRequest
      // something along the lines of
      var http = new XMLHttpRequest();
      var url = "www.oursite.com/index/...";
      var params = "lorem=ipsum&amp;name=binny";
      http.open("POST", url, true);
  
  
      http.setRequestHeader("Content-type", "application/x-www-form-       urlencoded");
  
      http.onreadystatechange = function() {//Call a function when the state changes.
       if(http.readyState == 4 &amp;&amp; http.status == 200) {
           alert(http.responseText);
       }
      }
      http.send(params);
     }
  </code></pre>
  
  <p><strong>manifest.json</strong></p>
  
  <pre><code>
  
  
  
        {
        "manifest_version": 2,
  
        "name": "Chrome Extension",
        "description": "This extension..!",
        "version": "1.0",
  
        "browser_action": {
          "default_icon": "icon.png",
          "default_popup": "popup.html"
        },
        "icons": {
          "64" : "icon.png"
        },
        // "permissions": [
        //   "activeTab",
        //   "https://ajax.googleapis.com/"
        // ],
        "background": {
          "scripts": ["background.js"]
        },
        "content_scripts": [
          {
            "matches": ["http://*/*", "https://*/*"],
            "js": ["myScript.js"]
          }
        ]
      }
  
  
  </code></pre>
  
  <p>but that is not the right way since it doesn't work. The method in the background page isnt ran, I have a simple console.log in it just to test it out for now. I do not understand how to access the method in the background page and if it's even the 'right' way to go.</p>
  
  <p>To sum up: Is my logic going in the right direction and will what I'm describing be possible or will I need to do all the logic in the popup.js. And if you have any advice for storing API key sort of 'securely' I'd welcome it.</p>
  
  <p>ps. I know that sending login credentials via such a form would probably be super insecure and you'd need to use OAuth but since our API doesn't support it yet, the first version of the extension would have to be something similar to what I described just to get it working (like a prototype) and I'd work on making it better in the future.</p>