在浏览器插件开发中,清除历史记录通常与其他数据类型(如 cookies、localStorage 等)一起进行。然而,由于不同数据类型的 API 限制,混合处理可能导致错误,例如:
"At least one data type doesn't support filtering by origin"
为了解决这个问题,我们需要对不同数据类型进行分类处理,并优化历史记录的删除逻辑,使其更加精准、高效,并支持时间范围选择。
1. 问题分析
-
不同数据类型的处理方式不同:
- 可按域名清除:
cookies、localStorage - 需要全局清除:
cache、serviceWorkers - 历史记录:需要使用
chrome.historyAPI 单独处理
- 可按域名清除:
-
原始实现的问题:
- 直接在
chrome.browsingData.remove()方法中包含history,导致"不支持按 origin 过滤"的错误。 - 域名匹配逻辑不精确,可能误删其他网站的历史记录。
- 缺乏时间范围控制,无法满足不同清除需求。
- 直接在
2. 解决方案
(1) 分类处理不同数据类型
按照数据类型的特点进行分类,并分别调用不同的 API 进行清理:
async function clearBrowsingData(domain: string, since?: number) {
const removeOptions: chrome.browsingData.RemovalOptions = {
originTypes: { protectedWeb: true },
since: since || 0,
};
// 1. 按域名清除数据
chrome.browsingData.remove(removeOptions, {
cookies: true,
localStorage: true,
});
// 2. 需要全局清除的数据
chrome.browsingData.remove(removeOptions, {
cache: true,
serviceWorkers: true,
});
// 3. 历史记录单独处理
await clearHistory(domain, since);
}
(2) 优化历史记录清除
精准域名匹配
使用 chrome.history.search 查询符合条件的历史记录,并用 URL 对象确保精确匹配:
async function clearHistory(domain: string, since?: number) {
const items = await chrome.history.search({
text: domain,
startTime: since || 0,
endTime: Date.now(),
maxResults: 1000,
});
// 精确匹配域名
const deletePromises = items
.filter((item) => {
if (!item.url) return false;
try {
const url = new URL(item.url);
return url.hostname === domain; // 确保匹配的是完整域名
} catch {
return false;
}
})
.map((item) => chrome.history.deleteUrl({ url: item.url! }));
await Promise.all(deletePromises);
console.log(`已清除 ${deletePromises.length} 条与 ${domain} 相关的历史记录`);
}
(3) 增加时间范围选择
用户可以选择清除的时间范围,以提供更灵活的控制:
const timeRanges = {
"1h": Date.now() - 60 * 60 * 1000,
"24h": Date.now() - 24 * 60 * 60 * 1000,
"7d": Date.now() - 7 * 24 * 60 * 60 * 1000,
"30d": Date.now() - 30 * 24 * 60 * 60 * 1000,
"all": 0, // 清除所有历史记录
};
// 用户选择时间范围
const selectedRange = timeRanges["7d"];
clearBrowsingData("example.com", selectedRange);
3. 技术要点
- 使用
chrome.history.search查询指定域名的历史记录 - 使用
URL进行精确匹配,避免误删 - 异步并行处理,提高执行效率
- 提供时间范围选择,满足不同场景需求
- 避免
chrome.browsingData.remove()中混合history造成的错误
4. 改进效果
✅ 修复错误:解决 "At least one data type doesn't support filtering by origin" 报错。
✅ 精准匹配:使用 URL 解析域名,防止误删其他网站记录。
✅ 更灵活的控制:支持最近 1h、24h、7d、30d、全部时间 清除选项。
✅ 提高性能:异步并行处理,避免阻塞 UI 线程。
总结
优化后的历史记录清除功能,解决了 API 限制导致的错误,并提供了精准的域名匹配和灵活的时间控制,为用户带来更可靠和高效的体验。这种改进在 Chrome 插件开发中非常实用,可作为浏览数据管理的最佳实践! 🚀