MothNote, ekstensi tab baru Google Chrome berupa dashboard all-in-one yang menambahkan widget jam, cuaca, dan kalender ke sistem catatan berbasis folder

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

🦋 MothNote Tangkapan layar halaman detail catatan MothNote Tangkapan layar halaman detail cuaca MothNote Tulisan pengenalan MothNote di blog lunamoth 4th MothNote GitHub (Sepertinya GeekNews tidak mendukung tampilan gambar, jadi saya lampirkan sebagai tautan.) MothNote adalah ekstensi tab baru Google Chrome berupa dashboard all-in-one yang menambahkan widget jam, cuaca, dan kalender ke sistem catatan berbasis folder. Proses pengembangan Di MothNote, Anda bisa langsung menulis catatan dengan cepat dari tab baru Google Chrome, sekaligus melihat jam/kalender/cuaca/suhu dengan cepat. Setelah sebelumnya membuat ekstensi LunaTools yang memiliki 15 fitur, saya sempat terpikir bagaimana kalau mencoba membuat ekstensi tab baru, lalu mulai membuatnya. Saya bukan developer dan juga sama sekali tidak mengerti pemrograman, tetapi saya mulai membuatnya pada 25 Juli 2025 menggunakan Google AI Studio (web) dengan Google Gemini 2.5 Pro, mengembangkannya sekitar 38 hari, dan merilisnya pada 1 September 2025. Jumlah baris kode, di luar library eksternal, adalah 7.385 baris. Karena rasanya akan nyaman jika bisa menulis catatan langsung dari tab baru yang paling sering dilihat, saya terlebih dahulu mulai membuat aplikasi catatan dengan struktur 3 kolom seperti yang sering terlihat di banyak alat manajemen proyek. Saya menambahkan dukungan tema Solarized Light/Dark, lalu terinspirasi dari ekstensi Tabliss untuk menambahkan jam digital, jam analog, cuaca, suhu, dan juga kalender agar bisa dimanfaatkan sebagai buku harian. Saya juga menambahkan mode fokus dan mode zen yang sering diimplementasikan di aplikasi menulis. Selain itu, saya mendukung pengaturan tata letak, pengaturan font editor, pengaturan kota cuaca, serta fitur pencadangan/pemulihan data. Di tengah jalan, saya sempat mendukung fitur sinkronisasi multi-tab, lalu memahami apa itu over-engineering dan akhirnya me-roll back-nya. Saya juga ingat baru mengetahui istilah "operasi atomik" saat membuat dan mendukungnya. Saya merasa akan bagus jika halaman detail cuaca yang sebelumnya pernah saya buat juga digabungkan, jadi saya menambahkannya. Awalnya saya tidak berniat mendukung Markdown, tetapi setelah mengetahui cara menggunakan library eksternal, saya pun menambahkan mode tampilan Markdown. (Sempat memakai Snakdown, lalu diganti ke Marked) Sebagai folder bawaan, saya memasukkan PARA serta folder yang direkomendasikan dalam bullet note. Sepertinya juga bisa dimanfaatkan dengan gaya Todo.txt. Saya sebelumnya menggunakan Simplenote, dan karena tampaknya migrasi data juga memungkinkan, saya menambahkan fitur migrasi data dari file cadangan JSON Simplenote. Beberapa hari lalu saya juga mengetahui izin unlimitedStorage, yang memungkinkan penggunaan tanpa batas alih-alih batas local storage 10MB, lalu menerapkannya. Beberapa ide yang muncul selama proses pengembangan antara lain tag, folder bertingkat, editor WYSIWYG, penerapan tautan gaya wiki, centang tugas, fitur scrap isi artikel dengan Readability.js, integrasi Google Drive, dan sebagainya. Ke depannya saya berencana melakukan pembaruan dengan fokus pada fitur yang benar-benar bermakna. Karena setelah melalui proses perbaikan bug yang cukup panjang rasanya aplikasi ini sudah lumayan layak dipakai, saya putuskan untuk merilisnya. Sepertinya cukup berguna untuk digunakan. Silakan coba, dan saya harap ada masukan peningkatan fitur maupun laporan bug. (Saya akan berterima kasih jika Anda membalas lewat Bluesky, Twitter, atau Threads.) Fitur utama (Penjelasan fitur di bawah ini ditulis oleh Gemini 2.5 Pro berdasarkan analisis kode sumber MothNote.) Dashboard all-in-one: Lihat semua informasi yang Anda butuhkan dalam sekali pandang dari tab baru. Jam: Menyediakan jam analog dengan desain indah dan jam digital dengan keterbacaan tinggi. Informasi cuaca detail: Jadilah ahli cuaca hanya dengan satu klik pada widget dashboard. Prakiraan mingguan: Di halaman khusus, Anda dapat melihat perubahan suhu tertinggi/terendah mingguan sekaligus dengan grafik visual, dan juga mendapatkan efek latar belakang indah berupa hujan atau salju sesuai cuaca saat ini. Informasi detail per jam: Saat mengklik kartu prakiraan untuk tanggal tertentu, tersedia daftar dan grafik detail suhu per jam, perubahan cuaca, serta peluang presipitasi pada hari tersebut. Pengaturan lokasi: Selain mencari nama kota, Anda juga bisa langsung memasukkan lintang dan bujur untuk mengatur cuaca lokasi mana pun di seluruh dunia. Kalender terhubung ke catatan: Tanggal yang memiliki catatan akan ditandai garis bawah, dan saat kursor diarahkan ke tanggal tersebut Anda bisa melihat pratinjau judul catatan, lalu dengan klik Anda bisa langsung mengumpulkan semua catatan pada tanggal itu. Sistem catatan yang kuat: Atur pikiran Anda secara sistematis berbasis folder, dan kelola catatan secara efisien melalui UI panel 3 kolom. Dukungan Markdown: Tulis catatan berformat dengan sintaks sederhana seperti #, *, **, lalu beralih ke pratinjau yang dirender rapi hanya dengan sekali klik tombol. Editor berproduktivitas tinggi: Di bagian bawah editor, Anda bisa melihat informasi detail seperti jumlah karakter/kata/baris, tanggal dibuat/diubah secara real time, dan menggunakan tombol Tab untuk indent/outdent. Simpan otomatis dan simpan manual: Isi tulisan akan tersimpan otomatis saat Anda berhenti mengetik, dan Anda juga bisa langsung menyimpan secara manual kapan pun dengan pintasan Ctrl+S (Mac: Cmd+S). Fitur praktis: Jika judul dibiarkan kosong, baris pertama isi akan otomatis menjadi judul. Kebebasan dan kenyamanan pengguna yang tinggi: Mendukung beragam fitur untuk memaksimalkan produktivitas. Pengaturan pengguna: Ubah tampilan aplikasi sesuai selera, seperti tema terang/gelap serta font/ukuran editor, dan reset semua pengaturan. UI dinamis: Bukan hanya lewat menu pengaturan, lebar panel dan mode zen juga bisa diatur secara intuitif dengan drag mouse. Manajemen catatan tingkat lanjut: Menyediakan pencarian catatan (termasuk highlight kata kunci), pengurutan, serta fitur pin dan favorit untuk catatan penting. Perpindahan intuitif: Dengan drag and drop, Anda bisa mengubah urutan folder atau memindahkan catatan ke folder lain dengan mudah. (Catatan juga bisa langsung dihapus/ditambahkan dengan menyeretnya ke folder sampah/favorit) Zen Mode untuk fokus: Menyediakan lingkungan yang menyembunyikan semua elemen sekitar agar Anda bisa fokus hanya pada penulisan catatan. Sampah dan pemulihan: Item yang dihapus dipindahkan ke sampah, dan saat dipulihkan, aplikasi dapat memulihkannya dengan aman, termasuk mendeteksi dan menyelesaikan konflik nama secara otomatis. Pencadangan dan pemulihan data: Cadangkan dan pulihkan semua data dengan aman ke/dari satu file JSON. Mendukung impor file cadangan Simplenote (JSON), dan menambahkannya dengan aman ke folder baru tanpa merusak data yang sudah ada. Pintasan keyboard: Berbagai tugas seperti membuat folder/catatan baru, mengganti nama, dan menavigasi daftar dapat dilakukan dengan cepat hanya menggunakan keyboard. Stabilitas dan keandalan data: Melindungi data penting pengguna dengan aman. Data disimpan di local storage peramban web. Peringatan pencegahan kehilangan: Jika Anda mencoba menutup halaman saat masih ada perubahan yang belum disimpan, akan muncul jendela peringatan untuk mencegah kehilangan data. Fitur pemulihan darurat: Jika browser tertutup secara tidak normal, perubahan terakhir yang belum disimpan akan dicadangkan sementara dan saat dijalankan berikutnya Anda akan ditanya apakah ingin memulihkannya. Pemeriksaan data otomatis: Saat aplikasi dijalankan, integritas data diperiksa dan bila ditemukan masalah akan otomatis dipulihkan untuk menjaga stabilitas. Cara instalasi Dari halaman GitHub, unduh file rilis terbaru di bagian Releases lalu ekstrak. Di bilah alamat browser Chrome, masukkan chrome://extensions untuk membuka halaman manajemen, lalu aktifkan Developer mode. Klik tombol muat ekstensi yang telah diekstrak, lalu pilih folder yang diekstrak pada langkah 1 untuk menyelesaikan instalasi. Anda juga bisa drag-and-drop folder tersebut ke halaman manajemen ekstensi. (Sebagai catatan, folder tersebut tidak boleh dihapus.) Riwayat pembaruan 2025-09-01 4:15 PM // Rilis 17.58, rilis pertama

