html2markdown

A browser extension for Chrome, Edge, and Firefox that converts HTML content on any web page into Markdown — and lets you save it as a .md file.

Overview

html2markdown makes it easy to grab a piece of a web page and turn it into clean Markdown. Instead of copying messy HTML or hand-formatting text, just point at the element you want and let the extension do the conversion for you.

Features

• 🧩 Cross-browser — works on Chrome, Edge, and Firefox.
• 🔄 HTML → Markdown — converts the content of any element into well-formed Markdown.
• 💾 Save to file — download the result as a Markdown (.md) file.
• 🎯 Visual element picker — hover to highlight, click to select.

How It Works

1. Click the html2markdown icon in your browser's toolbar.
2. A popup appears with a Select element button — click it to start picking.
3. Move your cursor over the page. The element under the cursor is outlined with a border so you can see exactly what will be captured.
4. Click the element you want. Its content is instantly converted to Markdown.
5. A popup opens showing the result with a Save option, so you can download it as a .md file.

Installation

This extension is built with Vite. Build it once, then load the generated dist/ folder as an unpacked extension.

npm install
npm run build           # Chrome / Edge build -> dist/
npm run build:firefox   # Firefox build      -> dist/

Chrome / Edge

1. Run npm run build.
2. Go to chrome://extensions (or edge://extensions).
3. Enable Developer mode.
4. Click Load unpacked and select the dist/ folder.

Firefox

1. Run npm run build:firefox.
2. Go to about:debugging#/runtime/this-firefox.
3. Click Load Temporary Add-on….
4. Select dist/manifest.json.

Development

Command	What it does
npm run dev	Build + watch and launch Chrome with the extension loaded
npm run dev:firefox	Same, for Firefox
npm run build / npm run build:firefox	Production build into dist/
npm run icons	Regenerate the placeholder icons in public/icons/
npm run zip	Package dist/ into a distributable zip under artifacts/

Project layout

manifest.json        MV3 manifest (base; Firefox tweaks added at build time)
vite.config.js       Vite + vite-plugin-web-extension config
src/popup/           Toolbar popup (Select element button)
src/content/         On-demand content script: picker, conversion, save modal
src/lib/markdown.js  Turndown + GFM configuration
public/icons/        Extension icons

The content script is injected on demand via activeTab + scripting only when you click Select element — it never runs on pages you haven't acted on. The only permissions requested are activeTab and scripting.

Usage

Step	Action
1	Click the extension icon
2	Press Select element
3	Hover to highlight the target element (it gets a border)
4	Click the element to convert it to Markdown
5	Review the Markdown and click Save to download the file

License

MIT