Git Forge HTML Preview lets you instantly render HTML files hosted on platforms like GitHub, GitLab, Bitbucket, and more.
Powered by the popular open source project, html-preview/html-preview.github.io, it’s designed for developers, designers, and researchers working with static site generator such as Quarto.
This web extension redirects HTML files from Git forges like GitHub, GitLab, Bitbucket to the html-preview.github.io without needing to open the website manually.
You can open the preview in three ways:
-
via a keyboard shortcut. (
Alt+PorOption+P)- It is configurable via
chrome://extensions/shortcuts
- It is configurable via
-
from the right-click context menu
-
or using a 'Preview' button on GitHub.
This extension is driven by my regular use of html-preview/html-preview.github.io. Constantly switching between GitHub and the html-preview site introduced unnecessary context switching, which disrupted my workflow.
Inspired by existing web extensions like Github Html Preview which make the same task a seamless experience via a button, I built on top of these ideas to further improve functionality with keyboard shortcuts and context menu access.
Note that existing web extensions use different implementations to render HTML files, so the output may vary.
For more details, see my writeup.
You can install this web extension directly from the Chrome Web Store or Microsoft Edge Addons.
If you want to install the extension locally, follow these steps:
- Clone or download this repo
- Go to
chrome://extensions - Enable Developer Mode
- Click Load unpacked
- Select the
publicfolder in the cloned repo - The extension should now be installed and ready to use!
This extension is built primarily for Github. For example, the Preview button is only available for github.
However, it already support other Git forges like GitLab and Bitbucket via context menu and shortcut keys. If you want to contribute to support UI element for other Git forges, please feel free to fork this repo and create a pull request.