MothNote, tiện ích mở rộng tab mới của Google Chrome kết hợp hệ thống ghi chú dựa trên thư mục với widget đồng hồ, thời tiết và lịch trong một dashboard all-in-one

lunamoth · 2025-09-01T16:42:57+09:00

🦋 MothNote Ảnh chụp màn hình trang chi tiết ghi chú của MothNote Ảnh chụp màn hình trang chi tiết thời tiết của MothNote Bài viết giới thiệu MothNote trên blog lunamoth 4th MothNote GitHub (Có vẻ GeekNews không hỗ trợ hiển thị ảnh nên mình để dưới dạng liên kết.) MothNote là tiện ích mở rộng tab mới của Google Chrome dạng dashboard all-in-one, kết hợp hệ thống ghi chú dựa trên thư mục với các widget đồng hồ, thời tiết và lịch. Quá trình phát triển Với MothNote, bạn có thể nhanh chóng viết ghi chú ngay trên tab mới của Google Chrome, đồng thời xem nhanh đồng hồ/lịch/thời tiết/nhiệt độ. Sau khi tạo tiện ích mở rộng LunaTools với 15 tính năng, tôi chợt nghĩ hay là thử làm một tiện ích mở rộng tab mới, và đã bắt đầu từ đó. Tôi không phải là lập trình viên và cũng hoàn toàn không biết lập trình, nhưng đã bắt đầu làm từ ngày 2025-07-25 bằng Google AI Studio (web) với Google Gemini 2.5 Pro, phát triển khoảng 38 ngày và phát hành vào 2025-09-01. Số dòng mã, không tính thư viện bên ngoài, là 7.385 dòng. Vì tab mới là nơi được nhìn thấy nhiều nhất, tôi nghĩ nếu có thể viết ghi chú ngay ở đó thì sẽ rất tiện, nên trước tiên đã bắt đầu tạo một ứng dụng ghi chú với cấu trúc 3 cột như thường thấy ở nhiều công cụ quản lý dự án. Tôi cũng thêm hỗ trợ theme Solarized Light/Dark, lấy ý tưởng từ tiện ích Tabliss để bổ sung đồng hồ số, đồng hồ kim, thời tiết, nhiệt độ, và thêm cả lịch để có thể dùng như nhật ký. Tôi cũng thêm focus mode và zen mode, những chế độ thường thấy ở các ứng dụng viết lách. Ứng dụng cũng hỗ trợ thiết lập bố cục, thiết lập phông chữ trình soạn thảo, thiết lập thành phố thời tiết, cũng như sao lưu/khôi phục dữ liệu. Trong quá trình làm, tôi từng hỗ trợ đồng bộ nhiều tab, rồi hiểu ra thế nào là over-engineering và đã rollback lại. Tôi cũng nhớ là trong quá trình tự triển khai hỗ trợ đó đã biết thêm cả khái niệm “atomic operation”. Tôi nghĩ sẽ hay nếu kết hợp cả trang chi tiết thời tiết mà trước đây mình từng làm, nên đã đưa vào. Ban đầu tôi định không hỗ trợ Markdown, nhưng sau khi biết cách dùng thư viện ngoài thì đã hỗ trợ chế độ xem Markdown. (Ban đầu dùng Snakdown, sau đó đổi sang Marked) Mặc định các thư mục có thêm PARA và các thư mục được Bullet Journal khuyến nghị. Có lẽ cũng có thể sử dụng theo kiểu Todo.txt. Trước đây tôi từng dùng Simplenote, và nghĩ rằng có thể di chuyển dữ liệu được, nên cũng thêm chức năng migration dữ liệu từ file backup JSON của Simplenote. Vài ngày trước tôi còn biết đến quyền unlimitedStorage, cho phép dùng không giới hạn thay vì bị giới hạn 10MB của local storage, và đã áp dụng luôn. Trong quá trình phát triển, tôi cũng nảy ra các ý tưởng như tag, thư mục nhiều cấp, trình soạn thảo WYSIWYG, liên kết kiểu wiki, checkbox việc cần làm, tính năng lưu bài bằng Readability.js, tích hợp Google Drive, v.v. Về sau tôi dự định sẽ ưu tiên cập nhật các tính năng thực sự có ý nghĩa. Sau một quá trình khá dài sửa lỗi, tôi thấy nó đã trở nên khá dùng được nên quyết định phát hành. Có lẽ mọi người cũng sẽ thấy nó khá ổn để dùng. Mong mọi người dùng thử rồi góp ý cải thiện tính năng hoặc báo lỗi giúp. (Nếu trả lời qua Bluesky, Twitter hoặc Threads thì mình sẽ rất cảm ơn.) Tính năng chính (Mô tả tính năng dưới đây do Gemini 2.5 Pro viết sau khi phân tích mã nguồn của MothNote.) Dashboard all-in-one: Xem mọi thông tin cần thiết ngay trong tab mới. Đồng hồ: Cung cấp đồng hồ kim với thiết kế đẹp mắt và đồng hồ số có độ dễ đọc cao. Thông tin thời tiết chi tiết: Chỉ với một cú nhấp vào widget trên dashboard, bạn có thể khám phá thời tiết ở mức chuyên sâu. Dự báo theo tuần: Ở trang riêng, bạn có thể nắm bắt nhanh biến động nhiệt độ cao nhất/thấp nhất trong tuần bằng biểu đồ trực quan, đồng thời có thêm hiệu ứng nền mưa hoặc tuyết đẹp mắt tùy theo thời tiết hiện tại. Thông tin chi tiết theo giờ: Khi nhấp vào thẻ dự báo của một ngày cụ thể, ứng dụng sẽ hiển thị nhiệt độ theo giờ, diễn biến thời tiết và xác suất mưa bằng danh sách chi tiết cùng biểu đồ. Thiết lập vị trí: Không chỉ tìm theo tên thành phố, bạn còn có thể nhập trực tiếp vĩ độ và kinh độ để đặt thời tiết cho bất kỳ khu vực nào trên thế giới. Lịch liên kết với ghi chú: Các ngày có ghi chú sẽ được gạch chân; khi di chuột lên ngày, bạn có thể xem trước tiêu đề ghi chú, và khi nhấp vào sẽ lập tức xem được toàn bộ ghi chú của ngày đó. Hệ thống ghi chú mạnh mẽ: Sắp xếp ý tưởng một cách có hệ thống theo thư mục và quản lý ghi chú hiệu quả qua giao diện 3 panel. Hỗ trợ Markdown: Viết ghi chú có định dạng bằng các cú pháp đơn giản như #, *, **, và chỉ với một nút bấm có thể chuyển sang chế độ xem trước được render gọn gàng. Trình soạn thảo tối ưu cho năng suất: Ở phía dưới trình soạn thảo, bạn có thể theo dõi theo thời gian thực các thông tin chi tiết như số ký tự/số từ/số dòng, ngày tạo/ngày sửa, đồng thời dùng phím Tab để thụt vào/thụt ra. Tự động lưu và lưu thủ công: Nội dung đang viết sẽ được tự động lưu khi bạn ngừng gõ, và bạn cũng có thể lưu thủ công ngay lập tức bằng phím tắt Ctrl+S (Mac: Cmd+S). Tính năng tiện lợi: Nếu để trống tiêu đề, dòng đầu tiên của nội dung sẽ tự động trở thành tiêu đề. Mức độ tùy biến và tiện dụng cao: Hỗ trợ nhiều tính năng khác nhau để tối đa hóa năng suất. Thiết lập người dùng: Có thể thay đổi giao diện ứng dụng theo sở thích như theme sáng/tối, phông chữ/kích thước của trình soạn thảo, và cũng có thể đặt lại toàn bộ thiết lập. UI động: Không chỉ qua menu thiết lập, bạn còn có thể trực quan điều chỉnh độ rộng panel và zen mode bằng kéo thả chuột. Quản lý ghi chú nâng cao: Cung cấp các tính năng tìm kiếm ghi chú (bao gồm tô sáng từ khóa), sắp xếp, ghim ghi chú quan trọng và đánh dấu yêu thích. Di chuyển trực quan: Có thể đổi thứ tự thư mục hoặc dễ dàng chuyển ghi chú sang thư mục khác bằng drag and drop. (Có thể kéo ghi chú vào thư mục thùng rác/yêu thích để xóa hoặc thêm ngay lập tức) Zen Mode để tập trung: Cung cấp môi trường ẩn toàn bộ yếu tố xung quanh để bạn chỉ tập trung vào việc viết ghi chú. Thùng rác và khôi phục: Mục đã xóa sẽ được chuyển vào thùng rác, và khi khôi phục, ứng dụng có thể tự động phát hiện và xử lý xung đột tên để khôi phục an toàn. Sao lưu và khôi phục dữ liệu: Toàn bộ dữ liệu có thể được sao lưu và khôi phục an toàn bằng một file JSON duy nhất. Hỗ trợ nhập file backup Simplenote (JSON), đồng thời thêm an toàn vào thư mục mới mà vẫn giữ nguyên dữ liệu hiện có. Phím tắt bàn phím: Có thể thực hiện nhanh nhiều thao tác chỉ bằng bàn phím như tạo thư mục/ghi chú mới, đổi tên, điều hướng danh sách, v.v. Tính ổn định và độ tin cậy của dữ liệu: Bảo vệ an toàn dữ liệu quý giá của người dùng. Dữ liệu được lưu trong local storage của trình duyệt web. Cảnh báo tránh mất dữ liệu: Nếu bạn cố đóng trang khi còn thay đổi chưa được lưu, ứng dụng sẽ hiện cảnh báo để ngăn mất dữ liệu. Tính năng khôi phục khẩn cấp: Nếu trình duyệt bị đóng bất thường, thay đổi cuối cùng chưa được lưu sẽ được sao lưu tạm thời và ở lần chạy tiếp theo ứng dụng sẽ hỏi có muốn khôi phục hay không. Kiểm tra dữ liệu tự động: Khi ứng dụng khởi chạy, nó sẽ kiểm tra tính toàn vẹn dữ liệu và nếu phát hiện vấn đề thì tự động khôi phục để duy trì sự ổn định. Cách cài đặt Tại trang GitHub, vào mục release để tải file phát hành mới nhất rồi giải nén. Trong thanh địa chỉ của trình duyệt Chrome, nhập chrome://extensions để vào trang quản lý, sau đó bật Developer mode. Nhấp vào nút tải tiện ích đã giải nén, rồi chọn thư mục đã giải nén ở bước 1 là cài đặt hoàn tất. Bạn cũng có thể kéo thả thư mục đó vào trang quản lý tiện ích mở rộng. (Lưu ý là không được xóa thư mục đó.) Lịch sử cập nhật 2025-09-01 4:15 chiều // phát hành 17.58, bản phát hành đầu tiên