(github.com/lunamoth)

5 poin oleh lunamoth 2025-09-01 | 3 komentar | Bagikan ke WhatsApp

🦋 MothNote

(Sepertinya GeekNews tidak mendukung tampilan gambar, jadi saya lampirkan sebagai tautan.)

MothNote adalah ekstensi tab baru Google Chrome berupa dashboard all-in-one yang menambahkan widget jam, cuaca, dan kalender ke sistem catatan berbasis folder.

Proses pengembangan

Di MothNote, Anda bisa langsung menulis catatan dengan cepat dari tab baru Google Chrome, sekaligus melihat jam/kalender/cuaca/suhu dengan cepat. Setelah sebelumnya membuat ekstensi LunaTools yang memiliki 15 fitur, saya sempat terpikir bagaimana kalau mencoba membuat ekstensi tab baru, lalu mulai membuatnya.

Saya bukan developer dan juga sama sekali tidak mengerti pemrograman, tetapi saya mulai membuatnya pada 25 Juli 2025 menggunakan Google AI Studio (web) dengan Google Gemini 2.5 Pro, mengembangkannya sekitar 38 hari, dan merilisnya pada 1 September 2025. Jumlah baris kode, di luar library eksternal, adalah 7.385 baris.

Karena rasanya akan nyaman jika bisa menulis catatan langsung dari tab baru yang paling sering dilihat, saya terlebih dahulu mulai membuat aplikasi catatan dengan struktur 3 kolom seperti yang sering terlihat di banyak alat manajemen proyek. Saya menambahkan dukungan tema Solarized Light/Dark, lalu terinspirasi dari ekstensi Tabliss untuk menambahkan jam digital, jam analog, cuaca, suhu, dan juga kalender agar bisa dimanfaatkan sebagai buku harian.

