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 )
- 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
- 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
Coming soon / Sẽ cập nhật sau
- Clone this repository
git clone https://github.com/tranthangit/NoteCute.git
- Open Google Chrome and navigate to
chrome://extensions/ - Enable Developer mode (toggle in the top-right corner)
- Click "Load unpacked" and select the cloned project folder
- Click the NoteCute icon in the toolbar — the side panel will open with your board!
- Clone repository này
git clone https://github.com/tranthangit/NoteCute.git
- Mở Google Chrome và truy cập
chrome://extensions/ - Bật Chế độ nhà phát triển (công tắc góc trên bên phải)
- Nhấn "Tải tiện ích đã giải nén" và chọn thư mục dự án vừa clone
- Nhấn icon NoteCute trên thanh công cụ — side panel sẽ mở với bảng ghi chú của bạ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
| 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 |
- Service Worker (
background.js) listens for the extension icon click and opens the side panel - Side Panel (
sidepanel.html+popup.js) renders the cork board with all your notes - Content Script (
content-fab.js) injects a floating button on every webpage for quick access - Notes are stored in
chrome.storage.localand persist across browser sessions - Language preference is detected automatically from the browser or set manually in Settings
- Service Worker (
background.js) lắng nghe khi nhấn icon extension và mở side panel - Side Panel (
sidepanel.html+popup.js) hiển thị bảng ghim với tất cả ghi chú - Content Script (
content-fab.js) chèn nút nổi trên mọi trang web để truy cập nhanh - Ghi chú được lưu trong
chrome.storage.localvà không mất khi đóng trình duyệt - 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
- 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)
| 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 |
Contributions are welcome! Feel free to:
- Fork this repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m "Add amazing feature") - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
Mọi đóng góp đều được chào đón! Bạn có thể:
- Fork repository này
- Tạo nhánh tính năng (
git checkout -b feature/tinh-nang-moi) - Commit thay đổi (
git commit -m "Thêm tính năng mới") - Push nhánh lên (
git push origin feature/tinh-nang-moi) - Mở Pull Request
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