(github.com/lunamoth)

5 điểm bởi lunamoth 2025-09-01 | 3 bình luận | Chia sẻ qua WhatsApp

🦋 MothNote

(Có vẻ GeekNews không hỗ trợ hiển thị ảnh nên mình để dưới dạng liên kết.)

MothNote là tiện ích mở rộng tab mới của Google Chrome dạng dashboard all-in-one, kết hợp hệ thống ghi chú dựa trên thư mục với các widget đồng hồ, thời tiết và lịch.

Quá trình phát triển

Với MothNote, bạn có thể nhanh chóng viết ghi chú ngay trên tab mới của Google Chrome, đồng thời xem nhanh đồng hồ/lịch/thời tiết/nhiệt độ. Sau khi tạo tiện ích mở rộng LunaTools với 15 tính năng, tôi chợt nghĩ hay là thử làm một tiện ích mở rộng tab mới, và đã bắt đầu từ đó.

Tôi không phải là lập trình viên và cũng hoàn toàn không biết lập trình, nhưng đã bắt đầu làm từ ngày 2025-07-25 bằng Google AI Studio (web) với Google Gemini 2.5 Pro, phát triển khoảng 38 ngày và phát hành vào 2025-09-01. Số dòng mã, không tính thư viện bên ngoài, là 7.385 dòng.

