从 Chrome 扩展程序中的 API 中提取数据的任何方法

Any way to pull data from an API in a Chrome extension

本文关键字：数据 任何 方法 提取 API 程序 Chrome 扩展      更新时间：2023-09-26

我正在尝试创建一个Chrome扩展程序，从Metacritic中提取和操作数据。我在网上找到了这个非常棒的 API，它可以让我为我需要的数据发送 GET 请求并以 JSON 形式返回它。但是，看起来我不能直接在 JS 中做到这一点。

有没有办法在扩展中运行 API 请求？我将 URL 保存为 JS 文件中的变量并对其进行格式化，以便只需将其插入请求中即可......如果我能弄清楚它将如何工作。

编辑：经过思考，也许解决它的一种方法是从扩展中的 Javascript 文件以可用语言(如 Ruby(之一运行脚本......这可能吗？

您可能无法从 javascript 访问 API 的主要原因是同源安全限制。

Chrome 扩展程序可以请求访问给定域的权限并绕过这些限制，有关这方面的文档，请访问：https://developer.chrome.com/extensions/xhr#requesting-permission

将以下内容添加到扩展清单文件应该可以解决问题：

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

完成此操作后，您应该能够使用任何普通的XHR客户端从扩展javascript访问API(请注意任何安全问题(。XHR最常见的API可能是jQuery方法$.ajax。

例如：

$.ajax({
    url: "https://byroredux-metacritic.p.mashape.com/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) }
})

(注意：这些代码都没有经过测试(。

我还没有开发Chrome扩展程序，但据我所知，您可以在其中包含您喜欢的任何JS。

我建议使用库，例如：https://github.com/swagger-api/swagger-js

将其保存在扩展中并将其添加为依赖项

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

然后让它运行(也值得看看 GitHub 上的文档(：

window.swagger = new SwaggerApi({
url: "https://byroredux-metacritic.p.mashape.com/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;
    });
  }
}
});

它也有一些东西可以指定标头，我认为该特定 API 也需要这些标头。

我建议使用"香草"JS库，因为为此包含jQuery可能会矫枉过正并妨碍性能。

我不是 chrome 扩展程序开发人员，但这可能会有所帮助https://developer.chrome.com/extensions/xhr

相关文章：