2012-01-16 2 views
2

5 분마다 새로 고침을 통해 축구 뉴스 사이트의 마지막 3 개 뉴스를 볼 수있는 Chrome 확장 프로그램을 개발하고있었습니다 (분명히 페이지가 어떤 탭에서도 열려 있지 않음). 내 ideea는 iframe 안에 페이지를로드하고, 페이지가로드되면 페이지 DOM에 액세스하여 뉴스가있는 텍스트 노드 만 추출합니다. 나는 많은 방법으로 준비로드 기능을 사용하여 시도했습니다, 나는이 솔루션을 따라하려고 시도 here하지만 난 항상 경고를 얻을. 내 질문은 : 도메인 간 보안에 문제가 발생하지 않고이를 수행 할 수있는 방법이 있습니까? 내가 사용할 수있는 간단한 예제가 있습니까?크롬 확장 프로그램을 사용하여 페이지를 새로 고침

답변

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의 물건을 받고 URL을 넣어하는 것을 잊지 말아
http://code.google.com/chrome/extensions/xhr.html

+0

고마워. 그게 내가하려고했던거야. 그것은 완벽하게 작동합니다. – Advicer

+0

어떤 링크를 클릭하면 popup.html 페이지를 새로 고칩니다. 내가 클릭 한 링크에서 페이지가있는 새 크롬 탭을 열고 싶습니다. 각 "a"요소에 대해 "target"속성을 "_blank"로 설정하려고 시도했지만 그 결과 새 탭에서 popup.html을 열었습니다. 감사합니다 – Advicer

+0

죄송합니다, 예, 링크를 열려면 생성 탭을 사용하는 onClick 이벤트를 넣어야합니다. 필자는이를 위해 코드를 변경하고 이전 뉴스를 기억하고 여러 옵션을 클릭하려는 경우 팝업을 닫을 수 있기 때문에 이전 뉴스를 기억하는 기능을 추가했습니다. 좋은 학습 경험. – 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

관련 문제