Saya juga menambahkan mode fokus dan mode zen yang sering diimplementasikan di aplikasi menulis. Selain itu, saya mendukung pengaturan tata letak, pengaturan font editor, pengaturan kota cuaca, serta fitur pencadangan/pemulihan data.

Di tengah jalan, saya sempat mendukung fitur sinkronisasi multi-tab, lalu memahami apa itu over-engineering dan akhirnya me-roll back-nya. Saya juga ingat baru mengetahui istilah "operasi atomik" saat membuat dan mendukungnya.

Saya merasa akan bagus jika halaman detail cuaca yang sebelumnya pernah saya buat juga digabungkan, jadi saya menambahkannya. Awalnya saya tidak berniat mendukung Markdown, tetapi setelah mengetahui cara menggunakan library eksternal, saya pun menambahkan mode tampilan Markdown. (Sempat memakai Snakdown, lalu diganti ke Marked)

Sebagai folder bawaan, saya memasukkan PARA serta folder yang direkomendasikan dalam bullet note. Sepertinya juga bisa dimanfaatkan dengan gaya Todo.txt.

Saya sebelumnya menggunakan Simplenote, dan karena tampaknya migrasi data juga memungkinkan, saya menambahkan fitur migrasi data dari file cadangan JSON Simplenote. Beberapa hari lalu saya juga mengetahui izin unlimitedStorage, yang memungkinkan penggunaan tanpa batas alih-alih batas local storage 10MB, lalu menerapkannya.

