MnemoMark

MnemoMark Chrome Extension Overview MnemoMark is a powerful Chrome browser extension designed to revolutionize how users interact with, organize, and remember web content. Built with Manifest V3, this extension provides an intuitive system for highlighting text across any webpage, organizing information through a flexible hierarchical tagging system, and maintaining comprehensive notes on highlighted content. The extension seamlessly integrates into the browsing experience, offering multiple methods for content capture and organization while maintaining persistent storage across browser sessions. Core Highlighting Features Text Highlighting Capabilities MnemoMark enables users to highlight any selectable text on web pages with remarkable ease and precision. The extension supports highlighting across virtually all web content, including standard HTML pages, dynamic single-page applications (SPAs), embedded content, and even PDF documents viewed within Chrome's built-in PDF viewer. When text is highlighted, it is visually marked with a customizable color that corresponds to the tags applied. The highlighting system uses XPath references to precisely locate and store highlighted text, ensuring that highlights can be accurately associated with their source content. Floating Highlight Button One of the most distinctive and user-friendly features of MnemoMark is the floating highlight button that appears automatically when users select text on any webpage. This elegant interface element materializes near the selected text, typically positioned above and to the right of the selection, providing immediate visual feedback and a one-click method to highlight content. The floating button employs sophisticated positioning algorithms that automatically adjust its location to remain visible within the viewport, even when selections are made near screen edges. When clicked, it opens an inline tag selection modal that overlays the page content, allowing users to quickly assign one or more tags to their highlight without navigating away from the current page. Multiple Highlighting Methods MnemoMark provides users with three distinct methods for creating highlights. The primary method utilizes the floating button, which offers the fastest workflow for quick highlighting during active reading. A secondary method involves using the extension popup, where users can select text and then click the extension icon to access highlighting controls. The third method leverages Chrome's context menu integration, allowing users to right-click on selected text and choose "Highlight selected text" from the context menu. This method is especially valuable when working with PDF documents, where the floating button may have limited functionality due to the PDF viewer's security restrictions. Advanced Tag System Hierarchical Tag Architecture MnemoMark implements a sophisticated hierarchical tagging system that supports multi-parent relationships, meaning that any tag can have multiple parent tags simultaneously. This flexible architecture enables users to create complex organizational structures that reflect the nuanced relationships between different concepts and categories. For example, a tag labeled "Machine Learning" could simultaneously be a child of both "Artificial Intelligence" and "Data Science." This multi-parent capability creates a graph-like structure rather than a strict tree hierarchy, providing users with unprecedented flexibility in organizing their information. Tag Management Interface The tag creation and editing interface in MnemoMark is designed to make complex hierarchical relationships easy to manage. When creating or editing a tag, users are presented with intuitive multi-select dropdowns that allow them to choose parent tags and child tags. The interface provides visual feedback through "chip" displays that show current parent and child relationships, with easy removal options via clickable × buttons. Each tag can be assigned a custom color using a standard color picker, enabling visual organization and quick identification. When highlights are created with tags, they inherit the color of the first selected tag, creating a visual coding system. Tag names are validated to prevent duplicates (case-insensitive), ensuring data integrity. When tags are deleted, the system automatically cleans up all relationships. The tag system includes sophisticated relationship management that automatically maintains consistency across the tag hierarchy through bidirectional updates. PDF Document Support MnemoMark includes comprehensive support for PDF documents viewed within Chrome's built-in PDF viewer. The extension employs multiple detection methods to identify PDF content, checking URL patterns, embedded PDF elements, PDF.js viewer components, and various PDF plugin containers. When a PDF is detected, the extension automatically displays a helpful information popup in the top-right corner of the page that appears approximately two seconds after the PDF loads, providing users with clear instructions on how to highlight text in PDFs. The popup explains that users should select text and then right-click to access the "Highlight selected text" context menu option. The popup includes a close button and automatically fades out after ten seconds, but it reappears every time a PDF is loaded. PDF text selection presents unique challenges due to the way Chrome's PDF viewer renders content. MnemoMark addresses these challenges through multiple selection detection strategies, including event listeners on PDF.js text layers, polling mechanisms, and MutationObserver instances that watch for dynamically added content. For PDFs, highlights are stored with metadata indicating that they originated from PDF content, including the PDF URL, selected text, associated tags, notes, and timestamps. Authentication and Cloud Synchronization MnemoMark integrates with Firebase Authentication and Firestore to provide opti…