Chrome extension that styles multiple sets of words on a page.
- Original Idea: quickly redact/highlight ingredients from a resturant menu or recipe based on a set of rules.
- Expanded idea (WIP): highlighting google search terms when you click on a result.
On page load the extension will check the chrome tabs
API for permission to access page level DOM. If permission is allowed the content_script
will request a set of matches from StorageService
. The content_script
will then parse the DOM of the active page to find matches of search strings in TextNodes
. After list of matches is found it will then wrap the matched serach terms in <span>
elements with inline styling and re-render to the page.
- Check permissions
- Grab matches from storage
- Parse DOM nodes
- Wrap search terms in
<span>
- Dynamic access to active page DOM tree
- Efficiently searching for matches (
Document.createTreeWalker()
) -
chrome.storage.sync
API to keep your search terms - Basic options page to add/remove styles and matches
- Extracting search terms from previous google search
- Expand settings page to allow modification
- RegEx search support
- Multiple terms in one
TextNode
-
<span>
clean up - Unit testing
- Chrome Web Store