ClickNote - Contextual Web Notes

About

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