access to $http in chrome extension background js

Question

I have angular working fine for the front end popup of my chrome extension but I need the background script to do an ajax request and I cannot even begin to think how I can get angular's $http there.

Specifically I will be responding with the ajax result from a call to the chrome API "chrome.runtime.sendMessage".

So currently I have my listener wired up in the background.js

var someData="TESTDATA";
chrome.runtime.onMessage.addListener(
  function(request, sender, sendResponse) {
    sendResponse(someData);
});

and what I want is

chrome.runtime.onMessage.addListener(
  function(request, sender, sendResponse) {
      $http({
    method: 'GET',
    url: "http://autocomplete.wunderground.com/' +
          'aq?query=" +
          'query'
  }).success(function(data) {
    sendResponse(data.RESULTS);
  }).error(function(err) {
    console.log(err);
  });
});

which obviously does not work even though angular.js is in the manifest file for the background.

How can I use the angular $http object in this setup? (I do not have an html page for the background.js)

Even though you said the angular is in your manifest file, could you please show us your manifest file? — rdleal
– rdleal, Commented Jun 5, 2015 at 16:45
Why do you need to use angular's $http? Why not just a standard XHR request? — abraham
– abraham, Commented Jun 5, 2015 at 21:52
You may want to take a look at stackoverflow.com/a/24405235/934239 — Xan
– Xan, Commented Jun 24, 2015 at 16:35

Walter Chapilliquen - wZVanG · Accepted Answer · 2015-06-06 05:04:15Z

1

To use $http, you must be within a controller, directive or Angular's service.

To do it the way you're doing, you can create a global variable, then within a controller you should assign $http to the variable you created.

var $http2;

myApp.controller('foo', ["$scope", "$http", function($scope, $http){
    $http2 = $http;
});

//Now you have access to: $http2({method:...})

Or you can do it in a simpler way:

var x = new XMLHttpRequest();
x.onload = function () {
    if(x.status == 200) {
        console.log(x.responseText);
        sendResponse(x.responseText);
    }
};
x.onerror = function(err) {
    console.log(err)
};
x.open('GET', 'http://autocomplete.wunderground.com/' + 'aq?query=' +  'query');
x.send()

answered Jun 6, 2015 at 5:04

Walter Chapilliquen - wZVanG

12.1k8 gold badges45 silver badges64 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

rob Over a year ago

Yep trying to use angular as library was a really bad Idea I will just use standard AJAX

alex-cooke · Accepted Answer · 2015-06-24 16:08:32Z

1

To use the $http provider without instantiating any controllers, use the following:

var $http = angular.injector(['ng']).get("$http");

answered Jun 24, 2015 at 16:08

alex-cooke

111 bronze badge

1 Comment

rob Over a year ago

Although I had settled on the AJAX route I did go back and try your suggestion and it works flawlessly.

Collectives™ on Stack Overflow

access to $http in chrome extension background js

2 Answers 2

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related