Chrome ExtencionでAjaxを行い、HTMLを表示したい

投稿者: Anonymous

chrome extensionでitune RSSをパースしてHTMLに表示したくて以下のコードを書いたのですが、結果が反映されませんでした。 どこを変更すれば表示できるようになりますか? 教えて下さい。よろしくおねがいします。

_x000D_

_x000D_

<!--popup.js-->_x000D_
chrome.browserAction.onClicked.addListener(function(){_x000D_
  sendMessage({action: "getMusic"});_x000D_
})_x000D_
_x000D_
var sendMessage = function(message, callback){_x000D_
  chrome.runtime.sendMessage(message, callback);_x000D_
};_x000D_
_x000D_
chrome.runtime.onMessage.addListener(_x000D_
  function (request, sender, sendResponse){_x000D_
    if(request.action == "getMusic"){_x000D_
      $.ajax({_x000D_
        url: 'https://itunes.apple.com/jp/rss/topsongs/limit=50/genre=29/xml',_x000D_
        method: 'GET',_x000D_
        dataType: 'xml',_x000D_
        success: function(feed) {_x000D_
          $(feed).find('entry').each(disp);_x000D_
        },_x000D_
        error: function(){_x000D_
          console.log('itunes api search error.', arguments);_x000D_
        },_x000D_
      });_x000D_
    }_x000D_
  }_x000D_
)_x000D_
_x000D_
//HTMLに追加_x000D_
var disp = function(){_x000D_
  var userAgent = window.navigator.userAgent.toLowerCase();_x000D_
  if ((userAgent.indexOf('msie') != -1) || (userAgent.indexOf('firefox') != -1)) {_x000D_
    $name = $(this).find('im\:name');_x000D_
    $musicName = $(name).find('label');_x000D_
    $artist = $(this).find('im\:artist');_x000D_
    $artistName = (artist).find('label');_x000D_
    $('#music_list').append('<a href="#" class="list-group-item">' + musicName + '</a>')_x000D_
  }else{_x000D_
    $name = $('im:name', this).text();_x000D_
    $musicName = $(name).find('label');_x000D_
    $artsit = $('im:artist', this).text();_x000D_
    $artistName = $(artist).find('label');_x000D_
    $('#music_list').append('<a href="#" class="list-group-item">' + musicName + '</a>');_x000D_
  }_x000D_
}

_x000D_

<!--popup.html-->_x000D_
<!DOCTYPE html>_x000D_
<html lang="ja">_x000D_
<head>_x000D_
  <meta charset="utf-8">_x000D_
  <meta http-equiv="X-UA-Compatible" content='IE=edge'>_x000D_
  <meta name="viewport" content="width=device-width, initial-scale=1.0">_x000D_
  <link href="css/bootstrap.min.css" rel="stylesheet">_x000D_
  <script src = "js/jquery-1.11.2.min.js"></script>_x000D_
  <script src = "js/popup.js"></script>_x000D_
  <script src = "js/bootstrap.min.js"></script>_x000D_
</head>_x000D_
<body width="250">_x000D_
  <div class="container">_x000D_
    <div class="listgroup" id="music_list">_x000D_
      <a href="#" class="list-group-item active">aiueo</a>_x000D_
      <a href="#" class="list-group-item">kakikukeko</a>_x000D_
    </div>_x000D_
  </div>_x000D_
</body>_x000D_
</html>

_x000D_

_x000D_

_x000D_

解決

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/"
  ]
}
回答者: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *