最完整WebRequest API应用指南：猫抓cat-catch如何实现99%资源捕获率

你还在为网页资源无法下载而烦恼？作为内容创作者，是否经常遇到精彩视频无法保存的情况？猫抓cat-catch扩展通过深度应用WebRequest API（网络请求API），实现了99%的网页资源捕获能力。本文将从实战角度解析这一技术原理，读完你将掌握：

• WebRequest API的三大核心事件监听机制
• 猫抓如何解决请求头丢失的行业难题
• 防重复捕获算法的实现方案
• 完整的资源捕获流程图解

技术原理：WebRequest API的全方位应用

猫抓cat-catch的核心能力源自对Chrome扩展API中WebRequest API（网络请求API）的深度应用。该API允许扩展在浏览器发送请求的整个生命周期中进行拦截和修改，从而实现资源捕获功能。

三大核心事件监听

在js/background.js中，猫抓实现了三个关键的WebRequest事件监听：

// 请求发送前触发 - 用于正则匹配URL
chrome.webRequest.onBeforeRequest.addListener(
  function (data) {
    try { findMedia(data, true); } catch (e) { console.log(e); }
  }, { urls: ["<all_urls>"] }, ["requestBody"]
);

// 发送请求头时触发 - 用于保存请求头信息
chrome.webRequest.onSendHeaders.addListener(
  function (data) {
    if (data.requestHeaders) {
      G.requestHeaders.set(data.requestId, data.requestHeaders);
      data.allRequestHeaders = data.requestHeaders;
    }
    try { findMedia(data, true); } catch (e) { console.log(e); }
  }, { urls: ["<all_urls>"] }, ['requestHeaders', 'extraHeaders']
);

// 接收到响应时触发 - 用于获取完整响应信息
chrome.webRequest.onResponseStarted.addListener(
  function (data) {
    data.allRequestHeaders = G.requestHeaders.get(data.requestId);
    if (data.allRequestHeaders) {
      G.requestHeaders.delete(data.requestId);
    }
    findMedia(data);
  }, { urls: ["<all_urls>"] }, ["responseHeaders"]
);

这三个事件分别对应请求的不同阶段，形成了完整的资源捕获链条。其中onSendHeaders事件解决了长期困扰开发者的请求头获取难题，通过全局变量G.requestHeaders（一个Map对象）临时存储请求头信息，在响应阶段再进行匹配合并。

请求头管理机制

请求头信息对于资源下载至关重要，特别是包含认证信息的Cookie和Referer字段。猫抓通过以下机制确保请求头的完整获取：

1. 在请求发送阶段(onSendHeaders)，将请求头存入全局Map对象
2. 使用requestId作为唯一键，确保请求与响应的正确匹配
3. 在响应阶段(onResponseStarted)，取出并删除临时存储的请求头

这种设计既保证了请求头的完整性，又避免了内存泄漏。关键实现代码位于js/background.js第45-74行。

核心算法：资源识别与去重

猫抓能够精准识别各类媒体资源并避免重复捕获，背后是一套高效的资源处理算法。

资源类型识别流程

猫抓采用多维度检测机制识别资源类型，主要流程如下：

graph TD
    A[开始检测] --> B{检查URL后缀}
    B -->|有匹配| C[确认为对应资源类型]
    B -->|无匹配| D{检查Content-Type响应头}
    D -->|有匹配| C
    D -->|无匹配| E{检查响应头中的attachment字段}
    E -->|有匹配| F[解析文件名获取类型]
    E -->|无匹配| G[判定为未知类型]

这一流程在findMedia函数中实现，通过层层递进的检测确保资源类型的准确识别。代码位于js/background.js第137-160行。

高效去重策略

为避免重复捕获同一资源，猫抓实现了基于URL指纹的去重机制：

// 查重逻辑 - 避免CPU占用过高，限制检查数量
if (G.checkDuplicates && cacheData[data.tabId].length <= 500) {
    const tabFingerprints = G.urlMap.get(data.tabId) || new Set();
    if (tabFingerprints.has(data.url)) {
        return; // 找到重复，直接返回
    }
    tabFingerprints.add(data.url);
    G.urlMap.set(data.tabId, tabFingerprints);
    // 限制Set大小，防止内存占用过大
    if (tabFingerprints.size >= 500) {
        tabFingerprints.clear();
    }
}

