https://github.com/otthe/github-previewer

Chrome extension to render HTML and CSS files from GitHub repositories
https://github.com/otthe/github-previewer

chrome-extension css documentation extension github html preview

Last synced: 2 months ago
JSON representation

Chrome extension to render HTML and CSS files from GitHub repositories

• Host: GitHub
• URL: https://github.com/otthe/github-previewer
• Owner: otthe
• License: mit
• Created: 2024-06-03T13:11:09.000Z (12 months ago)
• Default Branch: main
• Last Pushed: 2024-06-03T15:34:37.000Z (12 months ago)
• Last Synced: 2025-01-22T08:11:27.197Z (4 months ago)
• Topics: chrome-extension, css, documentation, extension, github, html, preview
• Language: JavaScript
• Homepage:
• Size: 33.2 KB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# GitHub HTML & CSS Previewer

GitHub HTML & CSS Previewer is a Chrome extension that adds a convenient preview button to HTML files in GitHub repositories. This button allows you to quickly view the rendered output directly within new browser tab.





![Alt text](/screenshots/preview.png?raw=true "Optional Title")

## Features

* Adds a < Preview > button next to HTML and CSS files in GitHub repositories.

* Opens a new tab to display the rendered content of HTML files.

* Inlines CSS and images to ensure accurate previews.

* Toggle functionality to enable or disable the extension as needed.

## Installation

1. Clone or download this repository to your local machine.

2. Open Chrome and navigate to chrome://extensions/.

3. Enable "Developer mode" by toggling the switch in the upper-right corner.

4. Click the "Load unpacked" button and select the extension directory from where you downloaded/cloned this repository.

5. The extension should now be installed and active.

## Usage

1. Navigate to any GitHub repository containing HTML and CSS files.

2. You will see a < Preview > button next to HTML files.

3. Click the < Preview > button to open a new tab with the rendered content.

4. Use the popup toggle to enable or disable the preview functionality.

## Things to consider

* This extension might not work as expected if there is scripts linked to the HTML.

## License

This project is licensed under the MIT License. See the [LICENSE](LICENSE) file for details.