Chrome Extension 历史记录、下载记录和存储管理

Chrome Extension 历史记录、下载记录和存储管理

在现代浏览器扩展开发中，如何高效地管理历史记录、优化下载体验，以及构建灵活的数据存储方案，已经成为开发者们关注的焦点。今天，我们将深入探讨 Chrome 提供的 历史浏览记录 API、下载管理 API 和 存储管理 API，并通过一个实用项目带你快速上手这些功能，让你的插件不仅智能，还贴心。

历史浏览记录

基础功能

1. 数据查询：使用 chrome.history.search 方法，根据关键词和时间范围搜索用户的浏览历史记录。

代码语言：javascript代码运行次数：0运行复制

    chrome.history.search({ text: '', startTime: () - 7 * 24 * 60 * 60 * 1000 }, (results) => {
        cole.log(results); // 输出最近 7 天的历史记录
    });

1. 访问详情：借助 chrome.history.getVisits 方法，获取特定页面的访问时间和来源信息。

代码语言：javascript代码运行次数：0运行复制

    chrome.history.getVisits({ url: '' }, (details) => {
        cole.log(details); // 输出访问时间和跳转来源
    });

1. 隐私保护
   • 删除单个 URL 的历史记录：

代码语言：javascript代码运行次数：0运行复制

        chrome.history.deleteUrl({ url: '' }, () => {
            cole.log('URL 已删除');
        });

代码语言：javascript代码运行次数：0运行复制

- 清空所有历史记录：

代码语言：javascript代码运行次数：0运行复制

        chrome.history.deleteAll(() => {
            cole.log('所有历史记录已清空');
        });

进阶内容

完整 API 函数列表：

• chrome.history.search：用于按条件检索历史记录。 参数：
  • text：匹配的关键词。
  • startTime 和 endTime：搜索时间范围。
  • maxResults：返回结果的最大数量。
• chrome.history.getVisits 获取指定 URL 的访问记录详情，包括访问时间、来源等。
• chrome.history.deleteUrl：删除指定 URL 的历史记录。
• chrome.history.deleteRange：删除指定时间范围内的历史记录。

例子如下：

代码语言：javascript代码运行次数：0运行复制

   chrome.history.deleteRange(
       { startTime: () - 24 * 60 * 60 * 1000, endTime: () },
       () => cole.log('最近一天的历史记录已删除')
   );

虽然 chrome.history 没有监听新增或删除历史记录的直接事件，但你可以通过配合其他 API，例如 ，间接获取用户浏览行为：

代码语言：javascript代码运行次数：0运行复制

.addListener((tabId, changeInfo, tab) => {
    if (changeInfo.url) {
        cole.log(`用户访问了新页面: ${changeInfo.url}`);
    }
});

除此以外，我们还可以配合搜索条件，构建复杂过滤功能。例如，只查询访问量高于一定次数的记录：

代码语言：javascript代码运行次数：0运行复制

    chrome.history.search({ text: '', startTime: () - 0 * 24 * 60 * 60 * 1000 }, (results) => {
        ct frequentVisits = results.filter((item) => item.visitCount > 5);
        cole.log(frequentVisits);
    });

下载管理

浏览器的下载管理功能跟历史记录的 API 非常相似，大部分的能力和应用都是相通的。

基础功能

1. 下载查询：：使用 chrome.downloads.search 进行下载记录的查询，支持按时间、文件类型等条件筛选。

代码语言：javascript代码运行次数：0运行复制

    chrome.downloads.search({ query: '', startTime: () - 7 * 24 * 60 * 60 * 1000 }, (results) => {
        cole.log(results); // 输出最近一周的下载记录
    });

1. 任务管理：：控制下载任务，例如暂停、取消某个下载任务。
   • 暂停下载：

代码语言：javascript代码运行次数：0运行复制

        chrome.downloads.pause(downloadId, () => {
            cole.log('下载任务已暂停');
        });

• 取消下载：

代码语言：javascript代码运行次数：0运行复制

        chrome.(downloadId, () => {
            cole.log('下载任务已取消');
        });

记录清理：使用 chrome. 清除过期或特定时间段的下载记录。

代码语言：javascript代码运行次数：0运行复制

    chrome.({ startTime: () - 0 * 24 * 60 * 60 * 1000 }, () => {
        cole.log('0天前的下载记录已清除');
    });

实际应用

1. 自动分类助手：插件根据文件类型自动将下载的内容分类保存到不同的文件夹，比如文档、图片、视频等。
2. 任务监控工具：提供实时的下载任务进度提醒，并在完成后自动触发文件操作。

代码示例：

代码语言：javascript代码运行次数：0运行复制

chrome.downloads.search({}, function(downloads) {
  ct categorized = downloads.reduce((acc, item) => {
    ct ext = item.filename.split('.').pop();
    acc[ext] = acc[ext] || [];
    acc[ext].push(item);
    return acc;
  }, {});
  cole.log('分类后的下载记录:', categorized);
});

存储管理

Chrome 存储 API 提供了强大的支持，用于插件中数据的持久化和跨设备同步。它确保用户的设置和数据能够在不同设备间保持一致，同时支持实时监听功能，方便插件及时响应数据变化，提升用户体验和数据管理的效率。

核心功能

本地存储：chrome.storage.local 提供持久化存储功能，用于存储与扩展功能相关的数据，支持离线访问。

代码语言：javascript代码运行次数：0运行复制

