用于刷新页面的 Chrome 扩展
Posted
技术标签:
【中文标题】用于刷新页面的 Chrome 扩展【英文标题】：Chrome extension used to refresh pages 【发布时间】：2012-02-11 02:13:54 【问题描述】：我正在尝试开发一个 Chrome 扩展程序，它可以通过每 5 分钟刷新一次来向我显示来自足球新闻网站的最近 3 条新闻（显然该页面未在任何选项卡中打开）。我的想法是在 iframe 中加载页面，一旦加载页面，访问页面 DOM 并仅提取带有新闻的文本节点。我已经尝试了多种方式使用 ready 和 load 功能，我尝试遵循这个解决方案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§ion=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
【讨论】：
非常感谢。这就是我想要做的。效果很好。 知道为什么当我点击其中一个链接时，这只是刷新了 popup.html 页面吗？我想用我点击的链接中的页面打开一个新的 chrome 选项卡。我尝试将每个“a”元素的“target”属性设置为“_blank”，但结果是在新选项卡中打开了 popup.html。谢谢 抱歉，是的，您需要放置一个使用创建选项卡打开链接的 onClick 事件。我已经更改了代码来为您执行此操作，并添加了记住以前的新闻并显示您想要单击多个选项的功能，因为当您单击一个时弹出窗口会关闭....实际上有点忘乎所以，是良好的学习体验； 非常感谢。我正在自己处理它，您的代码解决了我遇到的许多其他问题。再次感谢。 太棒了，很高兴听到它有帮助。我这样做的一个原因是我认为现在将其粘贴在后台页面中并每五分钟左右进行一次检查并在有新项目时使用桌面通知会相当容易。只需创建一个新列表并将旧列表链接的第一项与从末尾开始的新列表进行比较。如果你没有发现它们都是新的，如果你发现它上面的那些（如果有的话）是新的。那么你永远不会错过重要的足球新闻（我认为就是这样，我不懂意大利语；））【参考方案2】：使用 xhr 加载页面并使用 jQuery 或正则表达式解析原始 HTML 以获取您要查找的数据。
请记住，目标网站可能不希望您以这种自动方式访问他们的网站。尊重他们的网站和资源。
【讨论】：
我尝试像您说的那样加载页面，但尝试调试时遇到异常：xhr 状态：[异常：DOMException]。我遵循了 Hello world google 示例link。我要加载的页面是“milannews.it/?action=search§ion=32&”。 您将不得不更具体地了解错误。以上是关于用于刷新页面的 Chrome 扩展的主要内容，如果未能解决你的问题，请参考以下文章