MothNote ส่วนขยายแท็บใหม่ของ Google Chrome แบบออลอินวัน ที่เพิ่มวิดเจ็ตนาฬิกา สภาพอากาศ และปฏิทินให้กับระบบโน้ตแบบอิงโฟลเดอร์

🦋 MothNote

• ภาพหน้าจอหน้ารายละเอียดโน้ตของ MothNote

• ภาพหน้าจอหน้ารายละเอียดสภาพอากาศของ MothNote

• บทความแนะนำ MothNote บนบล็อก lunamoth 4th

• MothNote GitHub

(ดูเหมือนว่า GeekNews จะยังไม่รองรับการแสดงภาพ จึงใส่เป็นลิงก์ไว้)

MohtNote คือส่วนขยายแท็บใหม่ของ Google Chrome แบบแดชบอร์ดออลอินวัน ที่เพิ่มวิดเจ็ตนาฬิกา สภาพอากาศ และปฏิทินให้กับระบบโน้ตแบบอิงโฟลเดอร์

---

กระบวนการพัฒนา

ใน MothNote คุณสามารถเขียนโน้ตได้ทันทีอย่างรวดเร็วจากแท็บใหม่ของ Google Chrome และยังดูนาฬิกา/ปฏิทิน/สภาพอากาศ/อุณหภูมิได้อย่างรวดเร็วด้วย หลังจากเคยสร้างส่วนขยาย LunaTools ที่มีฟีเจอร์ 15 อย่าง ก็เกิดความคิดขึ้นมาว่า ลองทำส่วนขยายแท็บใหม่ดูจะเป็นอย่างไร จึงเริ่มพัฒนาขึ้นมา

แม้จะไม่ใช่นักพัฒนาและไม่รู้การเขียนโปรแกรมเลย แต่ก็เริ่มสร้างเมื่อวันที่ 25 กรกฎาคม 2025 โดยใช้ Google AI Studio (เว็บ) กับ Google Gemini 2.5 Pro และพัฒนามาราว 38 วัน ก่อนจะออกรีลีสในวันที่ 1 กันยายน 2025 จำนวนโค้ดที่เขียนเองไม่นับรวมไลบรารีภายนอกคือ 7,385 บรรทัด

เพราะคิดว่าถ้าสามารถเขียนโน้ตได้ทันทีจากแท็บใหม่ซึ่งเป็นหน้าที่เปิดบ่อยที่สุดก็น่าจะสะดวก จึงเริ่มจากการทำแอปโน้ตด้วยโครงสร้าง 3 คอลัมน์ที่เห็นได้บ่อยในเครื่องมือจัดการโปรเจกต์หลายตัว ใส่การรองรับธีม Solarized Light/Dark และได้ไอเดียจากส่วนขยาย Tabliss จึงเพิ่มนาฬิกาดิจิทัล นาฬิกาอนาล็อก สภาพอากาศ และอุณหภูมิ รวมถึงเพิ่มปฏิทินเพื่อใช้เป็นไดอารีได้ด้วย

ยังเพิ่มโหมดโฟกัสและโหมดเซนที่มักพบในแอปสำหรับการเขียน รองรับการตั้งค่าเลย์เอาต์ การตั้งค่าฟอนต์ของตัวแก้ไข การตั้งค่าเมืองสำหรับสภาพอากาศ และฟังก์ชันสำรอง/กู้คืนข้อมูลด้วย

ระหว่างทางเคยรองรับฟังก์ชันซิงก์หลายแท็บ แต่ก็เข้าใจคำว่า over-engineering แล้วจึงย้อนกลับออกมาได้เหมือนกัน และยังจำได้ว่ารู้จักคำว่า “งานแบบอะตอมมิก” ตอนที่พยายามทำฟีเจอร์นั้น

คิดว่าน่าจะดีถ้านำหน้ารายละเอียดสภาพอากาศที่เคยทำไว้ก่อนหน้านี้มารวมเข้าด้วย จึงใส่เข้ามา ตอนแรกตั้งใจว่าจะไม่รองรับ Markdown แต่พอรู้วิธีใช้ไลบรารีภายนอกแล้ว จึงเพิ่มโหมดมุมมอง Markdown เข้ามา (ตอนแรกใช้ Snakdown แล้วเปลี่ยนเป็น Marked)

สำหรับค่าเริ่มต้นของโฟลเดอร์ ได้ใส่โฟลเดอร์ตามแนว PARA และ Bullet Journal ที่แนะนำไว้ด้วย น่าจะประยุกต์ใช้ในแบบ Todo.txt ได้เช่นกัน

เดิมทีเคยใช้ Simplenote มาก่อน จึงคิดว่าน่าจะย้ายข้อมูลได้ และได้เพิ่มฟังก์ชันย้ายข้อมูลจากไฟล์สำรอง JSON ของ Simplenote ด้วย ไม่กี่วันก่อนยังได้รู้จักสิทธิ์ unlimitedStorage ที่ทำให้ใช้พื้นที่ได้ไม่จำกัด แทนข้อจำกัด local storage 10MB จึงนำมาใช้ด้วย

ไอเดียที่นึกได้ระหว่างการพัฒนาก็มีอย่างเช่น แท็ก โฟลเดอร์หลายชั้น ตัวแก้ไขแบบ WYSIWYG ลิงก์แบบวิกิ เช็กรายการสิ่งที่ต้องทำ ฟังก์ชันเก็บบทความด้วย Readability.js การเชื่อมต่อ Google Drive ฯลฯ หลังจากนี้ตั้งใจว่าจะอัปเดตโดยเน้นฟีเจอร์ที่มีความหมายจริง ๆ

ผ่านกระบวนการแก้บั๊กมาค่อนข้างนาน จนคิดว่ามันพอใช้งานได้ดีระดับหนึ่งแล้ว จึงลองปล่อยรีลีสดู น่าจะใช้งานได้พอสมควร ลองใช้กันดูแล้วช่วยเสนอการปรับปรุงฟีเจอร์หรือรายงานบั๊กให้ด้วยนะครับ (ถ้าตอบกลับทาง Bluesky, Twitter หรือ Threads จะขอบคุณมาก)

---

ฟีเจอร์หลัก

(คำอธิบายฟีเจอร์ด้านล่างนี้ Gemini 2.5 Pro เป็นผู้เขียนจากการวิเคราะห์ซอร์สโค้ดของ MothNote)

• แดชบอร์ดออลอินวัน: ดูข้อมูลที่จำเป็นทั้งหมดได้ในหน้าแท็บใหม่ในคราวเดียว

  • นาฬิกา: มีทั้งนาฬิกาอนาล็อกดีไซน์สวยงามและนาฬิกาดิจิทัลที่อ่านง่าย
  • ข้อมูลสภาพอากาศแบบละเอียด: คลิกวิดเจ็ตบนแดชบอร์ดครั้งเดียวก็เข้าถึงข้อมูลอากาศแบบผู้เชี่ยวชาญได้
    • พยากรณ์รายสัปดาห์: ในหน้าเฉพาะสามารถดูการเปลี่ยนแปลงของอุณหภูมิสูงสุด/ต่ำสุดรายสัปดาห์ได้ในคราวเดียวพร้อมกราฟภาพ และยังมี เอฟเฟ็กต์ฉากหลังสวยงามที่แสดงฝนหรือหิมะตามสภาพอากาศปัจจุบัน อีกด้วย
    • ข้อมูลรายละเอียดตามช่วงเวลา: เมื่อคลิกการ์ดพยากรณ์ของวันที่ต้องการ จะมีรายการและกราฟแบบละเอียดของอุณหภูมิ สภาพอากาศที่เปลี่ยนไป และโอกาสเกิดฝนในแต่ละช่วงเวลาของวันนั้น
    • การตั้งค่าตำแหน่ง: ค้นหาชื่อเมืองได้ และยังสามารถกรอกละติจูดกับลองจิจูดโดยตรงเพื่อตั้งค่าสภาพอากาศของพื้นที่ใดก็ได้ทั่วโลก
  • ปฏิทินที่เชื่อมกับโน้ต: วันที่มีการเขียนโน้ตจะมีขีดเส้นใต้ และเมื่อ เอาเมาส์ไปวางบนวันที่นั้นจะดูตัวอย่างชื่อโน้ตได้ เมื่อคลิกก็จะรวมโน้ตทั้งหมดของวันนั้นมาให้ดูได้ทันที

• ระบบโน้ตทรงพลัง: จัดระเบียบความคิดอย่างเป็นระบบด้วยโฟลเดอร์ และจัดการโน้ตได้อย่างมีประสิทธิภาพผ่าน UI แบบ 3 พาเนล

  • รองรับ Markdown: เขียนโน้ตที่มีรูปแบบได้ด้วยไวยากรณ์ง่าย ๆ เช่น #, *, ** และสลับไปยัง พรีวิว ที่เรนเดอร์อย่างเรียบร้อยได้ด้วยการกดปุ่มครั้งเดียว
  • ตัวแก้ไขเพื่อการทำงานที่มีประสิทธิภาพ: ดูข้อมูลรายละเอียดแบบเรียลไทม์ที่ด้านล่างของตัวแก้ไข เช่น จำนวนตัวอักษร/คำ/บรรทัด วันที่สร้าง/แก้ไข และใช้ปุ่ม Tab เพื่อ เยื้อง/ลดเยื้อง ได้
  • บันทึกอัตโนมัติและบันทึกด้วยตนเอง: เนื้อหาที่เขียนจะถูกบันทึกอัตโนมัติเมื่อหยุดพิมพ์ และยังสามารถบันทึกเองได้ทันทีด้วยคีย์ลัด Ctrl+S (Mac: Cmd+S)
  • ฟีเจอร์อำนวยความสะดวก: หากเว้นชื่อเรื่องว่างไว้ บรรทัดแรกของเนื้อหาจะกลายเป็นชื่อเรื่องโดยอัตโนมัติ

