Automatically detect and render Markdown files in your browser with zero configuration.
- Zero Configuration: Install and forget - it just works
- Automatic Detection: Detects markdown files by URL extension (
.md), content type, or content patterns - Beautiful Rendering: Clean, readable styling with proper heading hierarchy
- Mermaid Support: Render flowcharts, sequence diagrams, class diagrams, and more
- Local File Support: Works with
file://URLs for local markdown files - Non-Intrusive: Only activates on markdown content, never affects other pages
- Download or clone this repository
- Open your browser and navigate to the extensions page:
- Chrome:
chrome://extensions/ - Edge:
edge://extensions/ - Brave:
brave://extensions/
- Chrome:
- Enable Developer mode (toggle in the top right corner)
- Click Load unpacked
- Select the extension directory
To render local markdown files (file:// URLs):
- Go to the extension details page
- Enable Allow access to file URLs
Simply navigate to any markdown file in your browser:
- Web URLs:
https://example.com/readme.md - GitHub Raw:
https://raw.githubusercontent.com/user/repo/main/README.md - Local Files:
file:///path/to/your/document.md
The extension automatically:
- Detects if the content is Markdown
- Parses the Markdown syntax
- Renders it with beautiful formatting
- Displays a small "MD" badge in the top right corner
- Headings (H1-H6)
- Bold, italic, strikethrough text
- Ordered and unordered lists
- Task lists (checkboxes)
- Code blocks with language hints
- Inline code
- Blockquotes
- Links and images
- Tables
- Horizontal rules
- GFM (GitHub Flavored Markdown) tables
- Automatic URL linking
- Relative path resolution for images and links
Supports all major Mermaid diagram types:
- Flowcharts
- Sequence diagrams
- Class diagrams
- State diagrams
- Entity Relationship diagrams
- And more...
flowchart LR
A[Open MD File] --> B{Extension Active}
B --> C[Parse Markdown]
C --> D[Render HTML]
D --> E[Display]
This extension requires minimal permissions:
| Permission | Purpose |
|---|---|
activeTab |
Access current tab content when activated |
scripting |
Inject rendering scripts |
file://*/* |
Read local markdown files (user must enable) |
- Manifest Version: V3 (latest Chrome extension standard)
- Content Script: Handles detection and rendering
- External Libraries:
- marked.js - Markdown parser
- Mermaid.js - Diagram renderer
- Fast detection (<50ms)
- Lazy loading of Mermaid (only when diagrams detected)
- Large file protection (>1MB files skipped)
browser-extension-mdparser/
├── manifest.json # Extension configuration
├── content.js # Main content script
├── styles.css # Rendering styles
├── icons/ # Extension icons
│ ├── icon16.png
│ ├── icon32.png
│ ├── icon48.png
│ └── icon128.png
├── test/ # Test files
│ └── sample.md
├── PRD-en.md # Product requirements
└── README.md # This file
# Clone the repository
git clone https://github.com/tanghoong/browser-extension-mdparser.git
# Navigate to the directory
cd browser-extension-mdparser- Load the extension in developer mode
- Open
test/sample.mdto verify rendering - Test with various markdown files from different sources
This extension doesn't require a build step. Simply package the following files:
manifest.jsoncontent.jsstyles.cssicons/directory
- Automatic markdown detection
- Basic markdown rendering
- Mermaid diagram support
- Local file support
- Dark/Light theme toggle
- Font size adjustment
- Table of Contents generation
- Export Mermaid diagrams as images
- Per-site enable/disable settings
Contributions are welcome! Please feel free to submit a Pull Request.
This project is open source and available under the MIT License.
- marked.js - A markdown parser and compiler
- Mermaid.js - Generate diagrams from text
Markdown Parser - Read Markdown, Instantly.