9268


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

[code]

    <!--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>');
      }
    }
[/code]

[code]

    <!--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>
[/code]


CC BY-SA 3.0
2015-03-09T02:55:24.757
7635
2015-04-17T12:33:27.067
7232
question
javascript html jquery ajax chrome-extension
Chrome ExtencionでAjaxを行い､HTMLを表示したい


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 を以下のように修正すると動きました。

[code]

    // 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);
    }
    
[/code]

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

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

[code]

    {
      "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/"
      ]
    }
    
[/code]


CC BY-SA 3.0
2015-04-17T12:33:27.067
9268
2015-04-17T12:33:27.067
490
7635
answer