当前位置：首页 > news >正文

模块化请求拦截引擎：浏览器资源重定向的工程化解决方案

news 2026/8/5 13:29:26

模块化请求拦截引擎：浏览器资源重定向的工程化解决方案

【免费下载链接】ResourceOverrideAn extension to help you gain full control of any website by redirecting traffic, replacing, editing, or inserting new content.项目地址: https://gitcode.com/gh_mirrors/re/ResourceOverride

Resource Override 是一款基于浏览器扩展架构的高性能请求拦截与资源重定向工具，为前端开发者提供了对网络请求流的深度控制能力。该工具通过 webRequest API 实现精准的资源匹配和内容替换机制，支持本地资源替换、实时代码注入和请求头修改等多种技术场景，是现代前端开发工作流中不可或缺的工程化工具。

架构设计与技术实现

Resource Override 采用三层模块化架构设计，将核心功能划分为后台服务层、注入引擎层和用户界面层。这种架构确保了扩展的性能稳定性和功能可扩展性，同时保持了各模块间的低耦合度。

后台服务层位于 src/background/ 目录，包含了请求处理引擎的核心实现。requestHandling.js 文件实现了基于 webRequest API 的拦截机制，能够实时捕获和分析所有网络请求。匹配算法模块 match.js 提供了灵活的URL匹配策略，支持精确匹配、通配符匹配和正则表达式匹配三种模式，确保规则执行的准确性和效率。

// 核心拦截逻辑：[src/background/requestHandling.js](https://link.gitcode.com/i/c39f0034323e3488d4b9d3d7e2506384) bgapp.handleRequest = function(requestUrl, tabUrl, tabId, requestId) { for (const key in bgapp.ruleDomains) { const domainObj = bgapp.ruleDomains[key]; if (domainObj.on && match(domainObj.matchUrl, tabUrl).matched) { const rules = domainObj.rules || []; for (let x = 0, len = rules.length; x < len; ++x) { const ruleObj = rules[x]; if (ruleObj.on) { if (ruleObj.type === "normalOverride") { const matchedObj = match(ruleObj.match, requestUrl); const newUrl = matchReplace(matchedObj, ruleObj.replace, requestUrl); if (matchedObj.matched) { // 执行重定向逻辑 return {redirectUrl: newUrl}; } } } } } } };

规则匹配引擎实现

匹配算法是 Resource Override 的核心技术组件，采用高效的Trie树结构实现快速查找和匹配。match.js 模块中的 tokenize 函数将URL模式分解为令牌序列，支持通配符(*)的灵活使用，实现了复杂匹配逻辑的高效处理。

// 规则匹配引擎：[src/background/match.js](https://link.gitcode.com/i/596fe9244d2576fc7860dfc2233a6b38) function match(pattern, str) { var patternTokens = tokenize(pattern); var freeVars = {}; var varGroup; var strParts = str; var matchAnything = false; var completeMatch = patternTokens.every(function(token) { if (token.charAt(0) === '*') { matchAnything = true; varGroup = token.length; freeVars[varGroup] = freeVars[varGroup] || []; } else { var matches = strParts.split(token); if (matches.length > 1) { var possibleFreeVar = matches.shift(); if (matchAnything) { freeVars[varGroup].push(possibleFreeVar); } matchAnything = false; strParts = matches.join(token); } else { return false; } } return true; }); return {matched: completeMatch, freeVars: freeVars}; }

内容注入与脚本执行机制

注入引擎层通过 src/inject/scriptInjector.js 实现安全的内容注入机制。该模块采用沙箱隔离技术，确保自定义脚本的执行不会影响原始页面的稳定性。内容替换功能支持JavaScript、CSS和HTML等多种格式，开发者可以实时修改网页内容而无需重新加载页面。

脚本注入器支持多种注入位置配置，包括文档头部(head)和文档主体(body)，并考虑了DOM加载状态的处理。这种设计确保了注入时机的准确性，避免了因DOM未完全加载而导致的注入失败问题。

// 脚本注入实现：[src/inject/scriptInjector.js](https://link.gitcode.com/i/81136578f71841cae4a4e8a49183c559) var processDomain = function(domain) { var rules = domain.rules || []; rules.forEach(function(rule) { if (rule.on && rule.type === "fileInject") { var newEl = document.createElement(fileTypeToTag[rule.fileType] || "script"); newEl.appendChild(document.createTextNode(rule.file)); if (rule.injectLocation === "head") { var firstEl = document.head.children[0]; if (firstEl) { document.head.insertBefore(newEl, firstEl); } else { document.head.appendChild(newEl); } } else { if (document.body) { document.body.appendChild(newEl); } else { document.addEventListener("DOMContentLoaded", function() { document.body.appendChild(newEl); }); } } } }); };

请求头处理与响应控制

请求头处理模块 headerHandling.js 提供了对HTTP请求和响应头的完整控制能力。开发者可以添加、修改或删除特定的头信息，这对于测试不同的缓存策略、安全策略或API认证机制特别有用。

Resource Override 支持两种响应处理模式：对于支持 filterResponseData API 的浏览器，直接修改响应数据流；对于不支持该API的浏览器，使用Data URL重定向机制。这种双模式设计确保了跨浏览器的兼容性。

// 响应内容替换实现 const replaceContent = (requestId, mimeAndFile) => { if (browser.webRequest.filterResponseData) { // 支持filterResponseData的浏览器 browser.webRequest.filterResponseData(requestId).onstart = e => { const encoder = new TextEncoder(); e.target.write(encoder.encode(mimeAndFile.file)); e.target.disconnect(); }; return { cancel: true, responseHeaders: [{ name: "Content-Type", value: mimeAndFile.mime }] }; } // 不支持filterResponseData的浏览器 return { redirectUrl: "data:" + mimeAndFile.mime + ";charset=UTF-8;base64," + btoa(unescape(encodeURIComponent(mimeAndFile.file))) }; };

配置管理系统与规则管理

配置系统采用JSON格式存储规则集，每条规则包含匹配模式、重定向目标和执行条件等关键参数。规则的优先级管理机制确保了复杂场景下的正确执行顺序，避免规则冲突导致的不可预测行为。

用户界面模块 webRule.js 提供了直观的规则配置界面，支持规则的增删改查操作。配置编辑器集成了代码高亮和语法检查功能，提升规则配置的准确性和开发体验。实时预览功能允许开发者在保存规则前查看预期效果。

// 规则配置界面：[src/ui/webRule.js](https://link.gitcode.com/i/0b6b741b694526e47d938765732c3db1) function createWebOverrideMarkup(savedData, saveFunc) { savedData = savedData || {}; saveFunc = saveFunc || function() {}; const override = util.instanceTemplate(ui.overrideTemplate); const matchInput = override.find(".matchInput"); const replaceInput = override.find(".replaceInput"); const ruleOnOff = override.find(".onoffswitch"); const deleteBtn = override.find(".sym-btn"); matchInput.val(savedData.match || ""); replaceInput.val(savedData.replace || ""); util.makeFieldRequired(matchInput); util.makeFieldRequired(replaceInput); ruleOnOff[0].isOn = savedData.on === false ? false : true; // 规则状态管理 if (savedData.on === false) { override.addClass("disabled"); } }