Vì tab mới là nơi được nhìn thấy nhiều nhất, tôi nghĩ nếu có thể viết ghi chú ngay ở đó thì sẽ rất tiện, nên trước tiên đã bắt đầu tạo một ứng dụng ghi chú với cấu trúc 3 cột như thường thấy ở nhiều công cụ quản lý dự án. Tôi cũng thêm hỗ trợ theme Solarized Light/Dark, lấy ý tưởng từ tiện ích Tabliss để bổ sung đồng hồ số, đồng hồ kim, thời tiết, nhiệt độ, và thêm cả lịch để có thể dùng như nhật ký.

Tôi cũng thêm focus mode và zen mode, những chế độ thường thấy ở các ứng dụng viết lách. Ứng dụng cũng hỗ trợ thiết lập bố cục, thiết lập phông chữ trình soạn thảo, thiết lập thành phố thời tiết, cũng như sao lưu/khôi phục dữ liệu.

Trong quá trình làm, tôi từng hỗ trợ đồng bộ nhiều tab, rồi hiểu ra thế nào là over-engineering và đã rollback lại. Tôi cũng nhớ là trong quá trình tự triển khai hỗ trợ đó đã biết thêm cả khái niệm “atomic operation”.

Tôi nghĩ sẽ hay nếu kết hợp cả trang chi tiết thời tiết mà trước đây mình từng làm, nên đã đưa vào. Ban đầu tôi định không hỗ trợ Markdown, nhưng sau khi biết cách dùng thư viện ngoài thì đã hỗ trợ chế độ xem Markdown. (Ban đầu dùng Snakdown, sau đó đổi sang Marked)

