Chrome extension used to refresh pages

2019-07-13 11:31发布

站内问答 / 后端开发
842 2 5

I was trying to develop a Chrome extension that can display me the last 3 news from a soccer news site (obviously the page is not open in any tab), by refreshing every 5 minutes. My ideea was to load the page inside an iframe and, once the page is loaded, access the page DOM and extract only the text nodes with the news. I've tried in many ways using ready and load functions, I tried to follow this solutions here but i always get warnings. My question is: is there a way I can do that without having troubles with cross-domain security? Are there any simple examples i can use?

2条回答
手持菜刀，她持情操
2楼-- · 2019-07-13 12:20

Use xhr to load the page and use jQuery or a regex to parse the raw HTML for the data you are looking for.

Keep in mind that the destination site may not want to you access their site in such an automated fashion. Be respectful of their site and resources.

查看更多
0人赞 添加讨论(0) 举报
仙女界的扛把子
3楼-- · 2019-07-13 12:29

Here's how you could do it using JQuery (please keep in mind I dont know JQuery, just saw this approach somewhere and thought it might work for you).
I put this in a popup and it worked....

<!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>

And dont forget to put the urls your getting with the xhr stuff in the permissions part of your manifest....
http://code.google.com/chrome/extensions/xhr.html

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)