Google chrome 用于刷新页面的Chrome扩展_Google Chrome_Iframe_Google Chrome Extension

Google chrome 用于刷新页面的Chrome扩展

google-chrome iframe google-chrome-extension

Google chrome 用于刷新页面的Chrome扩展,google-chrome,iframe,google-chrome-extension,Google Chrome,Iframe,Google Chrome Extension,我试图开发一个Chrome扩展，通过每5分钟刷新一次，可以显示足球新闻网站上的最后3条新闻（显然，该页面在任何选项卡中都没有打开）。我的想法是在iframe中加载页面，加载页面后，访问页面DOM并仅提取包含新闻的文本节点。我尝试了很多方法使用ready和load函数，我尝试了遵循这些解决方案，但总是收到警告。我的问题是：有没有一种方法可以让我做到这一点而不会遇到跨域安全问题？是否有一些简单的示例可以使用？用于加载页面，并使用jQuery或regex解析您要查找的数据的原始HTML 请记住，目标站

我试图开发一个Chrome扩展，通过每5分钟刷新一次，可以显示足球新闻网站上的最后3条新闻（显然，该页面在任何选项卡中都没有打开）。我的想法是在iframe中加载页面，加载页面后，访问页面DOM并仅提取包含新闻的文本节点。我尝试了很多方法使用ready和load函数，我尝试了遵循这些解决方案，但总是收到警告。我的问题是：有没有一种方法可以让我做到这一点而不会遇到跨域安全问题？是否有一些简单的示例可以使用？

用于加载页面，并使用jQuery或regex解析您要查找的数据的原始HTML

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

以下是使用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>


函数renderNews（新闻列表）{
$（'#news'）.html（''）；
$（新闻列表）。每个（功能（i，项）{
var link=document.createElement（'a'）；
$（link.attr（'href'，item.link））；
$（link.html（item.description）；
$（链接）。单击（函数（）{
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）；
$（“#新闻”）。附加（列表项）；
});
}
函数getNews（）{
$.get（”http://www.milannews.it/?action=search§ion=32，null，函数（数据，文本状态）
{
如果（数据）{
var news=$（数据）.find（.list”）.find（'li'）.slice（0,3）；
$（“#状态”）。文本（“”）；
var newsList=[]；
$（新闻）。每个（功能（i，项目）{
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]；
新闻列表[i]=新闻项目；
});
renderNews（新闻列表）；
setItem（'oldNews'，JSON.stringify（newsList））；
}
});
}
函数onPageLoad（）{
if（localStorage[“oldNews”！=null）renderNews（JSON.parse（localStorage[“oldNews”]）；
获取新闻（）；
}

正在查看新消息。。。

别忘了将xhr内容的URL放在清单的权限部分……

我试图像您所说的那样加载页面，但在调试时遇到异常：xhr status:[异常：DOMException]。我遵循了Hello world google示例。我要加载的页面是“”。您需要更详细地说明错误。非常感谢。这就是我想做的。它工作得很好。你知道为什么当我点击其中一个链接时，它会重新显示popup.html页面吗？我想打开一个新的chrome标签页，上面有我点击的链接。我尝试为每个“a”元素将“target”属性设置为“_blank”，但结果是在新选项卡中打开popup.html。谢谢，是的，你需要放一个onClick事件，使用create选项卡打开链接。我修改了代码，为你做到这一点，并添加了记忆以前新闻的功能，并显示，如果你想点击多个选项，因为当你点击其中一个时弹出窗口关闭……实际上有点忘乎所以，这是一个很好的学习体验；谢谢。我自己在做，你的代码解决了我遇到的许多其他问题。再次感谢。太棒了，很高兴听到这有帮助。我这样做的一个原因是，我认为现在可以很容易地将其粘贴在背景页面上，每五分钟左右进行一次检查，如果有新项目，则使用桌面通知。只需创建一个新列表，并将旧列表链接的第一项与从末尾开始的新列表进行比较。如果你没有发现它们都是新的，如果你发现了，那么上面的那些（如果有的话）都是新的。这样你就不会错过重要的足球新闻（我想是这样的，我不懂意大利语；）