# 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

# Web to Markdown Exporter

A Chrome extension that converts web page content to Markdown documents with one click. Features custom CSS selectors, URL pattern matching, and configuration management.

## Features

- **One-Click Export** - Quickly convert web page content to Markdown format
- **CSS Selectors** - Extract specific content using custom CSS selectors
- **URL Pattern Matching** - Automatically match and apply configurations based on current URL
- **Configuration Management** - Save multiple configuration rules for reuse
- **HAR File Import** - Import .har files from browser Network panel and batch export API documentation
- **Table Support** - Full support for converting HTML tables to Markdown tables
- **Code Block Detection** - Automatically detect content from Ace Editor and other code editors
- **Hidden Element Filtering** - Skip `display: none`, `visibility: hidden`, and other hidden elements
- **Smart Conversion** - Support for headings, lists, links, images, code blocks, and more

## Installation

### Method 1: Developer Mode (Recommended)

1. Download or clone this project
2. Open Chrome and navigate to `chrome://extensions/`
3. Enable "Developer mode" in the top right corner
4. Click "Load unpacked"
5. Select the project folder (containing `manifest.json`)
6. The extension icon will appear in your browser toolbar

### Method 2: Packaged Extension

1. On the `chrome://extensions/` page, click "Pack extension"
2. Select the project folder to generate a `.crx` file
3. Drag and drop the `.crx` file onto the extensions page

## Usage

### Basic Usage

1. Open the web page you want to export
2. Click the extension icon in the browser toolbar
3. Enter a CSS selector (optional), for example:
   - `.article-content` - Export element with specific class
   - `#main` - Export element with specific ID
   - Leave empty to export the entire page
4. Click "Export Current Page"
5. The Markdown file will download automatically

### Configuration Management

**Save Configuration:**
1. Enter URL pattern (e.g., `github.com`, `yapi.example.com`)
2. Enter corresponding CSS selector
3. Click "Save Configuration Rule"

**Auto-Matching:**
- When visiting a matching URL, the extension will auto-fill the configuration
- Matched rules are displayed at the top of the popup

**Delete Configuration:**
- Click the "Delete" button in the configuration list

### HAR File Import Feature

Export API requests from browser Network panel as Markdown documents.

**How to use:**
1. Open browser DevTools (F12)
2. Go to Network panel
3. Perform the API operations you want to record
4. Right-click any request → "Save all as HAR"
5. Save the .har file locally
6. Back to the extension, click "Import HAR File"
7. Select or drag & drop the .har file
8. Select the requests you want to export (multi-select, search filter supported)
9. Click "Export MD" to download

**Exported Markdown includes:**
- Request method (GET/POST/PUT/DELETE, etc.)
- Request URL
- Query parameters (as table)
- Request Headers (as table)
- Request Body (formatted JSON/form)
- Response data

### Supported HTML Elements

| HTML Element | Markdown Format |
|--------------|-----------------|
| `<h1>` - `<h6>` | `#` - `######` |
| `<p>`, `<div>` | Paragraph |
| `<a href="...">` | `[text](link)` |
| `<img src="...">` | `![alt](image-url)` |
| `<strong>`, `<b>` | `**bold**` |
| `<em>`, `<i>` | `*italic*` |
| `<code>` | `` `code` `` |
| `<pre>` | Code block |
| `<blockquote>` | `> quote` |
| `<ul>`, `<ol>` | Unordered/ordered list |
| `<table>` | Markdown table |
| `<hr>` | `---` |

## Project Structure

```
web-to-md/
├── manifest.json    # Extension configuration
├── background.js    # Background script for downloads
├── content.js       # Content script for extraction and conversion
├── popup.html       # Popup interface
├── popup.js         # Popup logic
└── icon.png         # Extension icon
```

## Tech Stack

- **Manifest V3** - Latest Chrome extension standard
- **Vanilla JavaScript** - No dependencies
- **Chrome APIs** - storage, downloads, tabs, activeTab

## FAQ

**Q: "Element not found" error?**

A: Check if the CSS selector is correct. Test in browser console with `document.querySelector('selector')`.

**Q: Where are downloaded files saved?**

A: Files are saved to the browser's default download directory.

**Q: How to export only part of a page?**

A: Use CSS selectors to target specific elements, like `.article-body` or `#content`.

**Q: Tables not displaying correctly?**

A: Ensure the target element contains a complete `<table>` structure with `<thead>` and `<tbody>`.

## Contributing

1. Fork the repository
2. Create a Feature branch (`git checkout -b feature/AmazingFeature`)
3. Commit changes (`git commit -m 'Add some AmazingFeature'`)
4. Push to branch (`git push origin feature/AmazingFeature`)
5. Open a Pull Request

## License

MIT License

## Changelog

### v1.0.0
- Initial release
- CSS selector content extraction
- Configuration list management
- Table and code block conversion
- Hidden element filtering
- Ace Editor code extraction