# webToMd

**Repository Path**: jpw_code/web-to-md

## Basic Information

- **Project Name**: webToMd
- **Description**: 网页转 Markdown 导出插件
一款 Chrome 浏览器扩展，能够将网页内容一键转换为 Markdown 文档并导出。支持自定义 CSS 选择器、网址匹配规则和配置列表管理。
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-04-15
- **Last Updated**: 2026-04-24

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 网页转 Markdown 导出插件

一款 Chrome 浏览器扩展，能够将网页内容一键转换为 Markdown 文档并导出。支持自定义 CSS 选择器、网址匹配规则和配置列表管理。

## 功能特性

- **一键导出** - 将当前网页内容快速转换为 Markdown 格式
- **CSS 选择器** - 支持自定义 CSS 选择器精准提取目标内容
- **网址匹配规则** - 自动识别当前网址并匹配对应配置
- **配置列表管理** - 保存多个配置规则，方便复用
- **HAR 文件导入** - 支持导入浏览器 Network 导出的 .har 文件，批量导出接口文档
- **表格支持** - 完整支持 HTML 表格转换为 Markdown 表格
- **代码块识别** - 自动识别 Ace Editor 等代码编辑器内容
- **隐藏元素过滤** - 自动跳过 `display: none`、`visibility: hidden` 等隐藏元素
- **智能转换** - 支持标题、列表、链接、图片、代码块等常见元素

## 安装教程

### 方式一：开发者模式加载（推荐）

1. 下载或克隆本项目到本地
2. 打开 Chrome 浏览器，访问 `chrome://extensions/`
3. 开启右上角的「开发者模式」
4. 点击「加载已解压的扩展程序」
5. 选择项目文件夹（包含 `manifest.json` 的目录）
6. 安装完成，浏览器工具栏会出现插件图标

### 方式二：打包安装

1. 在 `chrome://extensions/` 页面点击「打包扩展程序」
2. 选择项目文件夹，生成 `.crx` 文件
3. 将 `.crx` 文件拖拽到扩展程序页面安装

## 使用说明

### 基本使用

1. 打开需要导出的网页
2. 点击浏览器工具栏中的插件图标
3. 输入 CSS 选择器（可选），例如：
   - `.article-content` - 导出指定类名的元素
   - `#main` - 导出指定 ID 的元素
   - 留空则导出整个页面
4. 点击「导出当前页面」按钮
5. Markdown 文件将自动下载到浏览器默认下载目录

### 配置规则管理

**保存配置：**
1. 输入网址匹配规则（如 `github.com`、`yapi.example.com`）
2. 输入对应的 CSS 选择器
3. 点击「保存为配置规则」

**自动匹配：**
- 下次访问匹配的网址时，插件会自动填充对应的配置
- 已匹配的规则会显示在界面顶部

**删除配置：**
- 在配置列表中点击「删除」按钮

### HAR 文件导入功能

用于将浏览器 Network 面板的请求记录导出为 Markdown 文档。

**使用方法：**
1. 打开浏览器的开发者工具 (F12)
2. 切换到 Network 面板
3. 执行需要记录的接口操作
4. 右键点击任意请求，选择 "Save all as HAR"
5. 保存 .har 文件到本地
6. 回到插件，点击「导入 HAR 文件」按钮
7. 选择或拖拽上传 .har 文件
8. 选择需要导出的请求（支持多选、搜索过滤）
9. 点击「导出 MD」下载文档

**导出的 Markdown 内容：**
- 请求方法（GET/POST/PUT/DELETE 等）
- 请求地址
- Query 参数（表格形式）
- 请求 Headers（表格形式）
- 请求 Body（格式化 JSON/表单）
- 响应数据

### 支持的 HTML 元素

| HTML 元素 | Markdown 格式 |
|-----------|---------------|
| `<h1>` - `<h6>` | `#` - `######` |
| `<p>`, `<div>` | 段落 |
| `<a href="...">` | `[文本](链接)` |
| `<img src="...">` | `![alt](图片地址)` |
| `<strong>`, `<b>` | `**粗体**` |
| `<em>`, `<i>` | `*斜体*` |
| `<code>` | `` `代码` `` |
| `<pre>` | 代码块 |
| `<blockquote>` | `> 引用` |
| `<ul>`, `<ol>` | 无序/有序列表 |
| `<table>` | Markdown 表格 |
| `<hr>` | `---` |

## 项目结构

```
web-to-md/
├── manifest.json    # 扩展配置文件
├── background.js    # 后台脚本，处理下载
├── content.js       # 内容脚本，提取和转换内容
├── popup.html       # 弹出窗口界面
├── popup.js         # 弹出窗口逻辑
└── icon.png         # 插件图标
```

## 技术栈

- **Manifest V3** - Chrome 扩展最新标准
- **Vanilla JavaScript** - 原生 JS，无依赖
- **Chrome APIs** - storage、downloads、tabs、activeTab

## 常见问题

**Q: 导出时提示「未找到指定的元素」？**

A: 请检查 CSS 选择器是否正确，可以在浏览器控制台使用 `document.querySelector('选择器')` 测试。

**Q: 下载的文件在哪里？**

A: 文件会下载到浏览器设置的默认下载目录，通常是 `Downloads` 或 `下载` 文件夹。

**Q: 如何导出部分内容？**

A: 使用 CSS 选择器指定目标元素，如 `.article-body` 或 `#content`。

**Q: 表格显示不正常？**

A: 确保目标元素包含完整的 `<table>` 结构，包括 `<thead>` 和 `<tbody>`。

## 参与贡献

1. Fork 本仓库
2. 新建 Feature 分支 (`git checkout -b feature/AmazingFeature`)
3. 提交更改 (`git commit -m 'Add some AmazingFeature'`)
4. 推送到分支 (`git push origin feature/AmazingFeature`)
5. 提交 Pull Request

## 许可证

MIT License

## 更新日志

### v1.0.0
- 初始版本发布
- 支持 CSS 选择器提取内容
- 支持配置列表管理
- 支持表格、代码块转换
- 支持隐藏元素过滤
- 支持 Ace Editor 代码提取