• อิสระและความสะดวกในการใช้งานสูง: รองรับฟีเจอร์หลากหลายเพื่อยกระดับประสิทธิภาพการทำงานให้สูงสุด

  • การตั้งค่าส่วนตัว: ปรับรูปลักษณ์ของแอปตามความชอบได้ เช่น ธีมสว่าง/มืด ฟอนต์/ขนาดฟอนต์ของตัวแก้ไข และยังรีเซ็ตการตั้งค่าทั้งหมดได้
  • UI แบบไดนามิก: นอกจากเมนูการตั้งค่าแล้ว ยังสามารถปรับความกว้างของพาเนลและโหมดเซนได้อย่างเป็นธรรมชาติด้วย การลากเมาส์
  • การจัดการโน้ตขั้นสูง: มีฟังก์ชัน ค้นหา โน้ต (รวมถึงไฮไลต์คำค้น), เรียงลำดับ, ปักหมุด โน้ตสำคัญ และ รายการโปรด
  • การย้ายที่ใช้งานง่าย: เปลี่ยนลำดับโฟลเดอร์ด้วย drag and drop หรือย้ายโน้ตไปยังโฟลเดอร์อื่นได้อย่างง่ายดาย (สามารถลากโน้ตไปยังโฟลเดอร์ถังขยะ/รายการโปรดเพื่อ ลบ/เพิ่ม ได้ทันที)
  • Zen Mode เพื่อการมีสมาธิ: มอบสภาพแวดล้อมที่ซ่อนองค์ประกอบรอบข้างทั้งหมด เพื่อให้โฟกัสกับการเขียนโน้ตได้อย่างเต็มที่
  • ถังขยะและการกู้คืน: รายการที่ถูกลบจะย้ายไปยังถังขยะ และเมื่อกู้คืนก็สามารถกู้ได้อย่างปลอดภัย เช่น ตรวจจับและแก้ปัญหาชื่อซ้ำโดยอัตโนมัติ
  • การสำรองและกู้คืนข้อมูล: สำรองและกู้คืนข้อมูลทั้งหมดได้อย่างปลอดภัยด้วยไฟล์ JSON ไฟล์เดียว รองรับการนำเข้าไฟล์สำรองของ Simplenote (JSON) และจะเพิ่มเข้าไปในโฟลเดอร์ใหม่อย่างปลอดภัยโดยคงข้อมูลเดิมไว้
  • คีย์ลัดแป้นพิมพ์: สร้างโฟลเดอร์/โน้ตใหม่ เปลี่ยนชื่อ นำทางในรายการ และทำงานหลากหลายอย่างได้อย่างรวดเร็วด้วยคีย์บอร์ดเพียงอย่างเดียว

• ความเสถียรและความน่าเชื่อถือของข้อมูล: ปกป้องข้อมูลสำคัญของผู้ใช้อย่างปลอดภัย

  • ข้อมูลจะถูกเก็บไว้ใน local storage ของเว็บเบราว์เซอร์
  • คำเตือนป้องกันการสูญหาย: หากพยายามปิดหน้าเว็บขณะยังมีการเปลี่ยนแปลงที่ไม่ได้บันทึก ระบบจะแสดงหน้าต่างเตือนเพื่อป้องกันข้อมูลสูญหาย
  • ฟังก์ชันกู้คืนฉุกเฉิน: หากเบราว์เซอร์ปิดตัวผิดปกติ ระบบจะสำรองการเปลี่ยนแปลงล่าสุดที่ยังไม่ได้บันทึกไว้ชั่วคราว และเมื่อเปิดครั้งถัดไปจะถามว่าต้องการกู้คืนหรือไม่
  • การตรวจสอบข้อมูลอัตโนมัติ: เมื่อตัวแอปเริ่มทำงานจะตรวจสอบความสมบูรณ์ของข้อมูล และหากพบปัญหาจะกู้คืนให้อัตโนมัติเพื่อรักษาเสถียรภาพ

---

วิธีติดตั้ง

1. ไปที่ส่วนรีลีสบนหน้า GitHub แล้วดาวน์โหลดไฟล์รีลีสล่าสุด จากนั้นแตกไฟล์
2. พิมพ์ chrome://extensions ในแถบที่อยู่ของเบราว์เซอร์ Chrome เพื่อไปยังหน้าจัดการ แล้วเปิดใช้งาน โหมดนักพัฒนา
3. คลิกปุ่มโหลดส่วนขยายที่แตกไฟล์แล้ว และเลือกโฟลเดอร์ที่แตกไว้ในขั้นตอนที่ 1 ก็จะติดตั้งเสร็จสมบูรณ์ หรือจะลากและวางโฟลเดอร์ไปยังหน้าจัดการส่วนขยายก็ได้ (ทั้งนี้ ห้ามลบโฟลเดอร์ดังกล่าว)

---

บันทึกการอัปเดต

• 2025-09-01 16:15 // รีลีส 17.58, รีลีสแรก

[lunamoth]

อ๊ะ ลิงก์ URL ของภาพหน้าจอแรกพิมพ์ผิดไปนะครับ;

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

คืออันนี้ครับ

[xguru]

ฉันได้แก้ไขไว้แล้ว

[lunamoth]

ขอบคุณครับ