2012-01-16 23 views
2

私はサッカーのニュースサイトの最後の3つのニュースを表示できるChrome拡張機能を開発しようとしていました(明らかに、そのページはどのタブでも開いていません)。私の理想はiframeの中にページをロードし、ページがロードされるとページDOMにアクセスし、ニュースでテキストノードのみを抽出することでした。私は多くの方法での準備の負荷の機能を試してみましたが、私はこの解決策に従いましたhereしかし、私はいつも警告を受け取ります。私の質問は、ドメイン間のセキュリティに問題がなければ、私はそれを行うことができるのですか?私が使用できる簡単な例がありますか?Chrome拡張機能を使用してページを更新する

答えて

1

ここでは、JQueryを使ってどのように行うことができますか(JQueryについてはわかりませんが、このアプローチをどこかに見て、うまくいくと思います)。
....
http://code.google.com/chrome/extensions/xhr.html

を私がポップアップでこれを入れて、それが働いていた....

<!DOCTYPE html> 
<html> 
<head> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script> 
<script> 

function renderNews(newsList){ 
     $('#news').html(''); 
     $(newsList).each(function(i,item){ 
     var link = document.createElement('a'); 
     $(link).attr('href',item.link); 
     $(link).html(item.description); 
     $(link).click(function(){ 
      chrome.tabs.create({url:$(this).attr('href')}); 
     }); 

     var linksDate = document.createElement('span'); 
     //$(linksDate).text(item.date); 
     $(linksDate).text(item.day + '-' + item.month + ' ' + item.hour + ':' + item.minute+' - '); 

     var listItem = document.createElement('li'); 
     $(listItem).append(linksDate).append(link); 

     $("#news").append(listItem); 
     }); 
} 


    function getNews() { 
    $.get("http://www.milannews.it/?action=search&section=32", null, function(data, textStatus) 
    { 

     if(data) { 
     var news=$(data).find(".list").find('li').slice(0,3) ; 
     $("#status").text(''); 

     var newsList=[]; 
     $(news).each(function(i, item){ 
     var newsItem={}; 
     newsItem.description=$(item).find('a').html(); 
     newsItem.link='http://www.milannews.it/'+$(item).find('a').attr('href'); 
     newsItem.date=$(item).find('span').first().text(); 
     newsItem.day=newsItem.date.split(' ')[0].split('.')[0]; 
     newsItem.month=newsItem.date.split(' ')[0].split('.')[1]; 
     newsItem.hour=newsItem.date.split(' ')[1].split(':')[0]; 
     newsItem.minute=newsItem.date.split(' ')[1].split(':')[1]; 
     newsList[i]=newsItem; 
     }); 
     renderNews(newsList); 
     localStorage.setItem('oldNews',JSON.stringify(newsList)); 
     } 
    }); 
    } 

    function onPageLoad(){ 
    if (localStorage["oldNews"]!=null) renderNews(JSON.parse(localStorage["oldNews"])); 
    getNews(); 
    } 
</script> 
</head> 
<body onload="onPageLoad();" style="width: 700px"> 
<ul id="news"></ul> 
<div id="status">Checking for new news...</div> 
</body> 
</html> 

そして、あなたがあなたのマニフェストの権限の一部でXHRのものとなったURLを置くことを忘れてはいけません

+0

ありがとうございました。それは私がやろうとしていたものです。それは完全に動作します。 – Advicer

+0

リンクをクリックするとpopup.htmlページが表示されます。私は、クリックしたリンクのページから新しいクロムのタブを開きたいと思います。 "a"要素ごとに "target"属性を "_blank"に設定しようとしましたが、その結果、popup.htmlが新しいタブで開きました。ありがとう – Advicer

+0

申し訳ありません、あなたのリンクを開くには、作成タブを使用してonClickイベントを配置する必要があります。 Iveはこれを行うためのコードを変更し、以前のニュースを覚えて、複数のオプションをクリックしたいと思ったときにポップアップを閉じるようにする機能を追加しました。良い学習経験。 – PAEz

0

xhrを使用して、ページをロードし、jQueryまたは正規表現を使用して、探しているデータの生のHTMLを解析します。

宛先サイトは、自動的にそのような方法でサイトにアクセスしたくない場合があることに注意してください。サイトとリソースを尊重してください。

+0

あなたが言ったようにページを読み込もうとしましたが、デバッグしようとしたときに例外が発生しました:xhr status:[例外:DOMException] Hello world google example [link](http://code.google.com/ chrome/extensions/getstarted.html)。ロードしたいページは「http://www.milannews.it/?action=search§ion=32&」です。 – Advicer

+0

あなたはそのエラーについてより具体的にする必要があります。 – abraham

関連する問題