Chrome ExtencionでAjaxを行い、HTMLを表示したい
chrome extensionでitune RSSをパースしてHTMLに表示したくて以下のコードを書いたのですが、結果が反映されませんでした。 どこを変更すれば表示できるようになりますか? 教えて下さい。よろしくおねがいします。
<!--popup.js-->
chrome.browserAction.onClicked.addListener(function(){
sendMessage({action: "getMusic"});
})
var sendMessage = function(message, callback){
chrome.runtime.sendMessage(message, callback);
};
chrome.runtime.onMessage.addListener(
function (request, sender, sendResponse){
if(request.action == "getMusic"){
$.ajax({
url: 'https://itunes.apple.com/jp/rss/topsongs/limit=50/genre=29/xml',
method: 'GET',
dataType: 'xml',
success: function(feed) {
$(feed).find('entry').each(disp);
},
error: function(){
console.log('itunes api search error.', arguments);
},
});
}
}
)
//HTMLに追加
var disp = function(){
var userAgent = window.navigator.userAgent.toLowerCase();
if ((userAgent.indexOf('msie') != -1) || (userAgent.indexOf('firefox') != -1)) {
$name = $(this).find('im\\:name');
$musicName = $(name).find('label');
$artist = $(this).find('im\\:artist');
$artistName = (artist).find('label');
$('#music_list').append('<a href="#" class="list-group-item">' + musicName + '</a>')
}else{
$name = $('im:name', this).text();
$musicName = $(name).find('label');
$artsit = $('im:artist', this).text();
$artistName = $(artist).find('label');
$('#music_list').append('<a href="#" class="list-group-item">' + musicName + '</a>');
}
}
<!--popup.html-->
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content='IE=edge'>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/bootstrap.min.css" rel="stylesheet">
<script src = "js/jquery-1.11.2.min.js"></script>
<script src = "js/popup.js"></script>
<script src = "js/bootstrap.min.js"></script>
</head>
<body width="250">
<div class="container">
<div class="listgroup" id="music_list">
<a href="#" class="list-group-item active">aiueo</a>
<a href="#" class="list-group-item">kakikukeko</a>
</div>
</div>
</body>
</html>