NoteCute

KO | EN

gitlite — search

#javascript #llm #deep-learning #docker #macos #nodejs #windows #cli #vue #awesome-list #pytorch #security #mcp #ios

(★ 28)

A cute cork-board sticky note Chrome extension (Manifest V3) with drag & drop, 4 note types, bilingual EN/VI support, and Rive animations.

NoteCute Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# 🗒️ NoteCute — Sticky Notes

A cute sticky-note board that lives in your browser's side panel. 
 Bảng ghi chú dễ thương ngay trong side panel trình duyệt của bạn.

DONATE USDT : TJK79vWDTHwSvmpasVCLnWJvtZnTpT5svM ( TRC20 )

---

## ✨ Features | Tính năng

### English

- **Cork Board UI** — A beautiful cork-board interface in the browser side panel
- **4 Note Types** — Text, Focus (todo list), Star (special), and Blank notes
- **Drag & Drop** — Freely drag notes around the board
- **Color Palette** — 8 vibrant color options for every note
- **Minimize / Fullscreen** — Collapse notes into mini cards or expand to fullscreen viewer
- **Trash Zone** — Drag notes into the trash can to delete with a satisfying animation
- **Floating Action Button** — A draggable FAB on every webpage to quickly open the side panel
- **Bilingual (EN/VI)** — Full i18n support for English and Vietnamese
- **Rive Animations** — Fun animated mascot with random speech bubbles
- **Persistent Storage** — All notes saved locally via `chrome.storage`
- **Zero Dependencies** — Pure HTML, CSS & vanilla JavaScript — no build step required

### Tiếng Việt

- **Giao diện bảng ghim** — Giao diện bảng ghim đẹp mắt trong side panel trình duyệt
- **4 loại ghi chú** — Text, Focus (danh sách việc), Star (đặc biệt), và Blank
- **Kéo & thả** — Tự do kéo ghi chú trên bảng
- **Bảng màu** — 8 màu sắc rực rỡ cho mỗi ghi chú
- **Thu nhỏ / Toàn màn hình** — Gấp ghi chú thành thẻ mini hoặc mở rộng toàn màn hình
- **Vùng thùng rác** — Kéo ghi chú vào thùng rác để xóa với hiệu ứng sinh động
- **Nút nổi (FAB)** — Nút kéo được trên mọi trang web để mở nhanh side panel
- **Song ngữ (EN/VI)** — Hỗ trợ đầy đủ tiếng Anh và tiếng Việt
- **Rive Animation** — Linh vật hoạt hình vui nhộn với bong bóng thoại ngẫu nhiên
- **Lưu trữ bền vững** — Tất cả ghi chú được lưu qua `chrome.storage`
- **Không phụ thuộc** — Thuần HTML, CSS & JavaScript — không cần build

---

## 📸 Screenshots | Ảnh chụp màn hình

> _Coming soon / Sẽ cập nhật sau_

---

## 🚀 Installation | Cài đặt

### English

1. **Clone this repository**
   ```bash
   git clone https://github.com/tranthangit/NoteCute.git
   ```
2. Open **Google Chrome** and navigate to `chrome://extensions/`
3. Enable **Developer mode** (toggle in the top-right corner)
4. Click **"Load unpacked"** and select the cloned project folder
5. Click the NoteCute icon in the toolbar — the side panel will open with your board!

### Tiếng Việt

1. **Clone repository này**
   ```bash
   git clone https://github.com/tranthangit/NoteCute.git
   ```
2. Mở **Google Chrome** và truy cập `chrome://extensions/`
3. Bật **Chế độ nhà phát triển** (công tắc góc trên bên phải)
4. Nhấn **"Tải tiện ích đã giải nén"** và chọn thư mục dự án vừa clone
5. Nhấn icon NoteCute trên thanh công cụ — side panel sẽ mở với bảng ghi chú của bạn!

---

## 📁 Project Structure | Cấu trúc dự án

