Question

我正在尝试开发一个Chrome扩展程序，可以向我显示足球新闻网站的最后3条新闻（很明显，该页面未在任何标签页中打开），每5分钟刷新一次。我的想法是在iframe中加载页面，一旦页面加载，访问页面DOM并仅提取带有新闻的文本节点。我已尝试使用准备好和加载函数的多种方式，我尝试按照此解决方案here但我总是收到警告。我的问题是：有没有办法在不遇到跨域安全问题的情况下做到这一点？我可以使用任何简单的例子吗？

Answer 1

以下是使用JQuery的方法（请记住，我不知道JQuery，只是在某个地方看到了这种方法，并认为它可能适合你）。
我把它放在一个弹出窗口中，它起作用....

<!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填充你的网址.... http://code.google.com/chrome/extensions/xhr.html

Answer 2

使用xhr加载页面并使用jQuery或正则表达式来解析您要查找的数据的原始HTML。

请注意，目标网站可能不希望您以这种自动方式访问其网站。尊重他们的网站和资源。

Chrome扩展程序用于刷新页面

2 个答案: