Media
3 items
Description
Intercept and modify API response data with custom JavaScript ## 中文说明 ### 插件核心用途 本浏览器插件定位为前端专业开发调试工具，唯一使用用途为拦截网页网络请求中的API接口响应数据，专为网页前端项目开发、功能测试、页面效果调试场景设计。 ### 核心功能介绍 1. **接口精准匹配拦截** 插件内置正则匹配解析能力，开发者操作门槛极低，无需掌握正则语法知识，仅复制目标接口部分地址片段，即可自动完成全网页请求筛选，精准锁定指定API接口，仅对匹配成功的接口执行数据拦截操作，不会干扰页面其他正常网络请求、静态资源加载、无关接口数据，保障网页基础运行不受影响。 支持单条接口单独匹配调试，也可批量配置多条接口规则，满足多接口联动调试、多页面同步测试的实际开发需求。 2. **自定义JS脚本** 插件搭载原生JavaScript代码运行环境，开发者可自由编写JS处理代码，对拦截获取到的原始接口返回数据进行任意形式编辑调整，数据修改自由度极高，可适配各类复杂调试场景。 可实现基础字段数值改写、文本内容替换、数组元素增删改查、嵌套层级数据调整、整体数据结构替换、异常模拟数据构造、空数据/满数据边界场景模拟等操作，借助JavaScript语法特性可拓展多样化调试玩法，满足前端各式各样的数据调试需求。 ### 实操使用示例 以实际业务接口调试场景举例演示插件使用方式： 1. 目标调试接口地址片段：class_hw_detail/queryV2 2. 该接口原始返回JSON数据格式 ```json { "code": 0, "message": "成功", "data": { "studentsSummaries": [ { "userName": "刘" }, { "userName": "张" } ] }, "success": true } ``` 3. 自定义修改脚本编写 插件会自动将拦截到的接口数据挂载至统一变量resData，开发者直接调用该变量编写JS代码即可修改数据。 示例代码：批量修改列表内用户名称字段 ```javascript // 遍历数组，统一替换用户名数值 resData.data.studentsSummaries.forEach(item=>item.userName = 123); // 控制台打印修改后数据，方便开发者核对结果 console.log(resData); ``` 执行脚本后，页面接收的接口数据就会完成字段改写，页面展示内容同步随之变更。 除局部字段修改外，也支持对整体resData数据直接赋值替换。开发者可自行构造全新JSON对象、组装自定义数组列表，完成数据重组后直接赋值给resData变量，就能彻底替换接口原始返回内容，模拟全新业务数据场景。 ### 这个扩展的想法就是： 1. 能够使用正则匹配到对应接口地址（扩展内部实现正则匹配，使用只需要复制接口部分地址） 2. 能够使用js代码改变接口返回，也可以直接赋值。能够执行js代码即可有无限种玩法等待你去开发。 ### 合规使用声明 本插件仅面向前端开发工作人员，仅限个人项目内部开发、功能自测、技术调试合法场景使用。插件仅作用于开发者自身访问的网页本地请求，不会收集、上传、窃取用户个人隐私信息、网页账号数据、设备本地文件，无后台数据上传行为，不存在恶意劫持、篡改第三方网站核心业务、违规窃取信息等违规行为，严格遵循浏览器插件开发规范与网络使用准则。 ## English Description ### Core Purpose This browser extension is a professional debugging tool tailored for front-end development. Its sole function is to intercept API response data from web network requests, designed for front-end project development, functional testing and page effect debugging. ### Core Functions 1. **Accurate API Matching and Interception** The extension has built-in regular expression matching capability. Users do not need relevant regex knowledge. Simply copy partial segments of the target API address, and the tool will automatically filter all web requests and accurately locate designated interfaces. It only intercepts data of matched APIs without disturbing normal network requests, static resource loading and irrelevant interface data, ensuring stable webpage operation. It supports debugging single interface separately and configuring multiple matching rules simultaneously, catering to practical demands of multi-interface joint debugging and cross-page synchronous testing. 2. **Custom JavaScript Script** Equipped with a native JavaScript operating environment, the extension allows developers to write custom scripts to freely edit intercepted original response data with high flexibility for complex debugging scenarios. It supports basic operations including modifying field values, replacing text content, adding, deleting and updating array elements, adjusting nested data structures and replacing overall data frameworks. Developers can also simulate abnormal data, empty data and full data boundary conditions. Leveraging JavaScript features, diverse debugging methods are available to meet various front-end data debugging requirements. ### Practical Usage Example The following example demonstrates the operation method: 1. Target API address segment: class_hw_detail/queryV2 2. Original JSON response data ```json { "code": 0, "message": "success", "data": { "studentsSummaries": [ { "userName": "Liu" }, { "userName": "Zhang" } ] }, "success": true } ``` 3. Custom script editing Intercepted data is stored in the unified variable resData. Developers can directly call this variable to write codes for data modification. Sample code for batch updating username fields: ```javascript // Traverse array and unify username value resData.data.studentsSummaries.forEach(item=>item.userName = 123); // Print modified data for verification console.log(resData); ``` After execution, the data received by the webpage will be updated synchronously, and page display content will change accordingly. Apart from partial field modification, users can also assign new values to the whole resData. Construct brand-new JSON objects and custom arrays, then assign them to resData to fully replace original interface data and simulate diverse business scenarios. ### Design Concept 1. Match target API addresses via internal regular expression algorithm. Users only need to paste partial address content to complete matching. 2. Modify API return data or assign brand-new values through JavaScript codes. Executable scripts bring unlimited debugging possibilities. ### Compliance Statement This extension is exclusively for front-end developers, only applicable to legitimate personal internal development, self-testing and technical debugging. It only processes local web requests accessed by users. No personal privacy, account information or local device files will be collected, uploaded or stolen. There is no background data transmission, malicious hijacking or unauthorized tampering with core business data of third-party websites. The extension fully complies with browser extension development specifications and network usage regulations.