```
NoteCute/
├── manifest.json        # Chrome Extension manifest (MV3)
├── background.js        # Service worker — opens side panel on icon click
├── sidepanel.html       # Main UI — the cork board (side panel)
├── sidepanel.css        # Styles for the side panel
├── popup.html           # Alternative popup layout
├── popup.js             # Core app logic (board, notes, i18n, Rive, settings)
├── popup.css            # Styles for popup
├── content-fab.js       # Content script — floating action button on webpages
├── content.js           # In-page sticky notes logic (experimental)
├── notes.css            # Styles for in-page notes (experimental)
├── rive.js              # Rive runtime (@rive-app/canvas)
├── generate_icons.py    # Python utility to generate extension icons
├── icons/
│   ├── icon16.png       # 16×16 extension icon
│   ├── icon48.png       # 48×48 extension icon
│   ├── icon128.png      # 128×128 extension icon
│   ├── pencil-cursor.svg
│   └── round-to-dino.riv  # Rive animation file
└── README.md
```

---

## 🎨 Note Types | Các loại ghi chú

| Type / Loại | Icon | Description (EN) | Mô tả (VI) |
|---|---|---|---|
| **Text** | 📝 | A simple text note for quick thoughts | Ghi chú văn bản đơn giản |
| **Focus** | 🎯 | A todo list with title and checkable items | Danh sách việc cần làm với checkbox |
| **Star** | ⭐ | A special highlighted note | Ghi chú nổi bật đặc biệt |
| **Blank** | 📋 | An empty canvas note | Ghi chú trống để tự do sáng tạo |

---

## ⚙️ How It Works | Cách hoạt động

### English

1. **Service Worker** (`background.js`) listens for the extension icon click and opens the side panel
2. **Side Panel** (`sidepanel.html` + `popup.js`) renders the cork board with all your notes
3. **Content Script** (`content-fab.js`) injects a floating button on every webpage for quick access
4. Notes are stored in `chrome.storage.local` and persist across browser sessions
5. Language preference is detected automatically from the browser or set manually in Settings

### Tiếng Việt

1. **Service Worker** (`background.js`) lắng nghe khi nhấn icon extension và mở side panel
2. **Side Panel** (`sidepanel.html` + `popup.js`) hiển thị bảng ghim với tất cả ghi chú
3. **Content Script** (`content-fab.js`) chèn nút nổi trên mọi trang web để truy cập nhanh
4. Ghi chú được lưu trong `chrome.storage.local` và không mất khi đóng trình duyệt
5. Ngôn ngữ tự động phát hiện từ trình duyệt hoặc chọn thủ công trong Cài đặt

---

## 🛠️ Tech Stack | Công nghệ

- **Chrome Extension Manifest V3**
- **HTML5 / CSS3 / Vanilla JavaScript** — no frameworks, no build step
- **Rive** — canvas-based animations
- **Chrome APIs** — `chrome.storage`, `chrome.sidePanel`, `chrome.action`
- **Google Fonts** — Nunito (600–900 weight)

---

## 🌐 Permissions | Quyền

| Permission | Purpose (EN) | Mục đích (VI) |
|---|---|---|
| `storage` | Save notes locally | Lưu ghi chú cục bộ |
| `activeTab` | Interact with the current tab | Tương tác với tab hiện tại |
| `sidePanel` | Display the cork board in the side panel | Hiển thị bảng ghim trong side panel |
| `<all_urls>` | Show the floating button on all websites | Hiển thị nút nổi trên mọi trang web |

---

## 🤝 Contributing | Đóng góp

### English

Contributions are welcome! Feel free to:
1. Fork this repository
2. Create a feature branch (`git checkout -b feature/amazing-feature`)
3. Commit your changes (`git commit -m "Add amazing feature"`)
4. Push to the branch (`git push origin feature/amazing-feature`)
5. Open a Pull Request

### Tiếng Việt

Mọi đóng góp đều được chào đón! Bạn có thể:
1. Fork repository này
2. Tạo nhánh tính năng (`git checkout -b feature/tinh-nang-moi`)
3. Commit thay đổi (`git commit -m "Thêm tính năng mới"`)
4. Push nhánh lên (`git push origin feature/tinh-nang-moi`)
5. Mở Pull Request

---

## 📄 License | Giấy phép

This project is licensed under the **MIT License**.

Dự án này được cấp phép theo **Giấy phép MIT**.

---

Made with 💖 by tranthangit

NoteCute

NoteCute Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

NoteCute

NoteCute Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README