Question

我正在尝试在javascript中为chrome编写一个xkcd扩展名。要获取最新图像的URL，我从http://dynamic.xkcd.com/api-0/jsonp/comic/获取JSON并尝试解析它。显然，这不太有效。

也没有正确解析json，也没有弹出窗口中显示的硬编码网址中的图像。我该如何解决这些问题？

所以我的问题是：

如何从json中检索图像网址？
如何将图像插入弹出窗口？

这是我的代码：（我按照教程，这就是为什么还有一些闪烁片段留下......）

manifest.json：

{
"name": "xkcd extension",
"version": "1.0",
"description": "The first xkcd extension that I made.",
"browser_action": {
    "default_icon": "icon.png",
    "popup": "popup.html"
},
"permissions": [
"http://www.xkcd.com/"
]
}

popup.html：

<!doctype html>
<html>
<head>
    <title>Getting Started Extension's Popup</title>
    <style>
        body {
            min-width:357px;
            overflow-x:hidden;
        }

        img {
            margin:5px;
            border:2px solid black;
            vertical-align:middle;
            width:300px;
            height:300px;
        }
    </style>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
    </script>
    <script>
        showPhotos();

        function showPhotos() {
            //                var url="http://xkcd.com/info.0.json";
            var url = "http://dynamic.xkcd.com/api-0/jsonp/comic/";
            alert(url);
            //                var imgURL;
            //                $.getJSON(url, function(data) {
            //                    alert(data.img);
            //                    imgURL=data.img;
            //                });
            //alert(imgURL);

            var img = document.createElement("image");
            alert(img);
            img.src = 'http://imgs.xkcd.com/comics/wrong_superhero.png';
            alert(img.src);
            document.body.appendChild(img);
        }

    </script>
</head>
<body>
    <div id="result">
    </div>
</body>
</html>

Answer 1

var img = document.createElement("image");

绝对应该是

var img = document.createElement("img");

解析json并在popop中显示图像

1 个答案: