猫抓cat-catch开发者模式：源码加载与调试技巧

引言：为什么需要开发者模式？

还在为浏览器扩展功能受限而烦恼吗？还在为无法自定义资源嗅探规则而困扰吗？猫抓（cat-catch）的开发者模式为你打开了全新的可能性大门！本文将深入解析猫抓扩展的源码加载、调试技巧和高级功能开发，让你从普通用户进阶为扩展开发者。

读完本文，你将掌握：

• ✅ 猫抓扩展源码的完整加载流程
• ✅ 开发者模式下的高级调试技巧
• ✅ 核心代码模块的功能解析
• ✅ 自定义功能开发的最佳实践
• ✅ 常见问题排查与性能优化

一、源码安装与环境配置

1.1 获取源码

猫抓扩展采用GPL-3.0开源协议，源码可通过以下方式获取：

# 克隆仓库到本地
git clone https://gitcode.com/GitHub_Trending/ca/cat-catch.git
cd cat-catch

1.2 浏览器开发者模式启用

flowchart TD
    A[打开浏览器扩展管理页面] --> B[开启开发者模式开关]
    B --> C[点击加载已解压的扩展程序]
    C --> D[选择cat-catch项目目录]
    D --> E[扩展成功加载并启用]

具体操作步骤：

1. Chrome/Edge浏览器：

   • 访问 chrome://extensions/ 或 edge://extensions/
   • 开启右上角的"开发者模式"
   • 点击"加载已解压的扩展程序"
   • 选择cat-catch项目根目录

2. Firefox浏览器：

   • 访问 about:debugging
   • 选择"此Firefox"
   • 点击"临时加载扩展"
   • 选择项目中的manifest.json文件

1.3 环境要求检查

浏览器类型	最低版本要求	推荐版本	特殊说明
Chrome	93+	104+	完整功能需要104+
Edge	93+	104+	基于Chromium内核
Firefox	兼容版本	最新版本	需要非国区IP访问

二、核心架构深度解析

2.1 项目结构概览

graph TD
    A[cat-catch项目结构] --> B[manifest.json]
    A --> C[js/ 核心逻辑]
    A --> D[css/ 样式文件]
    A --> E[catch-script/ 注入脚本]
    A --> F[img/ 资源图标]
    A --> G[_locales/ 多语言]
    
    B --> B1[扩展配置]
    B --> B2[权限声明]
    B --> B3[命令定义]
    
    C --> C1[background.js]
    C --> C2[content-script.js]
    C --> C3[function.js]
    C --> C4[init.js]

2.2 关键文件功能说明

文件路径	主要功能	调试重点
js/background.js	后台服务 worker，资源嗅探核心	网络请求监听、数据处理
js/content-script.js	内容脚本，页面交互	视频控制、消息通信
js/function.js	工具函数库	模板处理、文件操作
js/init.js	初始化配置	全局变量设置、存储管理
catch-script/	动态注入脚本	深度搜索、录制功能

三、高级调试技巧

3.1 开发者工具使用

3.1.1 后台脚本调试

// 在background.js中添加调试代码
console.log('🐱 猫抓调试信息:', {
    tabId: G.tabId,
    enable: G.enable,
    cacheSize: Object.keys(cacheData).length
});

// 监听特定事件进行调试
chrome.webRequest.onResponseStarted.addListener(
    function(data) {
        console.debug('响应开始:', data.url, data.type);
        // 调试代码...
    },
    { urls: ["<all_urls>"] },
    ["responseHeaders"]
);

3.1.2 内容脚本调试

在页面中右键 → 检查 → 控制台中切换到内容脚本上下文：

// 查看当前页面视频状态
chrome.runtime.sendMessage(
    {Message: "getVideoState"}, 
    response => console.log('视频状态:', response)
);

3.2 内置调试功能

猫抓提供了多个内置调试功能：

// 1. 预览页面的debug按钮
document.querySelector('#debug').addEventListener('click', () => {
    console.dir(fileItems); // 输出所有文件项详情
});

// 2. 正则表达式调试
G.Regex = [
    {
        type: "ig",
        regex: "https://cache\\.video\\.[a-z]*\\.com/dash\\?tvid=.*",
        ext: "json",
        state: true  // 开启调试
    }
];

3.3 性能监控与优化

// 性能监控代码示例
const performanceMonitor = {
    startTime: Date.now(),
    requestCount: 0,
    
    logPerformance: function() {
        const duration = Date.now() - this.startTime;
        console.log(`⏱️ 性能统计: ${this.requestCount}个请求, 耗时${duration}ms`);
    },
    
    reset: function() {
        this.startTime = Date.now();
        this.requestCount = 0;
    }
};

// 在findMedia函数中添加监控
function findMedia(data, isRegex = false, filter = false, timer = false) {
    performanceMonitor.requestCount++;
    if (performanceMonitor.requestCount % 100 === 0) {
        performanceMonitor.logPerformance();
    }
    // ...原有逻辑
}

四、自定义功能开发指南

4.1 添加新的资源类型支持

// 在js/init.js的G.OptionLists.Ext中添加新类型
G.OptionLists.Ext.push(
    { "ext": "flac", "size": 0, "state": true },      // 无损音频
    { "ext": "webp", "size": 0, "state": true },      // WebP图片
    { "ext": "avif", "size": 0, "state": true }       // AVIF图片
);

// 添加对应的MIME类型支持
G.OptionLists.Type.push(
    { "type": "audio/flac", "size": 0, "state": true },
    { "type": "image/webp", "size": 0, "state": true },
    { "type": "image/avif", "size": 0, "state": true }
);

