Stripe Checkout Inspector

一款 Chrome 扩展，用于拦截并提取网页中 Stripe Checkout 的完整支付链接（checkout.stripe.com/...）。

适用于开发者调试 Stripe 集成、测试支付流程、快速获取 Checkout Session URL 等场景。

功能特性

• 双通道捕获 — 同时通过 fetch/XHR 拦截和 webRequest API 两条通道捕获 Stripe 请求，确保不遗漏
• 自动提取长链接 — 递归解析 API 响应，自动提取 checkout.stripe.com 完整 URL
• 按站点分组 — 每个域名独立展示捕获结果，支持 Tab 切换
• 一键复制 — 点击即可复制 Checkout URL、Session ID 或完整响应 JSON
• 自动复制 — 开启后检测到长链接自动写入剪贴板，并在页面右上角显示 Toast 提示
• 请求详情查看 — 可展开查看请求参数、Headers、响应体等完整信息
• Badge 状态提示 — 捕获到 URL 显示绿色 ✓，仅捕获到请求显示紫色 ✓

截图预览

打开 Popup 即可看到按域名分组的捕获结果，核心 Checkout URL 高亮显示。

安装方式

从源码加载（开发者模式）

1. 克隆本仓库：

   git clone https://github.com/jackZmym/stripe-checkout-inspector.git

2. 打开 Chrome，进入 chrome://extensions/
3. 开启右上角 开发者模式
4. 点击 加载已解压的扩展程序，选择克隆下来的项目目录
5. 安装完成，工具栏会出现扩展图标

使用方法

1. 打开任意包含 Stripe 支付的网页
2. 正常触发支付流程（点击付款按钮等）
3. 扩展图标出现 ✓ 标记，表示已捕获
4. 点击扩展图标打开 Popup 查看捕获结果
5. 点击高亮区域或按钮即可复制 Checkout URL

工作原理

inject.js (MAIN world)           content.js (ISOLATED world)           background.js (Service Worker)
  拦截 fetch / XHR        ──postMessage──►  消息桥接           ──chrome.runtime──►  数据存储 & 去重
                                              自动复制执行  ◄──  自动复制指令

                              background.js 同时通过 webRequest API
                              监听 init 请求并后台重放，作为备用通道

• 通道 1：inject.js 在页面 MAIN world 中 Monkey Patch fetch 和 XMLHttpRequest，捕获所有发往 api.stripe.com 的请求及响应
• 通道 2：background.js 通过 chrome.webRequest.onBeforeRequest 监听 Stripe init 接口，提取表单数据后在后台重放请求获取响应
• 两条通道互为冗余，谁先拿到就用谁

项目结构

├── manifest.json     # 扩展配置（Manifest V3）
├── inject.js         # MAIN world 脚本，拦截 fetch/XHR
├── content.js        # ISOLATED world 脚本，消息桥接 + 自动复制
├── background.js     # Service Worker，数据存储 + webRequest 通道
├── popup.html        # 弹窗 UI
├── popup.js          # 弹窗逻辑
└── icons/            # 扩展图标

技术栈

• Chrome Extension Manifest V3
• 原生 JavaScript，无外部依赖
• chrome.webRequest / chrome.storage / chrome.action API

许可证

MIT License