CODEWITHSUNDEEP
javascriptweb-servicesgoogle-chrome-extension
Wylan Osorio
Wylan Osorio

Reputation: 1166

Chrome Extension communicate with rest web service

I am new in chrome extension, and I am developing an extension that will communicate to my rest web service. My rest web service will return a json string. What i wanted to do is to call my web service, get the response json.

Currently I have this in my background.js:

chrome.browserAction.onClicked.addListener(function(tab) { 
    chrome.tabs.getSelected(null,function(tab) {
        var link = tab.url;
        alert(link);
    });
});

My plan is when user clicked on the icon extension, the current tab url will be sent to my web service, and it will get response json.

My question is, what is the code or syntax that does something like webclient.downloadstring in C#? Or how can I communicate with the web service?

Upvotes: 11

Views: 13776

Answers (2)

Gamelot
Gamelot

Reputation: 11

I think all thing is in permissions.

http://www.appuntivari.net/informatica/programmazione/chrome-extension/chrome-extension-with-restfull-external-api

{
  "manifest_version": 2,

  "name": "AppuntiVari.net - Agenda events",
  "description": "AppuntiVari.net - Agenda events",
  "version": "1.0",

  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html"
  },
  "permissions": ["tabs", "http://appuntivari.net/*"],
  "options_page": "options.html",
  "homepage_url": "http://appuntivari.net",

  "background": { "scripts": ["js/jquery-1.10.2.js",
"js/jquery-ui-1.10.4.custom.js","background.js","popup.js"] },

  "web_accessible_resources": [
    "48.png"
  ],
  "icons": {"16": "16.png", "48": "48.png", "128": "128.png"}
}

$.ajax({
url:  "http://appuntivari.net/MyServiceAPI-portlet/
api/secure/jsonws/agenda/get-events-byIdUser/id_user/"+id_user,
type: "GET",

Upvotes: 0

Rob W
Rob W

Reputation: 349042

The API you're looking for is called XMLHttpRequest (also known as "AJAX"). Read the documentation at https://developer.chrome.com/extensions/xhr for more information.

Here's an example:

chrome.browserAction.onClicked.addListener(function(tab) { 
    var link = tab.url;
    var x = new XMLHttpRequest();
    x.open('GET', 'http://example.com/?whatever=' + link);
    x.onload = function() {
        alert(x.responseText);
    };
    x.send();
});

Note. The XMLHttpRequest API is asynchronous. This means that you cannot do something like this:

...
var result;
x.onload = function() {
    result = x.responseText;
};
x.send();
alert(result); // Does not behave as you expect!

Upvotes: 11

Related Questions