1

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>

1 件の回答 1

2

itunes の xml は <im:name> のように、im という xml namespace を使っています。
jQuery 1.11 / Mac OS X で試したところ、

  • find() は namespace の指定が不要。
  • children() は namespace の指定が必要で、かつ、children('im\\:name') とコロンの前にバックスラッシュ2つが必要。

でした。

また、popup.html を表示させたタイミングで Ajax を動かすのでよければ chrome.browserAction.onClicked.addListener や chrome.runtime.onMessage.addListener は不要です。

popup.js を以下のように修正すると動きました。

// js/popup.js

$(function() {
  $.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 $name = $(this).children('im\\:name');
  var musicName = $name.text();
  var $artist = $(this).find('artist');
  var artistName = $artist.text();
  $('#music-list').append('<a href="#" class="list-group-item">' + musicName + '</a>')
  console.log(artistName);
}

<im:name> が xml の中に2つ存在します。<entry> の直下にあるものだけにアクセスするために children() を使っています。

なお manifest.js では https://itunes.apple.com/ への接続を許可してあります。

{
  "manifest_version": 2,

  "name": "name of this extension",
  "description": "description of this extension",
  "version": "1.0",

  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html"
  },
  "permissions": [
    "activeTab",
    "https://itunes.apple.com/"
  ]
}
1

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。