该算法使用Set数据结构存储已捕获资源的URL指纹，在保证查重效率的同时，通过限制Set大小避免内存占用过高。代码位于js/background.js第192-202行。

实战解析：关键功能实现

多标签页资源隔离

猫抓能够区分不同标签页的资源，实现这一功能的核心是tabId管理机制：

// 确保资源与标签页关联
data.tabId = data.tabId == -1 ? G.tabId : data.tabId;

// 按tabId存储资源数据
cacheData[data.tabId] ??= [];
cacheData[G.tabId] ??= [];

通过将资源数据存储在以tabId为键的对象中，实现了不同标签页资源的完全隔离。同时，猫抓监听标签页切换事件，实时更新当前活动标签页ID：

// 监听标签页切换事件
chrome.tabs.onActivated.addListener(function (activeInfo) {
    G.tabId = activeInfo.tabId;
    // 更新扩展图标显示的资源数量
    if (cacheData[G.tabId] !== undefined) {
        SetIcon({ number: cacheData[G.tabId].length, tabId: G.tabId });
        return;
    }
    SetIcon({ tabId: G.tabId });
});

资源缓存与清理策略

为平衡性能和内存占用，猫抓实现了智能缓存管理机制：

1. 定时清理：通过Chrome的alarms API定期清理冗余数据
2. 容量限制：单个标签页最多缓存10000条资源记录
3. 标签页关闭清理：监听标签页关闭事件，清理对应缓存

核心实现位于js/background.js的clearRedundant函数和js/function.js的第422-493行。

扩展功能：从捕获到下载的完整链路

猫抓不仅能捕获资源，还提供了完整的资源处理和下载能力。

自动下载功能

用户可开启自动下载功能，系统将自动下载符合条件的资源：

// 自动下载逻辑
if (G.featAutoDownTabId.size > 0 && G.featAutoDownTabId.has(info.tabId) && chrome.downloads?.State) {
    try {
        const downDir = info.title == "NULL" ? "CatCatch/" : stringModify(info.title) + "/";
        let fileName = isEmpty(info.name) ? stringModify(info.title) + '.' + info.ext : decodeURIComponent(stringModify(info.name));
        if (G.TitleName) {
            fileName = filterFileName(templates(G.downFileName, info));
        } else {
            fileName = downDir + fileName;
        }
        chrome.downloads.download({
            url: info.url,
            filename: fileName
        });
    } catch (e) { return; }
}

这段代码实现了根据页面标题自动创建下载目录、处理文件名特殊字符等功能，确保下载体验的流畅性。

M3U8解析支持

对于流媒体资源，猫抓提供了专门的M3U8解析器。当检测到M3U8类型资源时，会自动调用js/m3u8.js和m3u8.html进行处理，支持分片下载和合并。

总结与展望

猫抓cat-catch通过WebRequest API实现了高效的资源捕获能力，其架构设计和算法实现为类似工具提供了优秀的参考范例。核心优势包括：

1. 完整的请求生命周期覆盖：通过三个关键事件实现全方位监控
2. 高效的内存管理：请求头临时存储与定时清理机制
3. 精准的资源识别：多维度检测确保资源类型准确判断
4. 优化的性能表现：通过数据结构优化和数量限制避免性能问题

未来，随着浏览器API的不断发展，猫抓可能会引入更多创新功能，如基于AI的资源类型预测、更智能的重复资源识别等。对于开发者而言，深入理解猫抓的实现原理，不仅能帮助扩展功能开发，也能提升对浏览器工作原理的认知。

完整源代码可通过以下仓库获取：https://gitcode.com/GitHub_Trending/ca/cat-catch

如果你觉得本文有帮助，请点赞收藏，并关注作者获取更多技术解析。下一期我们将深入探讨猫抓的M3U8解密实现原理，敬请期待！