Clicknote Contextual Web

# 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.