获取页面所有请求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/8/7 12:20:49 阅读更多 →
直播平台实时图片审核系统架构:从截帧识别到智能预警的工程实践

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

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

2026/8/7 12:19:48 阅读更多 →
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/8/7 12:19:48 阅读更多 →

最新新闻

Godot游戏资源解包实战:从PCK文件提取纹理与音频素材

Godot游戏资源解包实战:从PCK文件提取纹理与音频素材

1. 项目概述与核心价值 如果你是一个Godot引擎的开发者,或者是一个对游戏内部资源充满好奇的研究者,那么你一定遇到过这样的困境:精心制作的游戏发布后,所有的图片、音频、脚本都被打包进了一个 .pck 文件里,或者干脆…

2026/8/7 15:34:44 阅读更多 →
GTA5线上小助手:免费终极工具,轻松掌控洛圣都游戏体验

GTA5线上小助手:免费终极工具,轻松掌控洛圣都游戏体验

GTA5线上小助手:免费终极工具,轻松掌控洛圣都游戏体验 【免费下载链接】GTA5OnlineTools GTA5线上小助手 项目地址: https://gitcode.com/gh_mirrors/gt/GTA5OnlineTools 你是否曾在GTA5线上模式中感到力不从心?面对高难度任务、稀缺的…

2026/8/7 15:34:44 阅读更多 →
第二章 Netty ByteBuf 零拷贝与 slice 详解:从概念、原理到实战应用

第二章 Netty ByteBuf 零拷贝与 slice 详解:从概念、原理到实战应用

Netty ByteBuf 零拷贝与 slice 详解:从概念、原理到实战应用 目录 引言:为什么需要零拷贝? 一、核心概念:什么是 ByteBuf 和 slice? 1.1 ByteBuf:Netty的数据容器 1.2 slice:零拷贝的“视图” 二、原理深入:slice 如何实现零拷贝?

2026/8/7 15:34:43 阅读更多 →
Makefile Tutor权威指南:GNU Makefile语法与最佳实践解析

Makefile Tutor权威指南:GNU Makefile语法与最佳实践解析

Makefile Tutor权威指南:GNU Makefile语法与最佳实践解析 【免费下载链接】Makefile_tutor This project aims to create a crystal clear tutorial on a cryptic topic. 项目地址: https://gitcode.com/gh_mirrors/ma/Makefile_tutor Makefile Tutor是一个专…

2026/8/7 15:34:43 阅读更多 →
企业AI智能体到底是什么?一文讲清楚

企业AI智能体到底是什么?一文讲清楚

说实话,我之前对"企业AI智能体"这个词也挺懵的。 每天都会刷到林林总总的新闻, 形形色色的讲座, 讲的是AI智能体将会对企业造成颠覆性影响。但它究竟是什么东西呢? 似乎每个人都能够对此发表一番见解, 然而又好像谁都没能将其阐释明白。 好不容易自己一番…

2026/8/7 15:34:43 阅读更多 →
UE4高级会话管理插件:解决多人游戏开发五大核心痛点

UE4高级会话管理插件:解决多人游戏开发五大核心痛点

1. 项目概述:为什么我们需要一个“高级”会话管理插件? 如果你在UE4里做过多人游戏,尤其是那种需要房间、匹配、状态同步的联机项目,那你一定对“会话管理”这四个字又爱又恨。爱的是,它确实是连接玩家的桥梁&#xff…

2026/8/7 15:33:43 阅读更多 →

日新闻

为什么scrcpy成为Android投屏的终极解决方案:完整实战指南

为什么scrcpy成为Android投屏的终极解决方案:完整实战指南

为什么scrcpy成为Android投屏的终极解决方案:完整实战指南 【免费下载链接】scrcpy Display and control your Android device 项目地址: https://gitcode.com/GitHub_Trending/sc/scrcpy 想要将Android手机屏幕完美投射到电脑上,享受大屏操作的自…

2026/8/7 0:00:19 阅读更多 →
如何在5分钟内掌握Tom Select:打造现代化表单选择器的终极指南

如何在5分钟内掌握Tom Select:打造现代化表单选择器的终极指南

