javascript - Any way to pull data from an API in a Chrome extension - Stack Overflow

admin管理员组

文章数量:1394544

I'm trying to create a Chrome extension that pulls and manipulates data from Metacritic. I found this pretty great API online that would let me send a GET request for the data I need and return it in a JSON. However, it doesn't look like I can do it directly in JS.

Is there any way to run the API request in the extension? I saved the URL as a variable in the JS file and formatted it so that all it would take is plugging it into the request... if I could figure out how it would work.

Edit: After thinking, maybe one way to solve it would be to run a script in one of the available languages (like Ruby) FROM the Javascript file in the extension... Is this possible?

I'm trying to create a Chrome extension that pulls and manipulates data from Metacritic. I found this pretty great API online that would let me send a GET request for the data I need and return it in a JSON. However, it doesn't look like I can do it directly in JS.

Is there any way to run the API request in the extension? I saved the URL as a variable in the JS file and formatted it so that all it would take is plugging it into the request... if I could figure out how it would work.

Edit: After thinking, maybe one way to solve it would be to run a script in one of the available languages (like Ruby) FROM the Javascript file in the extension... Is this possible?

• javascript
• json
• google-chrome
• google-chrome-extension

Share Improve this question Follow edited Dec 19, 2014 at 21:49 nao asked Dec 19, 2014 at 21:37 naonao 1,19811 gold badge1717 silver badges4444 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

The main reason you may not be able to access an API from javascript is the same-origin security restriction.

Chrome extensions can request permissions to access a given domain and bypass those restrictions, documentations of this can be found at: https://developer.chrome./extensions/xhr#requesting-permission

Adding the following to your extensions manifest file should do the trick:

"permissions": [
    "https://byroredux-metacritic.p.mashape./"
],

Once you've done that you should be able to access the API using any normal XHR client from your extensions javascript (be careful for any security concerns). The most mon API for XHR is probably the jQuery method $.ajax.

For example something like:

$.ajax({
    url: "https://byroredux-metacritic.p.mashape./find/game",
    method: "POST",
    headers: {
        "X-Mashape-Key": API_KEY
    },
    data: {
        platform: 1,
        retry: 4,
        title: "The Elder Scrolls V: Skyrim"
    },
    dataType: "json",
    success: function(data) { console.log(data) }
})

(Note: none of this code has been tests).

I haven't developed a Chrome extension, but it's my understanding you can include whatever JS you like with it.

I'd remend using a library, like this one: https://github./swagger-api/swagger-js

Save it inside your extension and add it as a dependency

"content_scripts": [
{ 
  "matches": ["..."],
  "js": ["swagger.js"]
}

Then get it running (it's worth taking a look at the docs on GitHub, too):

window.swagger = new SwaggerApi({
url: "https://byroredux-metacritic.p.mashape./find/game",
success: function() {
  if(swagger.ready === true) {
    // Upon connection, retrieve something
    swagger.apis.title.getGameByTitle({title:'The Elder Scrolls V: Skyrim'}, function(data) {
      var game = data.content.data;
    });
  }
}
});

It has something to specify headers with too which I think you'll need for that particular API.

I suggest a "Vanilla" JS library since including jQuery for this may well be overkill and hamper performance.

I am not a chrome extension developer but this may help https://developer.chrome./extensions/xhr

本文标签： javascriptAny way to pull data from an API in a Chrome extensionStack Overflow