Chrome 扩展：避免重复？
每次扩展刷新时，它都会复制整个 feed.json。如何防止这种情况发生，并且仅在旧项目之上添加来自 feed.json 的新项目（更新时）？另外，如何仅在添加新项目时设置 badgeText ？
这是我到目前为止得到的：
background.html
<html>
<head>
<script type="text/javascript">
var fetchFreq = 30000; // how often we fetch new items (30s)
var req; // request object
var unreadCount = 0; // how many unread items we have
var items; // all currently fetched items
getItems();
setInterval(getItems, fetchFreq);
function getItems() {
req = new XMLHttpRequest();
req.open('GET', 'http://siteurl.com/feed.json');
req.onload = processItems;
req.send();
}
function processItems() {
var res = JSON.parse(req.responseText);
unreadCount += res.length;
if (unreadCount > 0) {
chrome.browserAction.setBadgeBackgroundColor({
color: [255, 0, 0, 255]
});
chrome.browserAction.setBadgeText({text: '' + unreadCount});
}
items = res.concat(items);
}
</script>
</head>
</html>
popup.html
<html>
<head>
<link rel="stylesheet" href="popup.css" />
<script src="util.js"></script>
<script>
var bg; // background page
// timeline attributes
var timeline;
var template;
var link;
var image;
var author;
var content;
onload = setTimeout(init, 0); // workaround for http://crbug.com/24467
// initialize timeline template
function init() {
chrome.browserAction.setBadgeText({text: ''});
bg = chrome.extension.getBackgroundPage();
bg.unreadCount = 0;
timeline = document.getElementById('timeline');
template = xpath('//ol[@id="template"]/li', document);
link = xpath('//div[@class="thumbnail"]/a', template);
image = xpath('img', link);
author = xpath('//div[@class="text"]/a', template);
content = xpath('//div[@class="text"]/span', template);
update();
}
// update display
function update() {
var user;
var item;
for (var i in bg.items) {
user = bg.items[i];
// thumbnail
link.title = user.name;
link.href = openInNewTab(profileurl);
image.src = user.thumbnail;
image.alt = user.name;
// text
author.href = openInNewTab(profileurl);
author.innerHTML = user.name;
content.innerHTML = linkify(bg.items[i].profileurl);
// copy node and update
item = template.cloneNode(true);
timeline.appendChild(item);
}
}
</script>
</head>
<body>
<div id="body">
<div id="title">
<h2>Chrome Extension</h2>
</div>
<ol id="timeline" />
</div>
<ol id="template">
<li>
<div class="thumbnail">
<a>
<img />
</a>
</div>
<div class="text">
<a></a>
<span></span>
</div>
<div class="clear"></div>
</li>
</ol>
</body>
</html>
feed.json
{
"name":"John Doe",
"about":"I am me",
"thumbnail":"http://thumbnail.jpg",
"profileurl":"http://siteurl.com/profileurl.php"
}
提前致谢。该扩展的目的是从 feed.json 中获取新项目并显示在 popup.html 中。可以将其视为新 Twitter 推文的提要阅读器。
Everytime the extension refreshes it duplicates the entire feed.json. How do I prevent this and only add new items from feed.json (when that is updated) on top of the old ones? Also how do I only set the badgeText when new items have been added?
Here's what I got so far:
background.html
<html>
<head>
<script type="text/javascript">
var fetchFreq = 30000; // how often we fetch new items (30s)
var req; // request object
var unreadCount = 0; // how many unread items we have
var items; // all currently fetched items
getItems();
setInterval(getItems, fetchFreq);
function getItems() {
req = new XMLHttpRequest();
req.open('GET', 'http://siteurl.com/feed.json');
req.onload = processItems;
req.send();
}
function processItems() {
var res = JSON.parse(req.responseText);
unreadCount += res.length;
if (unreadCount > 0) {
chrome.browserAction.setBadgeBackgroundColor({
color: [255, 0, 0, 255]
});
chrome.browserAction.setBadgeText({text: '' + unreadCount});
}
items = res.concat(items);
}
</script>
</head>
</html>
popup.html
<html>
<head>
<link rel="stylesheet" href="popup.css" />
<script src="util.js"></script>
<script>
var bg; // background page
// timeline attributes
var timeline;
var template;
var link;
var image;
var author;
var content;
onload = setTimeout(init, 0); // workaround for http://crbug.com/24467
// initialize timeline template
function init() {
chrome.browserAction.setBadgeText({text: ''});
bg = chrome.extension.getBackgroundPage();
bg.unreadCount = 0;
timeline = document.getElementById('timeline');
template = xpath('//ol[@id="template"]/li', document);
link = xpath('//div[@class="thumbnail"]/a', template);
image = xpath('img', link);
author = xpath('//div[@class="text"]/a', template);
content = xpath('//div[@class="text"]/span', template);
update();
}
// update display
function update() {
var user;
var item;
for (var i in bg.items) {
user = bg.items[i];
// thumbnail
link.title = user.name;
link.href = openInNewTab(profileurl);
image.src = user.thumbnail;
image.alt = user.name;
// text
author.href = openInNewTab(profileurl);
author.innerHTML = user.name;
content.innerHTML = linkify(bg.items[i].profileurl);
// copy node and update
item = template.cloneNode(true);
timeline.appendChild(item);
}
}
</script>
</head>
<body>
<div id="body">
<div id="title">
<h2>Chrome Extension</h2>
</div>
<ol id="timeline" />
</div>
<ol id="template">
<li>
<div class="thumbnail">
<a>
<img />
</a>
</div>
<div class="text">
<a></a>
<span></span>
</div>
<div class="clear"></div>
</li>
</ol>
</body>
</html>
feed.json
{
"name":"John Doe",
"about":"I am me",
"thumbnail":"http://thumbnail.jpg",
"profileurl":"http://siteurl.com/profileurl.php"
}
Thanks in advance. The extension's purpose is to fetch new items from feed.json and show in the popup.html. Think of it like a feed reader for new twitter tweets.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
我知道现在看起来不错，但是拥有一个全局
req对象可能不如为每个请求拥有一个对象安全。您似乎从未清除过
物品。您的弹出窗口和背景应该能够通信。后台应分别保存新旧提要，并且当弹出窗口显示它们时，应释放它们。例如，考虑将旧项目保存在一个数组中，将新项目保存在一个单独的数组中。然后，当弹出窗口向用户显示新的提要时，它可以调用 bg.clearItems() ，它将新的提要复制到旧的提要数组中，然后在下一个请求时显示新的提要被放入现在为空的新项目数组中。
I know it seems fine now, but having a single global
reqobject is probably not as safe as having one for each request.You don't seem to ever be clearing the
items. Your popup and background should communicate. The background should hold the new and old feeds separately and when the popup shows them, should release them.Consider, for example, holding the old items in an array, and the new ones in a separate array. And then when the popup shows the new feeds to the user it can call
bg.clearItems()which will copy the new ones into the array of the old ones, and then on the next request the new items are put into the now-empty new items array.