Epic Highlighter is a Chrome extension designed to highlight elements with the same data-epic attribute on any webpage. It allows you to cycle through different groups of elements and visually emphasizes the currently selected group with a glowing blue border. This will help me in creating HTML videos for my channel
Epic Highlighter is a Chrome extension designed to highlight elements with the same data-epic
attribute on any webpage. It allows you to cycle through different groups of elements and visually emphasizes the currently selected group with a glowing blue border.
data-epic
attribute.Download the repository:
git clone https://github.com/Raccoon254/highlight-chrome-extension.git
Open Chrome Extensions page:
chrome://extensions/
.Enable Developer Mode:
Load Unpacked Extension:
Extension Installed:
Navigate to a Webpage:
Highlight Elements:
data-epic
attribute and groups them.Keyboard Shortcuts:
N
to move to the next group of elements.P
to move to the previous group of elements.Auto Mode:
manifest.json
: The extension manifest file.content.js
: Script that handles highlighting logic and interactions.styles.css
: CSS for the highlight effect.background.js
: Background script for managing extension state and messages.popup.html
: HTML for the extension popup.images/highlight.png
: Icon for the extension.The extension works by identifying elements with a data-epic
attribute, grouping them by their data-epic
value, and then applying a highlight effect to the currently selected group. Users can navigate through these groups using keyboard shortcuts or by enabling auto mode.
data-epic
attribute.git checkout -b feature/your-feature-name
git commit -m 'Add your feature description'
git push origin feature/your-feature-name
This project is licensed under the MIT License.