FocKus is a browser extension that allows users to highlight, organize, and persist important text across web pages. It is designed to improve reading and research workflows by turning any webpage into an annotated workspace.
FocKus enables users to:
- Highlight selected text on any webpage
- Choose highlight colors through a simple floating interface
- Persist highlights so they remain visible across sessions
- Reconstruct highlights reliably even after page reloads
The extension focuses on simplicity, performance, and robustness in handling real-world web content.
- Text highlighting directly within webpages
- Multiple color options for organization
- Persistent storage of highlights
- DOM-aware selection tracking for accuracy
- Lightweight floating UI for interaction
When a user highlights text, the extension captures structured metadata including:
- Selection offsets
- DOM node references
- Page URL
- Highlight color
- Unique identifier
This data is stored locally. On subsequent visits, the extension:
- Loads stored highlights
- Matches them to the current DOM
- Reconstructs and reapplies the highlights
This approach ensures that highlights remain stable even when the page structure changes slightly.
-
Clone the repository: git clone https://github.com/Om-A-osc/FocKus.git cd FocKus
-
Open Chrome and navigate to chrome://extensions/
-
Enable Developer Mode
-
Click "Load unpacked"
-
Select the project folder
- Select any text on a webpage
- Choose a highlight color from the floating interface
- The highlight is saved automatically
- Reload the page to see the highlight persist
flowchart TD
A[User selects text] --> B[Create highlight object]
B --> C[Store in localStorage]
C --> D[Save metadata offsets selectors color]
D --> E[On page reload]
E --> F[Reconstruct selection]
F --> G[Apply highlight spans]
Most highlighting tools struggle with persistence and DOM changes. FocKus addresses these issues by:
- Storing structural information instead of raw text alone
- Using selection offsets to maintain precision
- Reapplying highlights dynamically based on DOM matching
This makes the system more resilient compared to simpler implementations.
- Cross-device synchronization
- Centralized dashboard for highlights
- Search and filtering capabilities
- Integration with summarization tools
Contributions are welcome. You can:
- Fork the repository
- Create a new branch
- Make your changes
- Submit a pull request
Om-A-osc