chrome.storage.local.set({ key: 'value' }, function() {
    cole.log('数据已存储至本地');
});

跨设备同步:chrome.storage.sync 实现扩展配置的云端同步，确保数据在不同设备间保持一致。

代码语言：javascript代码运行次数：0运行复制

chrome.storage.sync.set({ key: 'value' }, function() {
    cole.log('数据已同步到云端');
});

实时监听：chrome. 监听存储数据的变化，一旦有变化，可以触发响应动作。

代码语言：javascript代码运行次数：0运行复制

chrome..addListener((changes, areaame) => {
    cole.log('存储数据已变化：', changes, areaame);
});

实际应用场景

1. 偏好设置管理器：存储用户个性化设置，例如主题、语言、清理规则等，方便用户跨设备同步和管理。
2. 数据持久化工具：：用户工作记录或任务状态在不同设备间保持一致，提升跨设备使用体验。

个人设置

以上 个 API 我主要用来清理历史记录和下载记录的。通过自己设定的一些策略来完成个性化需求的实现。

下面是我定义的几个相关的方法：

代码语言：javascript代码运行次数：0运行复制

  
// 删除历史记录  
function deleteHistory(page) {  
    chrome.browsingData.removeHistory({  
        url: page.url  
    }, function () {  
        if (chrome.runtime.lastError) {  
            (`delete Error history:`, chrome.runtime.lastError);  
        } else {  
            cole.log("delete page:", page.url);  
        }  
    });  
    // chrome.history.deleteUrl({url: page.url});  
    chrome.history.deleteUrl({url: page.url}, function () {  
        if (chrome.runtime.lastError) {  
            // (`delete Error history:`, chrome.runtime.lastError);  
        } else {  
            cole.log("delete page:", page.url);  
        }  
    });  
}  
  
function deleteDownlaods() {  
    chrome.downloads.search({}, (downloads) => {  
        downloads.forEach((download) => {  
            // 只删除已完成的下载记录  
            if (download.state === 'complete') {  
                chrome.({id: download.id}, () => {  
                    // chrome.downloads.removeFile(download.id, () => {  
                    if (chrome.runtime.lastError) {  
                        if (chrome.runtime. !== "Download file already deleted") {  
                            ("Error removing download:", chrome.runtime.);  
                        }  
                    } else {  
                        cole.log(`Removed download: ${download.id}`);  
                    }  
                });  
            } else {  
                cole.log(`Skipping download: ${download.id} (state: ${download.state})`);  
            }  
        });  
    });  
}
  
// 监听历史记录变化  
chrome.addListener(function (removed) {  
    cole.log("Removed visit:", removed);  
});  
  
function clearHistoryRecord() {  
    ct endTime = () - (5 * 24 * 60 * 60 * 1000);  
    chrome.history.deleteRange({  
        startTime: 0,//含义是删除所有历史记录  
        endTime: endTime//删除5天前的历史记录  
    }, function () {  
        cole.log(`Deleted history older than 5 days`);  
    });  
}

其实一个比较复杂的就是删除最近的历史记录的方法，主要区分了一些常用网站的域名：

代码语言：javascript代码运行次数：0运行复制

function clearRecentRecord() {  
    cole.info("clear recent record");  
    // start = () - 1000 * 60 * 60 * 12;// 12 小时前  
    end = () - 1000 * 60 * 10;// 10 分钟前  
    chrome.history.search({  
        text: "",  
        startTime: 0,//含义是删除所有历史记录,0表示从1970年1月1日开始  
        endTime: end,  
        maxResults: 1200  
    }, function (data) {  
        let domainMap = {};  
        let countMap = {};  
        cole.info("history data:", data.length);  
        for (let i = 0; i < data.length; i++) {  
            page = data[i];  
            let domain = page.url.split('/')[2];  
            let countUrl = domain;  
            ct parts = domain.split('.');  
            if (parts.length > 2) {  
                countUrl = parts.slice(-2).join('.');// 只取域名后两部分,-2表示倒数第二个,join表示拼接  
            }  
            if (shouldDeletePage(domain)) {  
                cole.info("should delete page:", domain);  
                deleteHistory(page);  
                continue;  
            }  
            if (delete2Domain.includes(countUrl)) {  
                deleteHistory(page);  
                continue;  
            }  
            // cole.info("page:", page);  
            // cole.log("url:", domain, page.url);            if (!domainMap[domain]) {// 如果不存在,则初始化为1  
                domainMap[domain] = 1;  
            } else {  
                domainMap[domain]++;// 记录域名出现的次数  
            }  
            if (!countMap[countUrl]) {// 如果不存在,则初始化为1  
                countMap[countUrl] = 1;  
            } else {  
                countMap[countUrl]++;// 记录url出现的次数  
            }  
            if (keep2Domains.includes(countUrl)) {  
                if (domainMap[domain] > 5) {  
                    deleteHistory(page);  
                }  
            } else {  
                if (countMap[countUrl] > 1) {  
                    deleteHistory(page);  
                }  
            }  
        }  
        cole.info("map:", domainMap);  
    });  
}

使用定时任务来定时执行，这个放在下期内容分享，专门分享一下定时任务的处理方式。

本文参与 腾讯云自媒体同步曝光计划，分享自。原始发表：2025-01-07，如有侵权请联系 cloudcommunity@tencent 删除chrome管理数据存储管理存储