优化 Chrome 历史记录清除功能:精准匹配与稳定性提升

247 阅读3分钟

在浏览器插件开发中,清除历史记录通常与其他数据类型(如 cookieslocalStorage 等)一起进行。然而,由于不同数据类型的 API 限制,混合处理可能导致错误,例如:

"At least one data type doesn't support filtering by origin"

为了解决这个问题,我们需要对不同数据类型进行分类处理,并优化历史记录的删除逻辑,使其更加精准、高效,并支持时间范围选择。


1. 问题分析

  • 不同数据类型的处理方式不同

    • 可按域名清除cookieslocalStorage
    • 需要全局清除cacheserviceWorkers
    • 历史记录:需要使用 chrome.history API 单独处理
  • 原始实现的问题

    • 直接在 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 插件开发中非常实用,可作为浏览数据管理的最佳实践! 🚀