如何将 JSON 字符串从外部 URL 加载到 Chrome 扩展程序答案

【问题标题】：How to load a JSON string from an external URL onto a Chrome extension如何将 JSON 字符串从外部 URL 加载到 Chrome 扩展程序
【发布时间】：2015-10-15 02:59:48
【问题描述】：

我是 Chrome 扩展程序开发的新手，所以请帮助我。

我正在尝试从此 URL 读取 JSON 字符串 http://www.roblox.com/catalog/json?Subcategory=16&SortType=3&ResultsPerPage=10

我想在 browser_action.html popup 上的 HTML 表格中显示结果。

我知道这是一个非常笼统的问题，但如果你能指导我，它会对我有所帮助。

【问题讨论】：

这不是一个通用问题，而是一个广泛问题。将其一分为二可能会更好，因为这里有两个单独的问题（获取数据并将其显示为表格）。
两个 q 都是现有问题所涵盖的重复项。 dup 但公里懒得搜索它们。
好的，那我如何获取数据呢？任何教程？我确实搜索过，但没有运气
使用 $.getJSON(url,data,success(data,status,xhr))
到目前为止你尝试过什么？您需要阅读 cross-domain XHR 以从 roblox.com 获取 JSON 和 chrome.browserAction 以显示浏览器操作弹出窗口。如果您有具体问题，请打开一个新问题。

标签： javascript jquery html google-chrome google-chrome-extension

【解决方案1】：

浏览了一下，在W3School找到了分步指南

我用这个工具来创建模板：Extensionizr

我刚刚将 Popup.js 添加到与 browser_action.html 相同的文件夹中

Popup.js 内部：

var xmlhttp = new XMLHttpRequest();
var url = "http://www.w3schools.com/website/Customers_MYSQL.php";

xmlhttp.onreadystatechange=function() {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        myFunction(xmlhttp.responseText);
    }
}
xmlhttp.open("GET", url, true);
xmlhttp.send();

function myFunction(response) {
    var arr = JSON.parse(response);
    var i;
    var out = "<table>";

for(i = 0; i < arr.length; i++) {
    out += "<tr><td>" + 
    arr[i].Name +
    "</td><td>" +
    arr[i].City +
    "</td><td>" +
    arr[i].Country +
    "</td></tr>";
}
out += "</table>";
document.getElementById("id01").innerHTML = out;
}

在 browser_action.html 内：

<!doctype html>
<style type="text/css">
    #mainPopup {
        padding: 10px;
        height: 200px;
        width: 400px;
        font-family: Helvetica, Ubuntu, Arial, sans-serif;
    }
    h1 {
        font-size: 2em;
    }
</style>
<script src=popup.js></script>

<div id="mainPopup">

<div id="id01"></div>

就是这样:)

【讨论】：

好吧，尽管这个问题没有得到很好的接受，但不能因为事后实际编译答案而责怪你！投上你的一票。