3

I am developing a Chrome Extension and I am trying to achieve this:

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 https://developer.chrome.com/extensions/storage ). 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.

So far I've tried something like this:

popup.js

document.getElementById('login-btn').addEventListener('click', function() {
    chrome.runtime.getBackgroundPage(function(bgWindow) {
        bgWindow.myBackgroundMethod();
    });
});

background.js

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&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 && http.status == 200) {
         alert(http.responseText);
     }
    }
    http.send(params);
   }

manifest.json





      {
      "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"]
        }
      ]
    }

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.

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.

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.

Georgi Dimitrov
  • 59
  • 1
  • 8
  • I believe your logic is right. A few questions, when you are saying "it doesn't work", what do you mean? Did `myBackgroundMethod` get executed? Did you receive any response from server? Have you view the network console and see if the request has been successfully sent? And what's your `manifest.json` like? And your url should contain schema part, like `http://www.oursite.com/index/...` – Haibara Ai Jun 29 '16 at 08:13
  • I've edited the post a little bit and added the manifest.json file but to answer you, I have a simple console.log in the background.js file in the method and for some reason it doesn't fire when I click on the big LOGIN button that has the event listener – Georgi Dimitrov Jun 30 '16 at 05:14
  • [Inspect the popup](https://developer.chrome.com/extensions/tut_debugging) to see if you are actually attaching the listener. Also, I don't see why you want to call background here; you can do XHR from the popup itself in this case. – Xan Jun 30 '16 at 15:39
  • You didn't include the api url in `permissions` field and should use something like `http://www.oursite.com/index/...` rather than `www.oursite.com/index/...`. However, that's not the root cause since you said `myBackgroundMethod` isn't executed at all. So you should check if clicking handler is executed and as @Xan has mentioned, you could just move the background logic to popup page. – Haibara Ai Jul 01 '16 at 00:29
  • I did as you suggested and moved the logic into popup.js and things are working fine. The reason why I wanted to put into the background.js was because it would be a one time thing and somewhere along the Docs I did see 'put stuff that you'd want to happen once in the background.js so you don't waste resources' – Georgi Dimitrov Jul 01 '16 at 05:14

0 Answers0