# html2md_ext

**Repository Path**: yuesir/html2md_ext

## Basic Information

- **Project Name**: html2md_ext
- **Description**: html 转 markdown 浏览器扩展
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-06-18
- **Last Updated**: 2025-08-05

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# HTML to Markdown Chrome 扩展

一个简单易用的 Chrome 浏览器扩展，可以将网页上选中的 HTML 内容转换为 Markdown 格式。

## 功能特性

- 🔄 将选中的 HTML 内容转换为 Markdown 格式
- 📋 支持复制转换结果到剪贴板
- 👀 实时预览 Markdown 渲染效果
- 🎯 支持多种 HTML 元素转换：
  - 标题 (H1-H6)
  - 段落和换行
  - 粗体和斜体
  - 链接和图片
  - SVG 图片（自动转换为 base64 格式）
  - 列表（有序和无序）
  - 代码块和行内代码
  - 引用块
  - 表格

## 安装方法

### 开发者模式安装

1. 打开 Chrome 浏览器
2. 在地址栏输入 `chrome://extensions/`
3. 开启右上角的「开发者模式」
4. 点击「加载已解压的扩展程序」
5. 选择本项目的文件夹
6. 扩展安装完成！

## 使用方法

### 方法一：右键菜单

1. 在任意网页上选中要转换的内容
2. 右键点击选中的内容
3. 在右键菜单中选择「转换为 Markdown」
4. 系统会自动打开新标签页显示转换结果

### 方法二：扩展弹窗

1. 在任意网页上选中要转换的内容
2. 点击浏览器工具栏中的扩展图标
3. 在弹出窗口中点击「转换当前选择的内容」
4. 系统会自动打开新标签页显示转换结果

## 转换结果页面

转换完成后，会在新标签页中显示：

- **原始 HTML**：显示选中内容的原始 HTML 代码
- **转换后的 Markdown**：显示转换后的 Markdown 代码
- **Markdown 预览**：显示 Markdown 的渲染效果
- **操作按钮**：
  - 复制 Markdown：将 Markdown 代码复制到剪贴板
  - 复制 HTML：将原始 HTML 代码复制到剪贴板
  - 关闭：关闭当前标签页

## 支持的 HTML 元素

| HTML 元素 | Markdown 转换 | 说明 |
|-----------|---------------|------|
| `<h1>-<h6>` | `# ## ### #### ##### ######` | 标题 |
| `<p>` | 段落 | 段落文本 |
| `<br>` | 换行 | 换行符 |
| `<strong>`, `<b>` | `**粗体**` | 粗体文本 |
| `<em>`, `<i>` | `*斜体*` | 斜体文本 |
| `<code>` | `` `代码` `` | 行内代码 |
| `<pre>` | ``` 代码块 ``` | 代码块 |
| `<a>` | `[链接文本](URL)` | 链接 |
| `<img>` | `![alt文本](图片URL)` | 图片 |
| `<ul>`, `<li>` | `- 列表项` | 无序列表 |
| `<ol>`, `<li>` | `1. 列表项` | 有序列表 |
| `<blockquote>` | `> 引用文本` | 引用块 |
| `<table>` | Markdown 表格 | 表格 |

## 文件结构

```
html2md_ext/
├── manifest.json          # 扩展配置文件
├── background.js           # 后台脚本
├── content.js             # 内容脚本
├── popup.html             # 弹窗页面
├── popup.js               # 弹窗脚本
├── result.html            # 结果展示页面
├── result.js              # 结果页面脚本
├── icons/                 # 图标文件夹
│   ├── icon16.png
│   ├── icon48.png
│   └── icon128.png
└── README.md              # 说明文档
```

## 技术实现

- **Manifest V3**：使用最新的 Chrome 扩展 API
- **Service Worker**：后台脚本处理右键菜单和消息传递
- **Content Scripts**：注入到网页中获取选中内容
- **HTML 解析**：使用 DOM API 解析和转换 HTML
- **Markdown 转换**：自定义转换算法支持常见 HTML 元素

## 注意事项

1. 扩展需要「activeTab」权限来访问当前标签页内容
2. 某些复杂的 HTML 结构可能转换效果不完美
3. 建议在转换前检查选中内容是否完整
4. 转换结果可能需要手动调整格式

## 开发和贡献

欢迎提交 Issue 和 Pull Request 来改进这个扩展！

### 开发环境

1. 克隆或下载项目代码
2. 按照安装方法加载到 Chrome
3. 修改代码后重新加载扩展即可测试

## 许可证

MIT License