2

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?

Community
  • 1
  • 1
Advicer
  • 1,300
  • 1
  • 14
  • 26

2 Answers2

1

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

PAEz
  • 8,366
  • 2
  • 34
  • 27
  • Thanks a lot. That's what i was trying to do. It works perfectly. – Advicer Jan 17 '12 at 11:00
  • Any idea why when I click on one of the links this just refreseh me the popup.html page? I would like to open a new tab of chrome with the page from the link I clicked. I tried setting "target" attribute to "_blank" for each "a" element, but the result was opening the popup.html in a new tab. Thanks – Advicer Jan 17 '12 at 19:15
  • Sorry, yeah your going to need to put an onClick event that uses create tab to open the links. Ive changed the code to do that for you and added the ability to remember the previous news and display that incase you want to click on multiple options because the popup closes when you click on one....got a little carried away actually, was a good learning experience ; – PAEz Jan 19 '12 at 16:42
  • Thanks a lot. I'm working on it by myself and your code resolved many other issues I had. Thanks again. – Advicer Jan 19 '12 at 18:30
  • Awesome, glad to hear it helped. One reason I did it the way I did is I reckon it would now be reasonably easy to stick this in a background page and do checks every five minutes or so and use a desktop notification if theres new items. Just create a new list and compare the the first item of the old lists link against a new list starting at the end. If you dont find it their all new, if you do then the ones above it (if any) are new. Then you'd never miss your important soccer news (I take it thats what it is, I dont know italian;)) – PAEz Jan 19 '12 at 18:58
  • The next step i thought about was desktop notifications and I had your same idea: to store the old list and compare with the new one, and this can be done in so many ways. Thanks for the advise. – Advicer Jan 19 '12 at 19:24
0

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.

abraham
  • 46,583
  • 10
  • 100
  • 152
  • I tried to load the page like you said but i got an exception trying to debug: xhr status: [Exception: DOMException].I followed the Hello world google example [link](http://code.google.com/chrome/extensions/getstarted.html). The page i want to load is "http://www.milannews.it/?action=search&section=32&". – Advicer Jan 16 '12 at 20:56
  • You are going to have to be more specific about the error then that. – abraham Jan 16 '12 at 22:22