2

JavasriptとChrome拡張機能の世界への第一歩。Chromeガイドの簡単な拡張機能のチュートリアルに従いました。その上に構築して、stackoverflowのユーザーページからユーザーのアバターを表示するようにコードを変更したいと思います。

アボートイベントが発生している理由と、XMLHttpRequestオブジェクトに応答が入力されていない理由を特定しようとしています。

私manifest.jsonは：

{  
    /*snip*/
    "manifest_version": 2,
    "browser_action": { 
                    "default_icon": "icon.png",
                    "default_popup": "popup.html"
                  },
    "permissions": [ 
        "http://stackoverflow.com/users",
        "http://stackoverflow.com/users/*",
        "notifications"
    ],
    "web_accessible_resources": [
        "icon.png"
    ]
}

私のpopup.html：

<script src="popup.js"></script>

そして私のJavascriptファイルは次のとおりです。

var req = new XMLHttpRequest();
req.open(
    "GET",
    "http://stackoverflow.com/users",
    true);
window.addEventListener('loadend', showPhotos);
req.addEventListener("error", errorMsg, false);
req.addEventListener("abort", cancelMsg, false);

req.send(null);

私cancelMsgが言ったように、実行されており、私はその理由を理解しようとしています。私のChromeのバージョンは23です。

4

2 に答える 2

4

それは私のために次のコードで動作し、コンソールから次の出力を取得しました。

出力

ここにコンソールからの出力をリンクしました、それはすべてのユーザーの詳細などを持っています。

マニフェスト.json

マニフェストファイルを変更せずに使用しました

{  
    "manifest_version": 2,
    "browser_action": { 
                    "default_icon": "logo.png",
                    "default_popup": "popup.html"
                  },
    "permissions": [ 
        "http://stackoverflow.com/users",
        "http://stackoverflow.com/users/*",
        "notifications"
    ],
    "web_accessible_resources": [
        "logo.png"
    ],
    "name":"Demo for XHR",
    "description":"This is a demo for XHR",
    "version":"1"
}

popup.html

ささいなhtmlページを作成しました

<html>
<head>
<script src="popup.js"></script>
</head>
<body>
</body>
</html>

popup.js

このコードで応答を得ることができます。

//Define functions
function showPhotos() {
    console.log("In Show Photos");

}
function errorMsg() {
    console.log("In error message");
}
function cancelMsg() {
    console.log("In error message");
}
function onload() {
    //New request
    var req = new XMLHttpRequest();
    //Register events
    req.onreadystatechange = handleStateChange;
    req.onerror = errorMsg;
    req.onabort = cancelMsg;
    //Make a call
    req.open("GET", "http://stackoverflow.com/users", true);
    req.send();

}

function handleStateChange(xhr) {
// Print response when status is 200
    if (xhr.srcElement.status == 200) {
        console.log(xhr.srcElement.response);
    }
}
//Invoked onload event 
document.addEventListener("DOMContentLoaded", onload);
于 2012-12-23T09:12:20.883 に答える
0

@Sudarshanによる回答は、イベントリスナーを適切なオブジェクトに追加していないという事実を特定するのに役立ちました。リクエスト自体ではなくウィンドウにオンロードを追加しました。

于 2012-12-29T20:07:31.970 に答える