Mặc định các thư mục có thêm PARA và các thư mục được Bullet Journal khuyến nghị. Có lẽ cũng có thể sử dụng theo kiểu Todo.txt.

Trước đây tôi từng dùng Simplenote, và nghĩ rằng có thể di chuyển dữ liệu được, nên cũng thêm chức năng migration dữ liệu từ file backup JSON của Simplenote. Vài ngày trước tôi còn biết đến quyền unlimitedStorage, cho phép dùng không giới hạn thay vì bị giới hạn 10MB của local storage, và đã áp dụng luôn.

Trong quá trình phát triển, tôi cũng nảy ra các ý tưởng như tag, thư mục nhiều cấp, trình soạn thảo WYSIWYG, liên kết kiểu wiki, checkbox việc cần làm, tính năng lưu bài bằng Readability.js, tích hợp Google Drive, v.v. Về sau tôi dự định sẽ ưu tiên cập nhật các tính năng thực sự có ý nghĩa.

Sau một quá trình khá dài sửa lỗi, tôi thấy nó đã trở nên khá dùng được nên quyết định phát hành. Có lẽ mọi người cũng sẽ thấy nó khá ổn để dùng. Mong mọi người dùng thử rồi góp ý cải thiện tính năng hoặc báo lỗi giúp. (Nếu trả lời qua Bluesky, Twitter hoặc Threads thì mình sẽ rất cảm ơn.)

Tính năng chính

(Mô tả tính năng dưới đây do Gemini 2.5 Pro viết sau khi phân tích mã nguồn của MothNote.)

Dashboard all-in-one: Xem mọi thông tin cần thiết ngay trong tab mới.
- Đồng hồ: Cung cấp đồng hồ kim với thiết kế đẹp mắt và đồng hồ số có độ dễ đọc cao.
- Thông tin thời tiết chi tiết: Chỉ với một cú nhấp vào widget trên dashboard, bạn có thể khám phá thời tiết ở mức chuyên sâu.
  - Dự báo theo tuần: Ở trang riêng, bạn có thể nắm bắt nhanh biến động nhiệt độ cao nhất/thấp nhất trong tuần bằng biểu đồ trực quan, đồng thời có thêm hiệu ứng nền mưa hoặc tuyết đẹp mắt tùy theo thời tiết hiện tại.
  - Thông tin chi tiết theo giờ: Khi nhấp vào thẻ dự báo của một ngày cụ thể, ứng dụng sẽ hiển thị nhiệt độ theo giờ, diễn biến thời tiết và xác suất mưa bằng danh sách chi tiết cùng biểu đồ.
  - Thiết lập vị trí: Không chỉ tìm theo tên thành phố, bạn còn có thể nhập trực tiếp vĩ độ và kinh độ để đặt thời tiết cho bất kỳ khu vực nào trên thế giới.