如何在5分钟内掌握Tom Select:打造现代化表单选择器的终极指南 【免费下载链接】tom-select Tom Select is a lightweight (~16kb gzipped) hybrid of a textbox and select box. Forked from selectize.js to provide a framework agnostic autocomplete widget wi…

2026/8/7 0:00:19 阅读更多 →
5分钟快速上手:NSZ压缩工具终极指南,轻松管理Switch游戏文件

5分钟快速上手:NSZ压缩工具终极指南,轻松管理Switch游戏文件

5分钟快速上手:NSZ压缩工具终极指南,轻松管理Switch游戏文件 【免费下载链接】nsz NSZ - Homebrew compatible NSP/XCI compressor/decompressor 项目地址: https://gitcode.com/gh_mirrors/ns/nsz 你是否在为Nintendo Switch游戏文件占用大量存储…

2026/8/7 0:00:19 阅读更多 →

周新闻

最大流算法详解:从水管网络到Ford-Fulkerson与Dinic实战

最大流算法详解:从水管网络到Ford-Fulkerson与Dinic实战

1. 从水管网络到最大流:一个核心问题的诞生想象一下,你是一个城市供水系统的总工程师。你的城市有多个水源(水库),需要通过一个复杂的地下管道网络,将水输送到各个居民区。每条管道都有其最大通水能力&…

2026/8/6 22:02:27 阅读更多 →
基于Springboot的企业门户网站(源码+LW+调试文档+讲解)

基于Springboot的企业门户网站(源码+LW+调试文档+讲解)

温馨提示:本人主页置顶文章(点我)开头有 CSDN 平台官方提供的学长联系方式的名片! 温馨提示:本人主页置顶文章(点我)开头有 CSDN 平台官方提供的学长联系方式的名片! 温馨提示:本人主页置顶文章(点我)开头有 CSDN 平台…

2026/8/6 22:02:27 阅读更多 →
MATLAB xcorr函数详解:从互相关原理到四大实战应用

MATLAB xcorr函数详解:从互相关原理到四大实战应用

1. 从一次信号“找茬”说起:为什么我们需要互相关几年前,我在处理一组声学传感器数据时遇到了一个棘手的问题。我有两个麦克风记录了一段相同的音频信号,理论上它们接收到的声音波形应该非常相似,只是由于麦克风位置不同&#xff…

2026/8/6 22:02:27 阅读更多 →

月新闻

免费解锁百度网盘SVIP加速:macOS用户必备的下载提速终极指南

免费解锁百度网盘SVIP加速:macOS用户必备的下载提速终极指南

免费解锁百度网盘SVIP加速:macOS用户必备的下载提速终极指南 【免费下载链接】BaiduNetdiskPlugin-macOS For macOS.百度网盘 破解SVIP、下载速度限制~ 项目地址: https://gitcode.com/gh_mirrors/ba/BaiduNetdiskPlugin-macOS 还在为百度网盘macOS版的龟速下…

2026/8/5 23:28:39 阅读更多 →
终极ncmdump指南:3分钟实现网易云NCM音乐解密与格式转换

终极ncmdump指南:3分钟实现网易云NCM音乐解密与格式转换

终极ncmdump指南:3分钟实现网易云NCM音乐解密与格式转换 【免费下载链接】ncmdump 项目地址: https://gitcode.com/gh_mirrors/ncmd/ncmdump 还在为网易云音乐下载的NCM格式文件无法在其他播放器播放而烦恼吗?ncmdump解密工具帮你轻松解决这个困…

2026/8/6 22:02:28 阅读更多 →
HarmonyOS 应用开发《掌上英语》第81篇: 智能体卡片:为英语学习 App 打造桌面级学习助手

HarmonyOS 应用开发《掌上英语》第81篇: 智能体卡片:为英语学习 App 打造桌面级学习助手

AgentCard 智能体卡片:为英语学习 App 打造桌面级学习助手适用平台:HarmonyOS 7.0 (API 26 Beta)一、引言 HarmonyOS 7.0(API 26 Beta)新增了 AgentCard 智能体卡片能力,这是继 HMAF(鸿蒙智能体框架&#x…

2026/8/5 23:46:51 阅读更多 →