Commit 09d2da88 authored by Vũ Hoàng Anh's avatar Vũ Hoàng Anh

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

parent 25b29d27
# 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. ## ✨ Core Features
- **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/`). * **⚡ 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.
## 🚀 Setup * **🔄 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.
```bash * **🏷️ Intelligent Tagging**: Tag notes on the fly with a smart, autocomplete-enabled chip interface.
# Install dependencies
npm install ## 🛠️ Tech Stack
# Build extension * **Framework**: React 18
npm run build * **Build Tool**: Vite (optimized for Chrome Extension V3)
* **Language**: TypeScript
# Development mode (watch) * **Styling**: Vanilla CSS (shadcn/ui token-driven architecture)
npm run dev * **Backend Integration**: Native support for open-source Memos API
```
## 🚀 Installation & Setup
## 📦 Load vào Chrome
### Prerequisites
1. Build extension: `npm run build` * Node.js 18+
2. Mở Chrome: `chrome://extensions` * npm or pnpm
3. Bật "Developer mode"
4. Click "Load unpacked" ### Build Instructions
5. Chọn folder `extension/dist`
1. **Clone the repository:**
## 🎯 Cách dùng ```bash
git clone https://gitlab.hdtex.group/anhvh/canifa_note_extension.git
1. **Bôi đen text** trên web cd canifa_note_extension
2. Extension hiện popup "💾 Save to CuCu Note" ```
3. Click popup → Form hiện
4. Điền tag (ví dụ: "important, article") 2. **Install dependencies:**
5. Click "Save" → Done! Note sẽ được bắn đồng thời về 2 backend. ```bash
npm install
## 🏗️ Structure ```
``` 3. **Build the extension:**
extension/ ```bash
├── src/ npm run build
│ ├── content/ # Content script (detect text selection) ```
│ ├── popup/ # Popup UI (React) *This will compile the TypeScript, bundle the React components, and output the final extension files into the `dist/` directory.*
│ ├── components/ # React components
│ ├── background/ # Service worker (Dual write logic here) ### Load into Chrome
│ └── shared/ # Shared code (API client)
├── manifest.json # Extension config 1. Open Google Chrome and navigate to `chrome://extensions/`.
└── vite.config.ts # Build config 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.
## ⚙️ Config
## 🎯 Usage Guide
### Backend URL
Sửa trong `src/shared/api-client.ts`: 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.
```typescript 2. **Highlight & Save**: On any webpage, highlight a block of text.
const DEFAULT_API_BASE_URL = 'http://160.191.50.138:3001'; // Thay đổi URL backend 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.
const secondaryApiUrl = 'http://172.16.2.210:5230/api/v1/memos'; // Secondary Sync Backend 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.*
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment