获取页面所有请求url和参数插件

发布时间：2026/10/13 14:01:29

获取页面所有请求url和参数插件
测试的时候 , 想获取页面所有的请求, 虽然在network中可以获取到, 但是感觉还是不方便,所以写了一个插件, 安装之后, 就可以获取到所有的url, 并且可以导出到csv文件中, 可以方便做后需接口测试目录结构my-devtools-plugin/├── manifest.json # 插件配置文件├── devtools.html # F12 挂载入口网页├── devtools.js # F12 挂载入口逻辑├── panel.html # 自定义面板 UI 界面└── panel.js # 自定义面板核心功能逻辑录制、去重、CSV导出devtolls.html!DOCTYPE html html head meta charsetutf-8 /head body script srcdevtools.js/script /body /htmldevtolls.js// 在 F12 的 Tab 栏最后创建一个名为 HTTP Logger 的自定义面板 chrome.devtools.panels.create( Tay抓取请求, // Tab 上显示的文本 null, // 图标路径不需要可以传 null panel.html, // 面板真正的内容页面 function(panel) { console.log(高级日志面板创建成功); } );manifest.json{ manifest_version: 3, name: Tay抓取请求, version: 1.0, description: 在DevTools中记录并去重页面点击时的HTTP请求支持CSV导出, permissions: [ activeTab, tabs ], devtools_page: devtools.html }panel.html!DOCTYPE html html head meta charsetutf-8 style body { font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif; padding: 12px; margin: 0; background-color: #f5f5f5; color: #333; } .controls-container { background: #fff; padding: 12px; border-radius: 6px; border: 1px solid #e0e0e0; margin-bottom: 12px; } .main-controls { display: flex; align-items: center; gap: 15px; padding-bottom: 10px; border-bottom: 1px solid #eee; } .filter-controls { display: flex; align-items: center; gap: 15px; padding-top: 10px; font-size: 12px; color: #555; } .switch-container, .filter-item { display: flex; align-items: center; gap: 5px; font-weight: bold; cursor: pointer; } .filter-item { font-weight: normal; } button { padding: 6px 12px; border: 1px solid #ccc; background: #fff; border-radius: 4px; cursor: pointer; font-size: 12px; } button:hover { background: #f0f0f0; border-color: #999; } #delete-btn { background-color: #ff3b30; color: #fff; border: none; } #delete-btn:hover { background-color: #e0241b; } #export-btn { background-color: #0076ff; color: #fff; border: none; font-weight: bold; } #export-btn:hover { background-color: #0062d6; } .table-container { border: 1px solid #e0e0e0; background: #fff; border-radius: 6px; overflow: hidden; } table { width: 100%; border-collapse: collapse; font-size: 12px; text-align: left; } th, td { padding: 8px 10px; border-bottom: 1px solid #eee; vertical-align: top; } th { background: #fafafa; border-bottom: 2px solid #e0e0e0; color: #666; font-weight: 600; } td { word-break: break-all; max-width: 300px; } tr:hover { background-color: #f9f9f9; } .col-select { width: 30px; text-align: center; } .col-method { width: 80px; } .method-badge { display: inline-block; padding: 2px 6px; border-radius: 3px; font-size: 10px; font-weight: bold; color: #fff; background: #999; } .method-GET { background-color: #0cbb52; } .method-POST { background-color: #eeaa00; } /style /head body div classcontrols-container div classmain-controls label classswitch-container input typecheckbox idrecording-toggle checked span启用录制/span /label button idclear-btn清空数据/button button iddelete-btn删除选中/button button idexport-btn导出为 CSV/button span stylefont-size: 12px; color: #888; idstats已记录: 0 条/span /div div classfilter-controls strong过滤器 (勾选表示排除):/strong label classfilter-item input typecheckbox classfilter-checkbox>// 全局状态与数据结构 let isRecording true; const requestMap new Map(); // 过滤器映射正则 const filterRules { js: /\.js(\?.*)?$/i, css: /\.css(\?.*)?$/i, images: /\.(png|jpg|jpeg|gif|svg|ico|webp)(\?.*)?$/i, fonts: /\.(woff|woff2|ttf|eot)(\?.*)?$/i }; // DOM 元素引用 const recordingToggle document.getElementById(recording-toggle); const clearBtn document.getElementById(clear-btn); const deleteBtn document.getElementById(delete-btn); const exportBtn document.getElementById(export-btn); const selectAllCheckbox document.getElementById(select-all); const logTbody document.getElementById(log-tbody); const statsSpan document.getElementById(stats); // 事件监听 // 1. 开关切换 recordingToggle.addEventListener(change, (e) { isRecording e.target.checked; }); // 2. 清空全部数据 clearBtn.addEventListener(click, () { requestMap.clear(); selectAllCheckbox.checked false; // 重置全选框 renderTable(); }); // 3. 删除选中数据 deleteBtn.addEventListener(click, () { const checkedBoxes document.querySelectorAll(.row-checkbox:checked); if (checkedBoxes.length 0) { alert(请先勾选需要删除的请求); return; } // 遍历所有被勾选的行从 Map 中物理删除对应的键值对 checkedBoxes.forEach(box { const urlToDelete box.getAttribute(data-url); requestMap.delete(urlToDelete); }); // 重置全选框状态 selectAllCheckbox.checked false; // 重新渲染表格UI、数量统计和后续的导出都会自动同步 renderTable(); }); // 4. 表头全选/反选联动 selectAllCheckbox.addEventListener(change, (e) { const isChecked e.target.checked; const rowCheckboxes document.querySelectorAll(.row-checkbox); rowCheckboxes.forEach(box { box.checked isChecked; }); }); // 5. 导出 CSV exportBtn.addEventListener(click, exportToCSV); // 6. 监听网络请求 chrome.devtools.network.onRequestFinished.addListener(function(request) { if (!isRecording) return; const url request.request.url; const method request.request.method; if (!url.startsWith(http)) return; // 动态过滤器过滤 if (shouldFilter(request, url)) return; // 解析参数 let paramsText ; if (request.request.queryString request.request.queryString.length 0) { const queryObj {}; request.request.queryString.forEach(item { queryObj[item.name] item.value; }); paramsText [Query]: ${JSON.stringify(queryObj)}\n; } if (request.request.postData request.request.postData.text) { paramsText [Body]: ${request.request.postData.text}; } if (!paramsText) { paramsText 无参数; } // 去重存储 requestMap.set(url, { method: method, url: url, params: paramsText }); renderTable(); }); // 核心过滤算法 function shouldFilter(request, url) { const activeFilters []; document.querySelectorAll(.filter-checkbox:checked).forEach(checkbox { activeFilters.push(checkbox.getAttribute(data-type)); }); for (const type of activeFilters) { if (filterRules[type] filterRules[type].test(url)) return true; const resType request._resourceType; if (type js resType script) return true; if (type css resType stylesheet) return true; if (type images resType image) return true; if (type fonts resType font) return true; } return false; } // UI 渲染与导出工具函数 function renderTable() { logTbody.innerHTML ; requestMap.forEach((value) { const tr document.createElement(tr); // 1. 选择框列通过 data-url 属性将多选框绑定到具体的 URL 数据健上 const tdSelect document.createElement(td); tdSelect.className col-select; tdSelect.innerHTML input typecheckbox classrow-checkbox data-url${escapeHTML(value.url)}; // 2. 方法列 const tdMethod document.createElement(td); tdMethod.className col-method; tdMethod.innerHTML span classmethod-badge method-${value.method}${value.method}/span; // 3. URL 列 const tdUrl document.createElement(td); tdUrl.textContent value.url; // 4. 参数列 const tdParams document.createElement(td); tdParams.style.whiteSpace pre-wrap; tdParams.textContent value.params; tr.appendChild(tdSelect); tr.appendChild(tdMethod); tr.appendChild(tdUrl); tr.appendChild(tdParams); logTbody.appendChild(tr); }); statsSpan.textContent 已记录: ${requestMap.size} 条; } function exportToCSV() { if (requestMap.size 0) { alert(当前没有可导出的数据); return; } const headers [Method, URL, Parameters]; const rows [headers]; // 因为删除功能已经直接从 requestMap 移除数据了所以这里导出的数据绝对干净 requestMap.forEach((value) { rows.push([ escapeCSV(value.method), escapeCSV(value.url), escapeCSV(value.params) ]); }); const csvContent rows.map(e e.join(,)).join(\n); const blob new Blob([\uFEFF csvContent], { type: text/csv;charsetutf-8; }); const url URL.createObjectURL(blob); const link document.createElement(a); link.setAttribute(href, url); const timestamp new Date().toISOString().replace(/[:.]/g, -); link.setAttribute(download, HTTP_Logs_${timestamp}.csv); document.body.appendChild(link); link.click(); document.body.removeChild(link); } // 安全过滤防止 HTML 属性注入 function escapeHTML(str) { return str.replace(//g, quot;).replace(//g, #39;); } function escapeCSV(val) { if (val undefined || val null) return ; let str String(val); if (str.includes() || str.includes(,) || str.includes(\n) || str.includes(\r)) { str str.replace(//g, ); return ${str}; } return str; }

相关新闻

数据库索引优化实战：从原理到10倍性能提升

数据库索引优化实战：从原理到10倍性能提升

1. 索引优化为何能带来10倍性能提升？ 当数据库表数据量超过百万级时，没有索引的查询就像在图书馆里逐页翻找特定内容。我最近优化过一个电商平台的订单查询接口，原本需要8秒的查询在优化后仅需0.7秒。这种量级的性能飞跃主要来自三个机制&…

2026/10/12 15:19:28 阅读更多 →
直播平台实时图片审核系统架构：从截帧识别到智能预警的工程实践

直播平台实时图片审核系统架构：从截帧识别到智能预警的工程实践

1. 项目概述：直播内容安全的“火眼金睛”直播行业的繁荣背后，内容安全是悬在每家平台头上的达摩克利斯之剑。一个不合规的画面闪过，轻则导致直播间被封、主播被罚，重则可能引发平台级的监管风险。传统的“纯人工盯屏”模式&#x…

2026/10/11 0:15:37 阅读更多 →
Adobe破解工具终极指南：三步免费激活全系列设计软件

Adobe破解工具终极指南：三步免费激活全系列设计软件

Adobe破解工具终极指南：三步免费激活全系列设计软件 【免费下载链接】Adobe-GenP Adobe CC 2019/2020/2021/2022/2023 GenP Universal Patch 3.0 项目地址: https://gitcode.com/gh_mirrors/ad/Adobe-GenP Adobe GenP 3.0是一款强大的Adobe破解工具&#xff…

2026/10/5 19:14:30 阅读更多 →

最新新闻

Python字典的__missing__魔术方法：缺失键的优雅处理机制

Python字典的__missing__魔术方法：缺失键的优雅处理机制

就像所有键都找不到时会手足无措的字典一样，Python里的dict其实留了一扇专门处理这种情况的门，这门就是魔术方法__missing__。它是字典变体类的核心钩子：当d[key]访问的键不在字典里时，解释器不会直接抛KeyError，而是先…

2026/10/13 14:00:49 阅读更多 →
SELinux强制访问控制实战：从Permissive调试到Enforcing上线

SELinux强制访问控制实战：从Permissive调试到Enforcing上线

1. 这不是“开个开关”那么简单：SELinux到底在防什么，又为什么总被关掉？“ENGINEER 02：系统安全保护 启用SELinux保护的详细教程步骤，学不会来找我”——这个标题里藏着一个行业内心照不宣的真相：绝大多数人…

2026/10/13 14:00:49 阅读更多 →
Canvas图编辑器核心实现：数据驱动、交互机制与性能优化

Canvas图编辑器核心实现：数据驱动、交互机制与性能优化

做了几年前端和图形方向的东西，我最大的感受是：绘图类的项目，难的不是画一根线、拖一个框，而是把“交互”和“数据”揉在一起还能保持稳定。最近我在做一个内部工具，名字就叫 diagram-design，用途是给业务系…

2026/10/13 14:00:49 阅读更多 →
LiteLLM：轻量级大模型网关与智能调度中间件实战指南

LiteLLM：轻量级大模型网关与智能调度中间件实战指南

1. 项目概述：LiteLLM 是什么，它解决的不是“模型调用”而是“模型调度”的本质问题LiteLLM 这个名字刚出现时，很多人第一反应是：“又一个 LLM 封装库？”——但实际用过两周后，我把它从测试环境直接推到了生…

2026/10/13 14:00:49 阅读更多 →
C++ gRPC grpc::Status 状态码与错误处理排查实战指南

C++ gRPC grpc::Status 状态码与错误处理排查实战指南

最近经常有朋友拿着一堆 gRPC 报错来问我：C 项目里客户端跑着跑着就冒出 unexpected status 401 unauthorized: incorrect api key provided 、 429 too many requests 、 502 bad gateway 这些东西，日志打了一屏，却不知道下一步该点哪…

2026/10/13 14:00:49 阅读更多 →
Slicer 在 GNU/Linux 下的 C++ 调试实战：GDB 附加、执行器环境与 Core 转储分析

Slicer 在 GNU/Linux 下的 C++ 调试实战：GDB 附加、执行器环境与 Core 转储分析

医疗健康图像处理数据可视化桌面应用3D渲染 【免费下载链接】Slicer Multi-platform, free open source software for visualization and image computing. 项目地址： https://gitcode.com/gh_mirrors/sl/Slicer 点击查看 免费下载 本文基于 Slicer 官方文档 Docs/…

2026/10/13 13:59:47 阅读更多 →

日新闻

物联网系统集成避坑指南：从选型到验收的关键要点

物联网系统集成避坑指南：从选型到验收的关键要点

做了这么多年物联网系统集成的项目，我最大的感受是，大部分坑不是出在技术前沿，而是出在一些看起来很平常的地方。设备选了便宜的、协议没问清楚、现场没摸透、验收标准写得含糊——这些细枝末节，最后都会变成延期、超支和扯皮的大…

2026/10/13 0:00:57 阅读更多 →
ESP32舵机控制全攻略：从PWM原理到高级玩法与常见故障排查

ESP32舵机控制全攻略：从PWM原理到高级玩法与常见故障排查

如果你玩ESP32有一阵子了，很难不碰到舵机控制这道坎。做智能小车要转方向，做机械臂要抬关节，做云台要偏航俯仰，背后都是同一个东西在干活：舵机。而我见过太多人卡在“代码能编译、舵机就是不听话”这个阶段&#xff0c…

2026/10/13 0:00:57 阅读更多 →
CAN总线原理与STM32实战：抗干扰、仲裁、错误处理全解析

CAN总线原理与STM32实战：抗干扰、仲裁、错误处理全解析

1. 为什么CAN总线至今仍是工业现场的“硬通货”？——从汽车底盘到智能温室的真实需求你有没有拆过一辆老款燃油车的中控台？或者调试过某高校实验室里那台跑着Modbus协议却频频丢帧的PLC控制柜？又或者，在某个农业物联网项目里&…

2026/10/13 0:00:57 阅读更多 →

周新闻

流感时间序列预测实战：ARIMA/LSTM全流程拆解与避坑指南

流感时间序列预测实战：ARIMA/LSTM全流程拆解与避坑指南

简介：基于 ARIMA、LSTM、Transformer 等模型的流感时间序列预测 Python 源码，面向计算机相关专业课程设计与期末大作业学生，以及项目实战学习者。内容覆盖预处理、平稳性检验、定阶、残差分析、多模型对比预测的完整时序建模流程，…

2026/10/13 2:54:56 阅读更多 →
影刀RPA新手教程：键盘模拟输入实战——输入文本与模拟按键的区别

影刀RPA新手教程：键盘模拟输入实战——输入文本与模拟按键的区别

影刀RPA新手教程：键盘模拟输入实战——输入文本与模拟按键的区别 做影刀RPA自动化，十个新手有八个栽在"往输入框里填东西"这件事上：要么填不进去，要么填了一半，要么直接把原来内容追加在后面。这背后的根因&…

2026/10/12 0:16:38 阅读更多 →
影刀RPA新手教程：阅文起点小说数据采集实战——书籍信息与章节内容

影刀RPA新手教程：阅文起点小说数据采集实战——书籍信息与章节内容

影刀RPA新手教程：阅文起点小说数据采集实战——书籍信息与章节内容 1. 认识影刀：什么场景该用RPA采小说数据 起点中文网的页面结构相对稳定——分类榜单、书籍详情、章节内容三块独立页面，跳转链路清晰。这种场景非常适合影刀自动化&#x…

2026/10/13 1:58:08 阅读更多 →

月新闻

我发现了一个新思路：用 Remotion + Claude Code 像写代码一样自动化生成短视频

我发现了一个新思路：用 Remotion + Claude Code 像写代码一样自动化生成短视频

/* MD / 富文本中的 .toc（含博客园搬家等嵌套结构）；.toc-box 在侧栏，不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p（:empty 仍占 20px），一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

2026/10/12 21:05:09 阅读更多 →
Windows下 Codex 中 Chrome 和 Computer Use 插件不可用问题排查及解决参考方式：TaoToken 统一 Key 配置与验证

Windows下 Codex 中 Chrome 和 Computer Use 插件不可用问题排查及解决参考方式：TaoToken 统一 Key 配置与验证

/* MD / 富文本中的 .toc（含博客园搬家等嵌套结构）；.toc-box 在侧栏，不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p（:empty 仍占 20px），一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

2026/10/12 14:48:49 阅读更多 →
黑夜航拍船只数据集训练YOLOV5模型全流程解析

黑夜航拍船只数据集训练YOLOV5模型全流程解析

/* MD / 富文本中的 .toc（含博客园搬家等嵌套结构）；.toc-box 在侧栏，不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p（:empty 仍占 20px），一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

2026/10/12 18:11:17 阅读更多 →