ClickNote - Contextual Web Notes

Double-click anywhere on a page to add a note for that specific location.

# ClickNote - Contextual Web Notes 📝 A Chrome extension that lets you add notes directly to any webpage with a double-click 🖱️✍️. --- ## ✨ Features * **📌 Contextual Notes:** Double-click anywhere on a webpage to create a plain text note associated with that specific location. * **👀 Visual Markers:** When you revisit a page with notes, a small icon appears near where you originally took the note. * **🖊️ View & Edit:** Click the icon to view or edit your previous note, or to delete it. * **📚 Page Notes Overview (TODO):** Planned support to quickly view all notes on the current page from within the note overlay. * **🏠 Central Management:** Click the extension icon in the browser toolbar to open a popup where you can view, search, and manage all your notes across all websites. * **🗑️ Delete Notes:** Easily delete notes either from the overlay on the page or from the list in the popup window. * **🌐 Bilingual Support:** The interface supports English and Simplified Chinese. ## 🚀 Installation & Loading (Local Development) 1. **Get the Code:** Clone this repository or download the ZIP file and extract it. ```bash git clone <repository_url> click-note cd click-note ``` 2. **Open Chrome Extensions:** Type `chrome://extensions` in your Chrome address bar and press Enter. 3. **Enable Developer Mode:** Ensure the "Developer mode" toggle in the top-right corner is turned on. 4. **Load Unpacked:** Click the "Load unpacked" button. 5. **Select Project Folder:** In the file selector that appears, navigate to and select the `click-note` folder (the one containing the `manifest.json` file). 6. **Done!** 🎉 You should now see ClickNote in your list of extensions, and its icon should appear in the Chrome toolbar. ## 📖 How to Use * **Create a Note:** Double-left-click within the content area of any webpage. * **Save a Note:** Type your content in the input box that appears and click the "Save" button. * **View/Edit a Note:** When you see a note icon (🟡) on the page, click it. * **Delete a Note:** Click the "Delete" button in the note editing overlay, or click the delete button next to a note in the extension popup. * **View All Notes:** Click the ClickNote icon in your Chrome toolbar. ## ⚠️ Known Limitations & Future Work * **Positioning Accuracy:** 📍 The current version uses simple X/Y coordinates to position note icons. This means that if the page layout changes (e.g., window resize, dynamic content loading/unloading), the icons may not remain accurately positioned next to their originally associated content. This is a key area for future improvement, potentially exploring CSS Selectors or the Text Fragments API. * **Rich Text/Formatting:** Only plain text notes are currently supported. * **Syncing:** Notes are stored locally in the browser only; cross-device sync is not supported. * **Performance:** For a very large number of notes, the popup loading and search performance might need optimization.