# Canifa Note — Browser Extension

![Canifa Note Extension](public/canifa-extension.png)

A modern, privacy-first browser extension designed for seamless, distraction-free note-taking directly from your active web pages. Built specifically for integration with the **Memos** backend infrastructure.

## ✨ Core Features

*   **⚡ Lightning Fast Capture**: Highlight any text on a web page and press `Space` or `Enter` to instantly save it as a note. No context switching required.
*   **🔗 Smart Source Tracking**: Automatically captures and appends the source URL and page title to your notes.
*   **🔄 Zero-Click Authentication**: Seamlessly extracts and syncs your `memos.access-token` directly from active Canifa Note/Memos tabs. No secondary login required.
*   **🎨 Premium UI/UX**: Fully redesigned using the **shadcn/ui** design system, featuring a sleek, dark-first interface with Canifa brand aesthetics.
*   **🏷️ Intelligent Tagging**: Tag notes on the fly with a smart, autocomplete-enabled chip interface.

## 🛠️ Tech Stack

*   **Framework**: React 18
*   **Build Tool**: Vite (optimized for Chrome Extension V3)
*   **Language**: TypeScript
*   **Styling**: Vanilla CSS (shadcn/ui token-driven architecture)
*   **Backend Integration**: Native support for open-source Memos API

## 🚀 Installation & Setup

### Prerequisites
*   Node.js 18+
*   npm or pnpm

### Build Instructions

1.  **Clone the repository:**
    ```bash
    git clone https://gitlab.hdtex.group/anhvh/canifa_note_extension.git
    cd canifa_note_extension
    ```

2.  **Install dependencies:**
    ```bash
    npm install
    ```

3.  **Build the extension:**
    ```bash
    npm run build
    ```
    *This will compile the TypeScript, bundle the React components, and output the final extension files into the `dist/` directory.*

### Load into Chrome

1.  Open Google Chrome and navigate to `chrome://extensions/`.
2.  Enable **Developer mode** (toggle in the top right corner).
3.  Click **Load unpacked**.
4.  Select the `dist/` folder that was generated in the build step.

## 🎯 Usage Guide

1.  **Log In to Backend**: Open your Canifa Note (Memos) instance at `http://172.16.2.210:5230/` and log in. The extension will automatically detect your session.
2.  **Highlight & Save**: On any webpage, highlight a block of text.
3.  **Shortcut**: Press `Space` or `Enter`. A success notification ("✓ Đã lưu vào Canifa Note") will appear, confirming your note has been saved to the server.
4.  **Manual Entry**: Click the extension icon in your browser toolbar to open the quick-entry popup.

## 🏗️ Project Structure

```text
extension/
├── public/                 # Static assets (icons, images)
├── src/
│   ├── background/         # Service worker (Token management & API calls)
│   ├── components/         # React UI components (shadcn styled)
│   ├── content/            # Content scripts (Text selection detection)
│   ├── popup/              # Popup UI entry point
│   └── shared/             # Shared utilities & API client
├── manifest.json           # Chrome Extension V3 Manifest
└── vite.config.ts          # Vite build configuration
```

## 🔒 Security

*   The extension requests the minimum required permissions (`activeTab`, `storage`, `scripting`).
*   Tokens are securely extracted locally and transmitted directly to your configured backend.
*   No third-party analytics or tracking are included.

---
*Built for the Canifa AI Ecosystem.*
