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.

Get the Code: Clone this repository or download the ZIP file and extract it.
```
git clone <repository_url> click-note
cd click-note
```
Open Chrome Extensions: Type chrome://extensions in your Chrome address bar and press Enter.
Enable Developer Mode: Ensure the "Developer mode" toggle in the top-right corner is turned on.
Load Unpacked: Click the "Load unpacked" button.
Select Project Folder: In the file selector that appears, navigate to and select the click-note folder (the one containing the manifest.json file).
Done! 🎉 You should now see ClickNote in your list of extensions, and its icon should appear in the Chrome toolbar.

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.

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.