docs: update README with extension-specific instructions and Canifa branding

extension/README.md

-# CuCu Note Browser Extension
+# Canifa Note — Browser Extension
 
-Browser extension để lưu note nhanh từ web - chỉ cần bôi đen text và save!
+![Canifa Note Extension](public/canifa-extension.png)
 
-## 🚀 Tính Năng Nổi Bật
+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.
 
-- **Bôi đen & Lưu Nhanh**: Tự động hiện popup khi bôi đen text trên web.
-- **Tự Động Sync Auth**: Tự động lấy Clerk JWT session từ các tab OpenNotion đang mở.
-- **Dual Write Sync**: Tự động lưu note song song về server chính và server tuỳ chỉnh (hiện tại: `http://172.16.2.210:5230/`).
+## ✨ Core Features
 
-## 🚀 Setup
+*   **⚡ 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.
 
-```bash
-# Install dependencies
-npm install
+## 🛠️ Tech Stack
 
-# Build extension
-npm run build
+*   **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
 
-# Development mode (watch)
-npm run dev
-```
+## 🚀 Installation & Setup
 
-## 📦 Load vào Chrome
+### Prerequisites
+*   Node.js 18+
+*   npm or pnpm
 
-1. Build extension: `npm run build`
-2. Mở Chrome: `chrome://extensions`
-3. Bật "Developer mode"
-4. Click "Load unpacked"
-5. Chọn folder `extension/dist`
+### Build Instructions
 
-## 🎯 Cách dùng
+1.  **Clone the repository:**
+    ```bash
+    git clone https://gitlab.hdtex.group/anhvh/canifa_note_extension.git
+    cd canifa_note_extension
+    ```
 
-1. **Bôi đen text** trên web
-2. Extension hiện popup "💾 Save to CuCu Note"
-3. Click popup → Form hiện
-4. Điền tag (ví dụ: "important, article")
-5. Click "Save" → Done! Note sẽ được bắn đồng thời về 2 backend.
+2.  **Install dependencies:**
+    ```bash
+    npm install
+    ```
 
-## 🏗️ Structure
+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/
-│   ├── content/          # Content script (detect text selection)
-│   ├── popup/            # Popup UI (React)
-│   ├── components/       # React components
-│   ├── background/       # Service worker (Dual write logic here)
-│   └── shared/           # Shared code (API client)
-├── manifest.json          # Extension config
-└── vite.config.ts        # Build config
+│   ├── 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
 ```
 
-## ⚙️ Config
+## 🔒 Security
 
-### Backend URL
-Sửa trong `src/shared/api-client.ts`:
-```typescript
-const DEFAULT_API_BASE_URL = 'http://160.191.50.138:3001'; // Thay đổi URL backend
-const secondaryApiUrl = 'http://172.16.2.210:5230/api/v1/memos'; // Secondary Sync Backend
-```
+*   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.*