猫抓cat-catch内容脚本：allFrames与run_at参数深度解析
【免费下载链接】cat-catch 猫抓 chrome资源嗅探扩展 项目地址: https://gitcode.com/GitHub_Trending/ca/cat-catch
引言：iframe中的资源嗅探挑战
在日常网页浏览中，你是否遇到过这样的困境：视频网站使用iframe嵌套播放器，导致常规的资源嗅探工具无法捕获到真实的媒体资源地址？或者页面加载速度过快，资源嗅探脚本还没来得及执行，关键资源就已经完成了加载？
猫抓（cat-catch）浏览器扩展通过精心设计的allFrames和run_at参数配置，完美解决了这些痛点。本文将深入解析这两个关键参数的工作原理、配置方式以及在实际应用中的最佳实践。
内容脚本配置架构
manifest.json中的核心配置
猫抓扩展在manifest文件中定义了内容脚本的注入策略：
{
"content_scripts": [
{
"matches": ["https://*/*", "http://*/*"],
"js": ["js/content-script.js"],
"run_at": "document_start",
"all_frames": true
}
]
}
参数详解表
参数值作用适用场景run_atdocument_start在DOM构建前执行捕获早期加载的资源all_framestrue在所有frame中执行处理iframe嵌套内容
run_at参数：时机决定成败
执行时机对比分析
document_start的优势
早期拦截能力：在页面资源开始加载前就注入脚本完整监控覆盖：能够捕获页面初始化阶段的所有网络请求避免资源遗漏：防止因脚本执行延迟导致的资源嗅探失败
实际代码实现
在js/content-script.js中，脚本通过监听chrome.runtime.onMessage事件来处理各种媒体控制指令：
chrome.runtime.onMessage.addListener(function(Message, sender, sendResponse) {
if (Message.Message == "getVideoState") {
// 获取页面视频状态
let videoObj = [];
let videoSrc = [];
document.querySelectorAll("video, audio").forEach(function(video) {
if (video.currentSrc != "" && video.currentSrc != undefined) {
videoObj.push(video);
videoSrc.push(video.currentSrc);
}
});
// 特别处理iframe中的媒体元素
const iframe = document.querySelectorAll("iframe");
if (iframe.length > 0) {
iframe.forEach(function(iframe) {
if (iframe.contentDocument == null) { return true; }
iframe.contentDocument.querySelectorAll("video, audio").forEach(function(video) {
if (video.currentSrc != "" && video.currentSrc != undefined) {
videoObj.push(video);
videoSrc.push(video.currentSrc);
}
});
});
}
// ... 返回媒体状态信息
}
});
all_frames参数：穿透iframe壁垒
iframe资源嗅探的挑战
现代网站大量使用iframe技术来嵌入第三方内容，这给资源嗅探带来了巨大挑战：
同源策略限制：跨域iframe无法直接访问嵌套结构复杂：多层iframe嵌套增加访问难度动态加载机制：iframe可能异步加载内容
猫抓的解决方案
通过设置all_frames: true，内容脚本会自动注入到所有frame中：
// 在background.js中动态注入脚本到特定frame
chrome.scripting.executeScript({
target: {
tabId: details.tabId,
frameIds: [details.frameId] // 指定具体frame
},
files: files,
injectImmediately: true,
world: item.world
});
多frame嗅探流程
脚本注入策略体系
脚本类型与配置
猫抓定义了多种类型的捕获脚本，每种都有特定的注入策略：
脚本名称allFramesworld刷新策略功能描述search.jstrueMAINtrue深度搜索资源catch.jstrueMAINtrue缓存捕获recorder.jstrueMAINfalse视频录制recorder2.jsfalseISOLATEDfalse屏幕捕获webrtc.jstrueMAINtrueWebRTC录制
配置管理实现
在js/init.js中统一管理脚本配置：
G.scriptList.set("catch.js", {
key: "catch",
refresh: true,
allFrames: true,
world: "MAIN",
name: i18n.cacheCapture,
off: i18n.closeCapture,
i18n: true,
tabId: new Set()
});
动态注入机制
后台脚本监听frame加载事件，按需注入相应脚本：
chrome.webNavigation.onCommitted.addListener(function(details) {
G.scriptList.forEach(function(item, script) {
if (!item.tabId.has(details.tabId) || !item.allFrames) { return true; }
const files = [`catch-script/${script}`];
item.i18n && files.unshift("catch-script/i18n.js");
chrome.scripting.executeScript({
target: { tabId: details.tabId, frameIds: [details.frameId] },
files: files,
injectImmediately: true,
world: item.world
});
});
});
实战应用场景
场景一：视频网站iframe播放器
// 捕获iframe中的视频资源
const iframes = document.querySelectorAll("iframe");
iframes.forEach(function(iframe) {
try {
const iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
const mediaElements = iframeDoc.querySelectorAll("video, audio");
mediaElements.forEach(media => {
if (media.src && media.src.startsWith('blob:')) {
// 处理Blob类型的媒体资源
handleBlobMedia(media, iframe);
}
});
} catch (e) {
// 跨域iframe处理
console.log("跨域iframe访问受限");
}
});
场景二：早期资源拦截
// 在document_start阶段设置的资源监控
const originalCreateElement = document.createElement;
document.createElement = function() {
const element = originalCreateElement.apply(this, arguments);
if (arguments[0].toLowerCase() === 'video' || arguments[0].toLowerCase() === 'audio') {
setupMediaElementMonitoring(element);
}
return element;
};
场景三：动态内容处理
// 使用MutationObserver监控动态添加的iframe
const observer = new MutationObserver((mutations) => {
mutations.forEach((mutation) => {
mutation.addedNodes.forEach((node) => {
if (node.tagName === 'IFRAME') {
// 新iframe添加到页面时进行处理
processNewIframe(node);
}
});
});
});
observer.observe(document.body, { childList: true, subtree: true });
性能优化与注意事项
内存管理策略
资源去重机制：避免重复捕获相同资源缓存清理策略：定期清理过期数据帧数限制：避免过多frame导致性能问题
安全考虑
跨域限制：尊重浏览器同源策略隐私保护：不捕获敏感页面内容权限控制：明确脚本执行范围
兼容性处理
// 版本检测和兼容性处理
G.version = navigator.userAgent.match(/(Chrome|Firefox)\/([\d]+)/);
G.version = G.version && G.version[2] ? parseInt(G.version[2]) : 93;
// 低版本浏览器降级处理
if (G.version < 102) {
// 使用传统注入方式
useLegacyInjection();
}
总结与最佳实践
配置推荐
对于大多数资源嗅探场景，推荐使用以下配置组合：
{
"run_at": "document_start",
"all_frames": true,
"world": "MAIN"
}
性能调优建议
按需注入：根据实际需求选择脚本类型帧数控制：在复杂页面中适当限制all_frames范围资源过滤：实现智能的资源类型过滤机制
开发提示
调试技巧：使用frame特定的开发者工具进行调试错误处理：完善的try-catch机制处理跨域异常日志记录：详细的执行日志帮助定位问题
通过合理配置allFrames和run_at参数，猫抓扩展实现了对网页媒体资源的全面监控和高效捕获。这种设计不仅提升了资源嗅探的成功率，还为开发者提供了灵活的脚本注入策略，是现代浏览器扩展开发的优秀实践案例。
无论是处理简单的视频资源还是复杂的iframe嵌套结构，正确的参数配置都是确保扩展功能稳定运行的关键。希望本文的深度解析能够帮助开发者更好地理解和应用这些重要的配置参数。
【免费下载链接】cat-catch 猫抓 chrome资源嗅探扩展 项目地址: https://gitcode.com/GitHub_Trending/ca/cat-catch