|
| 1 | +# HTML2MD |
| 2 | + |
| 3 | +A browser extension that adds a sidebar to DevTools for converting selected HTML elements to Markdown. Supports Chrome, Edge, and Firefox. |
| 4 | + |
| 5 | +## Features |
| 6 | + |
| 7 | +- Select any element in the Elements inspector and instantly see its Markdown conversion |
| 8 | +- Live preview of the rendered Markdown |
| 9 | +- Copy to clipboard or download as `.md` file |
| 10 | +- Strips scripts, styles, and unnecessary attributes automatically |
| 11 | + |
| 12 | +## Install from Store |
| 13 | + |
| 14 | +*Coming soon* - Chrome Web Store | Firefox Add-ons | Edge Add-ons |
| 15 | + |
| 16 | +## Development |
| 17 | + |
| 18 | +### Prerequisites |
| 19 | + |
| 20 | +- Node.js 20+ |
| 21 | +- npm |
| 22 | + |
| 23 | +### Setup |
| 24 | + |
| 25 | +```bash |
| 26 | +git clone https://github.com/auy/HTML2MD.git |
| 27 | +cd html2md |
| 28 | +npm install |
| 29 | +``` |
| 30 | + |
| 31 | +### Build |
| 32 | + |
| 33 | +```bash |
| 34 | +npm run build # Production build (Chrome/Edge) |
| 35 | +npm run build:firefox # Production build (Firefox) |
| 36 | +``` |
| 37 | + |
| 38 | +### Run with Auto-Install |
| 39 | + |
| 40 | +```bash |
| 41 | +npm run start:chrome # Chrome (auto-downloads Chrome for Testing) |
| 42 | +npm run start:edge # Microsoft Edge |
| 43 | +npm run start:firefox # Mozilla Firefox |
| 44 | +``` |
| 45 | + |
| 46 | +Open DevTools (F12) > Elements tab > look for the **HTML2MD** sidebar tab. |
| 47 | + |
| 48 | +### Other Commands |
| 49 | + |
| 50 | +```bash |
| 51 | +npm run dev # Watch mode (rebuilds on file changes) |
| 52 | +npm run lint # Validate extension with web-ext lint |
| 53 | +npm run package # Zip dist/ for store submission |
| 54 | +``` |
| 55 | + |
| 56 | +## Cross-Platform Support |
| 57 | + |
| 58 | +Works on Windows, macOS, Linux, and WSL. Platform detection is automatic. |
| 59 | + |
| 60 | +## How It Works |
| 61 | + |
| 62 | +1. **Cleaning** - Strips `<script>`, `<style>`, `<noscript>` tags and non-essential attributes |
| 63 | +2. **Conversion** - [Turndown](https://github.com/mixmark-io/turndown) converts HTML to Markdown (ATX headings, fenced code blocks, GFM strikethrough) |
| 64 | +3. **Preview** - [marked](https://github.com/markedjs/marked) renders the Markdown back to HTML for preview |
| 65 | + |
| 66 | +## Contributing |
| 67 | + |
| 68 | +1. Fork the repository |
| 69 | +2. Create a feature branch (`git checkout -b feature/my-feature`) |
| 70 | +3. Commit your changes |
| 71 | +4. Push to the branch and open a Pull Request |
| 72 | + |
| 73 | +## License |
| 74 | + |
| 75 | +[MIT](LICENSE) |
0 commit comments