- Lịch liên kết với ghi chú: Các ngày có ghi chú sẽ được gạch chân; khi di chuột lên ngày, bạn có thể xem trước tiêu đề ghi chú, và khi nhấp vào sẽ lập tức xem được toàn bộ ghi chú của ngày đó.
Hệ thống ghi chú mạnh mẽ: Sắp xếp ý tưởng một cách có hệ thống theo thư mục và quản lý ghi chú hiệu quả qua giao diện 3 panel.
- Hỗ trợ Markdown: Viết ghi chú có định dạng bằng các cú pháp đơn giản như #, *, **, và chỉ với một nút bấm có thể chuyển sang chế độ xem trước được render gọn gàng.
- Trình soạn thảo tối ưu cho năng suất: Ở phía dưới trình soạn thảo, bạn có thể theo dõi theo thời gian thực các thông tin chi tiết như số ký tự/số từ/số dòng, ngày tạo/ngày sửa, đồng thời dùng phím Tab để thụt vào/thụt ra.
- Tự động lưu và lưu thủ công: Nội dung đang viết sẽ được tự động lưu khi bạn ngừng gõ, và bạn cũng có thể lưu thủ công ngay lập tức bằng phím tắt Ctrl+S (Mac: Cmd+S).
- Tính năng tiện lợi: Nếu để trống tiêu đề, dòng đầu tiên của nội dung sẽ tự động trở thành tiêu đề.
Mức độ tùy biến và tiện dụng cao: Hỗ trợ nhiều tính năng khác nhau để tối đa hóa năng suất.
- Thiết lập người dùng: Có thể thay đổi giao diện ứng dụng theo sở thích như theme sáng/tối, phông chữ/kích thước của trình soạn thảo, và cũng có thể đặt lại toàn bộ thiết lập.
- UI động: Không chỉ qua menu thiết lập, bạn còn có thể trực quan điều chỉnh độ rộng panel và zen mode bằng kéo thả chuột.
- Quản lý ghi chú nâng cao: Cung cấp các tính năng tìm kiếm ghi chú (bao gồm tô sáng từ khóa), sắp xếp, ghim ghi chú quan trọng và đánh dấu yêu thích.
- Di chuyển trực quan: Có thể đổi thứ tự thư mục hoặc dễ dàng chuyển ghi chú sang thư mục khác bằng drag and drop. (Có thể kéo ghi chú vào thư mục thùng rác/yêu thích để xóa hoặc thêm ngay lập tức)
- Zen Mode để tập trung: Cung cấp môi trường ẩn toàn bộ yếu tố xung quanh để bạn chỉ tập trung vào việc viết ghi chú.
- Thùng rác và khôi phục: Mục đã xóa sẽ được chuyển vào thùng rác, và khi khôi phục, ứng dụng có thể tự động phát hiện và xử lý xung đột tên để khôi phục an toàn.
- Sao lưu và khôi phục dữ liệu: Toàn bộ dữ liệu có thể được sao lưu và khôi phục an toàn bằng một file JSON duy nhất. Hỗ trợ nhập file backup Simplenote (JSON), đồng thời thêm an toàn vào thư mục mới mà vẫn giữ nguyên dữ liệu hiện có.
- Phím tắt bàn phím: Có thể thực hiện nhanh nhiều thao tác chỉ bằng bàn phím như tạo thư mục/ghi chú mới, đổi tên, điều hướng danh sách, v.v.
Tính ổn định và độ tin cậy của dữ liệu: Bảo vệ an toàn dữ liệu quý giá của người dùng.
- Dữ liệu được lưu trong local storage của trình duyệt web.
- Cảnh báo tránh mất dữ liệu: Nếu bạn cố đóng trang khi còn thay đổi chưa được lưu, ứng dụng sẽ hiện cảnh báo để ngăn mất dữ liệu.
- Tính năng khôi phục khẩn cấp: Nếu trình duyệt bị đóng bất thường, thay đổi cuối cùng chưa được lưu sẽ được sao lưu tạm thời và ở lần chạy tiếp theo ứng dụng sẽ hỏi có muốn khôi phục hay không.
- Kiểm tra dữ liệu tự động: Khi ứng dụng khởi chạy, nó sẽ kiểm tra tính toàn vẹn dữ liệu và nếu phát hiện vấn đề thì tự động khôi phục để duy trì sự ổn định.

Cách cài đặt

Tại trang GitHub, vào mục release để tải file phát hành mới nhất rồi giải nén.
Trong thanh địa chỉ của trình duyệt Chrome, nhập chrome://extensions để vào trang quản lý, sau đó bật Developer mode.
Nhấp vào nút tải tiện ích đã giải nén, rồi chọn thư mục đã giải nén ở bước 1 là cài đặt hoàn tất. Bạn cũng có thể kéo thả thư mục đó vào trang quản lý tiện ích mở rộng. (Lưu ý là không được xóa thư mục đó.)

Lịch sử cập nhật

2025-09-01 4:15 chiều // phát hành 17.58, bản phát hành đầu tiên

3 bình luận

lunamoth 2025-09-01

À, URL liên kết ảnh chụp màn hình đầu tiên bị gõ nhầm rồi;

https://raw.githubusercontent.com/lunamoth/MothNote/…

là link này.

xguru 2025-09-01

Đã chỉnh sửa.