Beberapa ide yang muncul selama proses pengembangan antara lain tag, folder bertingkat, editor WYSIWYG, penerapan tautan gaya wiki, centang tugas, fitur scrap isi artikel dengan Readability.js, integrasi Google Drive, dan sebagainya. Ke depannya saya berencana melakukan pembaruan dengan fokus pada fitur yang benar-benar bermakna.

Karena setelah melalui proses perbaikan bug yang cukup panjang rasanya aplikasi ini sudah lumayan layak dipakai, saya putuskan untuk merilisnya. Sepertinya cukup berguna untuk digunakan. Silakan coba, dan saya harap ada masukan peningkatan fitur maupun laporan bug. (Saya akan berterima kasih jika Anda membalas lewat Bluesky, Twitter, atau Threads.)

Fitur utama

(Penjelasan fitur di bawah ini ditulis oleh Gemini 2.5 Pro berdasarkan analisis kode sumber MothNote.)

Dashboard all-in-one: Lihat semua informasi yang Anda butuhkan dalam sekali pandang dari tab baru.
- Jam: Menyediakan jam analog dengan desain indah dan jam digital dengan keterbacaan tinggi.
- Informasi cuaca detail: Jadilah ahli cuaca hanya dengan satu klik pada widget dashboard.
  - Prakiraan mingguan: Di halaman khusus, Anda dapat melihat perubahan suhu tertinggi/terendah mingguan sekaligus dengan grafik visual, dan juga mendapatkan efek latar belakang indah berupa hujan atau salju sesuai cuaca saat ini.
  - Informasi detail per jam: Saat mengklik kartu prakiraan untuk tanggal tertentu, tersedia daftar dan grafik detail suhu per jam, perubahan cuaca, serta peluang presipitasi pada hari tersebut.
  - Pengaturan lokasi: Selain mencari nama kota, Anda juga bisa langsung memasukkan lintang dan bujur untuk mengatur cuaca lokasi mana pun di seluruh dunia.
