MapRecon — SourceMap Extractor

JS 源码还原工具 · Chrome 浏览器扩展

自动检测网站 .js.map 文件泄露，一键下载 Source Map 并还原所有前端源码（Vue/React/TypeScript）。

---

功能特性

• 全量 JS 拦截 — 通过 chrome.webRequest 拦截所有 JS 请求（含动态 chunk、iframe），同时用 content script 的 performance.getEntriesByType 补漏，确保 100% 覆盖
• Source Map 检测 — 在 Service Worker 中 fetch 每个 JS 文件，解析 sourceMappingURL 注释，无 CORS 限制
• 源码还原 — 下载 .map 文件，提取 sourcesContent 中的原始源码，自动跳过 node_modules
• 一键打包 — 将所有还原的源码 + 原始 .map 文件打包为 ZIP 下载
• 两种下载模式 — 可选择「仅下载 .map 文件」或「下载所有还原后的源码 (.zip)」
• 隐私安全 — 所有数据处理均在本地浏览器完成，不上传任何内容

---

截图预览

1. 加载插件

在 Chrome 扩展管理页面 (chrome://extensions/) 开启开发者模式，加载已解压的扩展程序：

2. 检测文件并下载

打开目标网站，点击扩展图标，扫描页面后选择下载模式：

3. 还原后的源码

下载的 ZIP 包解压后，即可看到完整的前端源码文件：

---

安装

开发者模式加载

1. 打开 Chrome，地址栏输入 chrome://extensions/ 并回车
2. 打开右上角的「开发者模式」开关
3. 点击「加载已解压的扩展程序」
4. 选择 MapRecon 项目根目录（即包含 manifest.json 的目录）
5. 扩展图标会出现在浏览器工具栏中

注意： 图标由 favicon.png 自动生成。如需更换图标，替换 icons/ 目录下的 icon16.png、icon48.png、icon128.png。

---

使用方法

基本使用

1. 打开任意目标网站（如 https://example.com）
2. 点击浏览器工具栏中的 SourceMap Extractor 图标
3. 在弹出的面板中点击「🔎 扫描页面」
   • 扩展会自动收集页面上所有的 JS 文件 URL
   • 逐一检测是否包含 sourceMappingURL 引用
4. 扫描完成后，列表会显示所有发现的 .map 文件
5. 选择操作：
   • 「📥 仅下载 .map」— 下载原始 .map 文件
   • 「📦 下载所有源码 (.zip)」— 解析 .map 并打包还原后的源码

本地测试（Mock Server）

项目内置了一个 mock 前端服务，可模拟包含 .map 泄露的站点，方便测试：

# 进入 mock-server 目录
cd mock-server

# 启动服务器（零依赖，仅需 Node.js）
node server.js

服务器启动后在 Chrome 中访问 http://localhost:3456，即可用插件扫描并下载还原的源码。

Mock 服务器模拟了 3 个 JS 文件 + 3 个 .map 文件，预期可还原约 10 个源码文件：

JS 文件	.map 文件	包含的源码
app.js	app.js.map	App.vue、main.js、store/cart.js
vendor.js	vendor.js.map	debounce.js、throttle.js、format.js
components.js	components.js.map	ProductCard.vue、CartIcon.vue、FeatureList.vue、NavBar.vue

---

项目结构

MapRecon/
├── manifest.json          # Chrome 扩展清单 (Manifest V3)
├── background.js          # Service Worker — 核心逻辑（JS 拦截、.map 下载、ZIP 打包）
├── content.js             # Content Script — 页面内 JS URL 收集
├── popup.html             # 扩展弹出窗口 UI
├── popup.js               # 弹出窗口交互逻辑
├── favicon.png            # 原始图标（用于生成各尺寸图标）
├── icons/                 # 扩展图标
│   ├── icon16.png
│   ├── icon48.png
│   └── icon128.png
├── images/                # 截图与图片资源
│   ├── 1.png              # 加载插件截图
│   ├── 2.png              # 检测与下载截图
│   └── 3.png              # 还原源码截图
├── lib/                   # 预留的第三方库目录
├── mock-server/           # 本地测试用 mock 前端服务
│   ├── server.js          # Node.js 服务器（零依赖）
│   ├── package.json
│   └── public/
│       ├── index.html     # 测试页面
│       ├── css/style.css
│       └── js/
│           ├── app.js / app.js.map
│           ├── vendor.js / vendor.js.map
│           └── components.js / components.js.map
└── README.md

---

技术原理

工作流程

页面加载
  │
  ├─ content.js: 收集 JS URL (performance API + DOM scan)
  ├─ background.js: webRequest 实时拦截 JS 请求
  │
  ▼
用户点击「扫描页面」
  │
  ├─ 合并去重所有 JS URL
  ├─ Service Worker fetch 每个 JS 文件
  ├─ 正则提取 sourceMappingURL 注释
  │
  ▼
发现 .map 文件
  │
  ├─ 点击「下载所有源码」
  ├─ fetch 每个 .map 文件
  ├─ 解析 JSON → 提取 sources + sourcesContent
  ├─ 过滤 node_modules 和空文件
  ├─ 去重（按路径）
  ├─ 内建 ZIP 打包器生成压缩包
  └─ chrome.downloads.download() 触发下载

Source Map 结构

一个标准的 .map 文件包含：

{
  "version": 3,
  "file": "app.js",
  "sources": ["webpack:///src/App.vue", "webpack:///src/main.js"],
  "sourcesContent": [
    "<template>...</template><script>...</script>",
    "import Vue from 'vue';\n..."
  ],
  "mappings": "AAAA;AACA;..."
}

• sources — 原始源码文件路径
• sourcesContent — 完整的原始源码内容（如果构建时配置了 devtool: 'source-map'）

本扩展主要依赖 sourcesContent 字段。如果 .map 文件中不包含该字段，则无法还原源码。

---

常见问题

扫描不到 JS 文件？

• 确保页面已完全加载（包括动态加载的脚本）
• 对于 SPA 应用，尝试切换路由后再扫描
• 刷新页面后重试

发现 .map 但下载后为空？

• 部分 .map 文件的 sourcesContent 可能为空（取决于构建配置）
• 可以尝试「仅下载 .map」获取原始文件查看

.map 文件没有被检测到？

• 检查 JS 文件中是否包含 //# sourceMappingURL=xxx.map 注释
• 某些 CDN 的 JS（如 cdn.jsdelivr.net）会被自动过滤
• 相对路径的 .map 引用会被自动解析为完整 URL

为什么过滤了 CDN 的 JS？

公共 CDN（如 jsdelivr、unpkg、googleapis 等）的第三方库通常不是目标站点的源码，过滤它们可以减少扫描时间并提高结果的相关性。

---

权限说明

权限	用途
activeTab	获取当前标签页信息
scripting	注入 content script 收集 JS URL
downloads	触发下载 ZIP / .map 文件
storage	保存扩展配置
notifications	下载完成通知
webRequest	拦截所有 JS 网络请求
<all_urls>	支持任意网站的扫描

---

License

MIT