4.2 自定义正则匹配规则

// 添加自定义网站的资源匹配规则
G.OptionLists.Regex.push(
    {
        type: "ig",
        regex: "https://example\\.com/video/.*\\.(mp4|m3u8)",
        ext: "mp4",
        state: true,
        blackList: false
    },
    {
        type: "ig", 
        regex: "https://cdn\\.example-site\\.com/.*/segment_.*\\.ts",
        ext: "ts",
        state: true,
        blackList: false
    }
);

4.3 开发新的注入脚本

// 在catch-script/目录下创建新脚本
// custom-detector.js
(function() {
    'use strict';
    
    // 自定义资源检测逻辑
    function detectCustomResources() {
        const resources = [];
        
        // 检测特定类型的资源
        document.querySelectorAll('video[src], audio[src]').forEach(media => {
            if (media.src && !media.src.startsWith('blob:')) {
                resources.push({
                    url: media.src,
                    type: media.tagName.toLowerCase(),
                    element: media
                });
            }
        });
        
        return resources;
    }
    
    // 向背景脚本报告发现的资源
    const detectedResources = detectCustomResources();
    detectedResources.forEach(resource => {
        chrome.runtime.sendMessage({
            Message: "addMedia",
            url: resource.url,
            type: resource.type,
            href: window.location.href
        });
    });
    
    // 在G.scriptList中注册新脚本
    // 需要在background.js中添加相应的处理逻辑
})();

五、常见问题排查手册

5.1 安装与加载问题

问题现象	可能原因	解决方案
扩展无法加载	manifest.json格式错误	检查manifest版本和权限配置
功能不生效	浏览器版本过低	升级浏览器到93+版本
资源嗅探失败	权限配置不足	检查host_permissions配置

5.2 性能优化建议

// 1. 缓存优化
const MAX_CACHE_SIZE = 5000; // 调整缓存大小
if (cacheData[data.tabId].length > MAX_CACHE_SIZE) {
    cacheData[data.tabId] = cacheData[data.tabId].slice(-MAX_CACHE_SIZE);
}

// 2. 防抖处理优化
let debounceTime = 0;
const DEBOUNCE_DELAY = 300; // 调整防抖时间

function save(tabId) {
    if (Date.now() - debounceTime < DEBOUNCE_DELAY) {
        clearTimeout(debounce);
        debounce = setTimeout(() => this.save(tabId), DEBOUNCE_DELAY);
        return;
    }
    debounceTime = Date.now();
    // 保存逻辑...
}

5.3 调试技巧总结

1. 使用console.group进行分组调试：

console.group('🐱 猫抓资源嗅探');
console.log('请求URL:', data.url);
console.log('资源类型:', data.type);
console.log('标签ID:', data.tabId);
console.groupEnd();

2. 条件断点设置：

// 只在特定条件下触发断点
if (data.url.includes('example.com')) {
    debugger; // 条件断点
}

3. 网络请求监控：

// 监控特定类型的请求
chrome.webRequest.onBeforeRequest.addListener(
    function(details) {
        if (details.url.includes('.m3u8')) {
            console.log('M3U8请求:', details.url);
        }
    },
    {urls: ["<all_urls>"]},
    ["requestBody"]
);

六、进阶开发与扩展

6.1 集成外部下载工具

// 集成Aria2下载器的配置示例
G.OptionLists = {
    // ...其他配置
    enableAria2Rpc: true,
    aria2Rpc: "http://localhost:6800/jsonrpc",
    aria2RpcToken: "your_token_here",
    enableAria2RpcReferer: true
};

// 自定义下载逻辑
function customDownloadHandler(data) {
    if (G.enableAria2Rpc) {
        // 使用Aria2下载
        aria2AddUri(data, onSuccess, onError);
    } else {
        // 使用浏览器默认下载
        chrome.downloads.download({
            url: data.url,
            filename: data.downFileName
        });
    }
}

6.2 开发自定义UI界面

<!-- 在popup.html中添加自定义UI组件 -->
<div class="custom-section">
    <h3>高级设置</h3>
    <div class="setting-item">
        <label>
            <input type="checkbox" id="customRegex" />
            启用自定义正则匹配
        </label>
    </div>
    <div class="setting-item">
        <label>自定义匹配模式:</label>
        <textarea id="customPattern" placeholder="输入正则表达式..."></textarea>
    </div>
</div>

// 对应的JavaScript处理逻辑
document.getElementById('customRegex').addEventListener('change', function(e) {
    chrome.storage.sync.set({ customRegexEnabled: e.target.checked });
});

document.getElementById('customPattern').addEventListener('change', function(e) {
    try {
        new RegExp(e.target.value); // 验证正则表达式
        chrome.storage.sync.set({ customPattern: e.target.value });
    } catch (error) {
        alert('正则表达式格式错误');
    }
});

结语：开启你的扩展开发之旅

通过本文的详细讲解，相信你已经对猫抓扩展的开发者模式有了全面的了解。从源码加载到高级调试，从功能定制到性能优化，这些技巧将帮助你更好地理解和扩展这个强大的资源嗅探工具。

记住，开源项目的魅力在于社区的参与和贡献。如果你开发了有用的功能或修复了bug，考虑向项目提交Pull Request，让更多的用户受益。

下一步行动建议：

1. 🛠️ 尝试添加对自己常用网站的资源嗅探支持
2. 🔧 根据实际需求调整性能参数
3. 📚 阅读项目源码，理解其设计哲学
4. 🤝 参与社区讨论，分享你的开发经验

Happy coding！愿你在猫抓扩展的开发之路上越走越远，创造出更多有价值的功能！