- Kalender terhubung ke catatan: Tanggal yang memiliki catatan akan ditandai garis bawah, dan saat kursor diarahkan ke tanggal tersebut Anda bisa melihat pratinjau judul catatan, lalu dengan klik Anda bisa langsung mengumpulkan semua catatan pada tanggal itu.
Sistem catatan yang kuat: Atur pikiran Anda secara sistematis berbasis folder, dan kelola catatan secara efisien melalui UI panel 3 kolom.
- Dukungan Markdown: Tulis catatan berformat dengan sintaks sederhana seperti #, *, **, lalu beralih ke pratinjau yang dirender rapi hanya dengan sekali klik tombol.
- Editor berproduktivitas tinggi: Di bagian bawah editor, Anda bisa melihat informasi detail seperti jumlah karakter/kata/baris, tanggal dibuat/diubah secara real time, dan menggunakan tombol Tab untuk indent/outdent.
- Simpan otomatis dan simpan manual: Isi tulisan akan tersimpan otomatis saat Anda berhenti mengetik, dan Anda juga bisa langsung menyimpan secara manual kapan pun dengan pintasan Ctrl+S (Mac: Cmd+S).
- Fitur praktis: Jika judul dibiarkan kosong, baris pertama isi akan otomatis menjadi judul.
Kebebasan dan kenyamanan pengguna yang tinggi: Mendukung beragam fitur untuk memaksimalkan produktivitas.
- Pengaturan pengguna: Ubah tampilan aplikasi sesuai selera, seperti tema terang/gelap serta font/ukuran editor, dan reset semua pengaturan.
- UI dinamis: Bukan hanya lewat menu pengaturan, lebar panel dan mode zen juga bisa diatur secara intuitif dengan drag mouse.
- Manajemen catatan tingkat lanjut: Menyediakan pencarian catatan (termasuk highlight kata kunci), pengurutan, serta fitur pin dan favorit untuk catatan penting.
- Perpindahan intuitif: Dengan drag and drop, Anda bisa mengubah urutan folder atau memindahkan catatan ke folder lain dengan mudah. (Catatan juga bisa langsung dihapus/ditambahkan dengan menyeretnya ke folder sampah/favorit)
- Zen Mode untuk fokus: Menyediakan lingkungan yang menyembunyikan semua elemen sekitar agar Anda bisa fokus hanya pada penulisan catatan.
- Sampah dan pemulihan: Item yang dihapus dipindahkan ke sampah, dan saat dipulihkan, aplikasi dapat memulihkannya dengan aman, termasuk mendeteksi dan menyelesaikan konflik nama secara otomatis.
- Pencadangan dan pemulihan data: Cadangkan dan pulihkan semua data dengan aman ke/dari satu file JSON. Mendukung impor file cadangan Simplenote (JSON), dan menambahkannya dengan aman ke folder baru tanpa merusak data yang sudah ada.
- Pintasan keyboard: Berbagai tugas seperti membuat folder/catatan baru, mengganti nama, dan menavigasi daftar dapat dilakukan dengan cepat hanya menggunakan keyboard.
Stabilitas dan keandalan data: Melindungi data penting pengguna dengan aman.
- Data disimpan di local storage peramban web.
- Peringatan pencegahan kehilangan: Jika Anda mencoba menutup halaman saat masih ada perubahan yang belum disimpan, akan muncul jendela peringatan untuk mencegah kehilangan data.
- Fitur pemulihan darurat: Jika browser tertutup secara tidak normal, perubahan terakhir yang belum disimpan akan dicadangkan sementara dan saat dijalankan berikutnya Anda akan ditanya apakah ingin memulihkannya.
- Pemeriksaan data otomatis: Saat aplikasi dijalankan, integritas data diperiksa dan bila ditemukan masalah akan otomatis dipulihkan untuk menjaga stabilitas.

Cara instalasi

Dari halaman GitHub, unduh file rilis terbaru di bagian Releases lalu ekstrak.
Di bilah alamat browser Chrome, masukkan chrome://extensions untuk membuka halaman manajemen, lalu aktifkan Developer mode.
Klik tombol muat ekstensi yang telah diekstrak, lalu pilih folder yang diekstrak pada langkah 1 untuk menyelesaikan instalasi. Anda juga bisa drag-and-drop folder tersebut ke halaman manajemen ekstensi. (Sebagai catatan, folder tersebut tidak boleh dihapus.)

Riwayat pembaruan

2025-09-01 4:15 PM // Rilis 17.58, rilis pertama

3 komentar

lunamoth 2025-09-01

Ups, URL tautan screenshot pertama tadi ada salah ketik;

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

ini yang benar.

xguru 2025-09-01

Sudah saya perbarui.