Chrome Text Highlighter

Overview

Chrome Text Highlighter is a Chrome extension that lets you highlight selected text and store the highlight locally so it can be restored when you revisit the page.

Goal

• Easily highlight text on webpages.
• Save highlights per page using the page’s URL.
• Automatically restore highlights on page load.

Features

• Text Selection & Highlighting: Use Option+3 to wrap selected text in a <span> with a yellow background.
• Local Storage: Saves the parent container's HTML snapshot along with a unique XPath.
• Highlight Restoration: Restores the saved container HTML only on the matching page.

Architecture

• Content Script (content.js):

  • Detects text selection and applies highlight.
  • Chooses the direct parent of the highlight <span> as the container.
  • Generates a unique XPath using the element’s tag name and sibling order.
  • Uses the current page’s URL (e.g., location.pathname) as the storage key to isolate data.

• Storage: Uses chrome.storage.local to save and retrieve highlight data.

Installation & Usage

1. Clone the repository.
2. In Chrome, go to chrome://extensions/, enable Developer Mode, and click "Load unpacked" to select the project folder.
3. On a static webpage, highlight text by dragging and then press Option+3.

Algorithm Overview

• Highlight & Save: Wrap the selected text in a <span> (yellow background), then save the parent container's HTML and its unique XPath.XPath is generated by traversing from the element up to the root using tag names and sibling order, ensuring a unique identifier. (tree traversal)
• Restore: On page load, retrieve saved data using the page’s URL as the key and replace the container’s HTML using the XPath.

License

MIT License