ฉันได้พัฒนาส่วนขยาย Chrome ที่ใส่เอฟเฟกต์ไฮไลต์ระดับประโยคเพื่อช่วยให้มีสมาธิมากขึ้น

ฉันได้พัฒนาส่วนขยาย Chrome ที่ช่วยไฮไลต์ระดับประโยคและเลื่อนหน้าอัตโนมัติเพื่อให้อ่านเว็บเพจได้สะดวกขึ้น มีภาพสาธิตอยู่ใน GitHub

[Features]

• ไฮไลต์ระดับประโยค
  • มีเอฟเฟกต์หลากหลาย เช่น ขีดเส้นใต้, เส้นขอบ, ปากกาไฮไลต์, สปอตไลต์
  • สามารถโฟกัสประโยคที่ต้องการได้ด้วยการคลิกเมาส์
  • สามารถย้ายโฟกัสไปยังประโยคก่อนหน้า/ถัดไปได้ด้วยปุ่มลูกศรบนคีย์บอร์ด
• เลื่อนหน้าอัตโนมัติ
  • เลื่อนไปยังประโยคที่กำลังโฟกัสโดยอัตโนมัติ
  • ทำงานได้อย่างแม่นยำแม้ใน nested scroll container
  • ผู้ใช้สามารถตั้งค่าระดับความสูงบนหน้าจอที่ต้องการให้ประโยคอยู่หลังจากเลื่อนแล้วได้
• การใช้งานได้กว้าง
  • ยืนยันแล้วว่าทำงานได้ดีในหลายสภาพแวดล้อม เช่น Google, GitHub, ChatGPT, Notion, Youtube, GeekNews, HackerNews, BOJ, Naver, LinkedIn, Tistory, Velog, SamsungSDS
  • จนถึงตอนนี้ ทดสอบแล้วว่าสำเร็จในทุกเว็บเพจ ยกเว้นกรณีที่ DOM tree เปลี่ยนแบบเรียลไทม์

 

[ที่มาของการพัฒนา]

ระหว่างเตรียมตัวสัมภาษณ์ ฉันต้องอ่านข่าวเกี่ยวกับบริษัทจำนวนมาก แต่บางครั้งสมาธิก็กระเจิงจนความเร็วในการอ่านช้ามาก เพื่อพยายามรักษาสมาธิไว้ ฉันจึงใช้เมาส์ลากจากอักษรตัวแรกทุกครั้งที่อ่านจบหนึ่งประโยค เพื่อคอยทำเครื่องหมายว่ากำลังอ่านถึงประโยคไหน

แต่การต้องขยับเมาส์ทุกครั้งที่อ่านแต่ละประโยคทำให้ข้อมือเจ็บ อีกทั้งเวลานั่งท่าสบาย ๆ แบบยกเท้าพาดโต๊ะแล้วเอนเก้าอี้ไปด้านหลัง การขยับเมาส์ให้แม่นยำก็ยากมาก

ฉันลองค้นหาส่วนขยาย Chrome ที่สามารถแสดงตำแหน่งที่กำลังอ่านเป็นระดับประโยคได้ แต่ในรายการยอดนิยมกลับไม่มีแบบนั้นเลย พอค้นใน Web Store ต่อไปเรื่อย ๆ ก็เจออยู่พอดีสองตัว แต่ฉันไม่ชอบตรงที่มันใช้ไม่ได้กับหลายเว็บเพจ, มีการดัดแปลงเว็บเพจ, แยกระดับประโยคได้ไม่แม่นยำ และปรับสไตล์ไฮไลต์ได้ไม่ตามที่ต้องการ

สุดท้ายเลยเริ่มทำขึ้นมาใช้เองคนเดียว แต่พอค่อย ๆ ปรับปรุงต่อเนื่อง ผลลัพธ์ก็ออกมาค่อนข้างดี เลยคิดว่าอาจจะมีคนอื่นใช้แล้วเป็นประโยชน์บ้าง จึงนำขึ้น Web Store ด้วย

 

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

สำหรับ logic การแยกประโยคซึ่งเป็นแกนหลัก ฉันใช้วิธี preorder traversal ของ DOM tree แล้วหาตำแหน่งเริ่มต้นและสิ้นสุดของประโยคจากชิ้นส่วนข้อความต่าง ๆ ตอนแรกคิดง่าย ๆ ว่า “แค่แบ่งระหว่างประโยคจากจุดกับเครื่องหมายคำถามคร่าว ๆ ก็น่าจะจบแล้วมั้ง?” แต่เมื่อมีแท็กต่าง ๆ คั่นอยู่ระหว่างประโยค ทำให้ข้อความทั้งประโยคไม่ได้อยู่ใน text node เดียว จึงต้องออกแบบอัลกอริทึมให้ซับซ้อนพอสมควร

ฟีเจอร์เลื่อนหน้าอัตโนมัติเดิมไม่ได้อยู่ในแผน แต่หลังจากทำ logic การแยกประโยคเสร็จ ก็พบว่าถ้าจะเลื่อนหน้าลงก็ยังต้องกลับไปจับเมาส์อีกอยู่ดี เลยเริ่มลงมือทำฟีเจอร์นี้ ตอนแรกคิดว่าเอาเมธอด scrollTo มาใช้ก็น่าจะจบได้ทันที แต่กลับพบว่าบนหลายเว็บเพจรวมถึง ChatGPT นั้น การใช้ scrollTo แบบตรง ๆ ใช้งานไม่ได้ในหลายกรณี นอกจากนี้ scrollTo ยังอิงหน่วยเป็น node ไม่ใช่ประโยค จึงต้องแก้ปัญหาที่ว่าเมื่อมีหลายประโยคอยู่ใน text node เดียว ต่อให้ย้ายโฟกัสไปประโยคถัดไปแล้ว scroll ก็ไม่ขยับ

 

[ขอฟีดแบ็กหน่อยครับ]

ผมรู้ว่าการขอแบบนี้อาจไม่ค่อยเหมาะสม แต่ถ้าคุณสนใจและได้ลองใช้ดูแล้ว รบกวนช่วยส่งฟีดแบ็กหน่อยนะครับ ถึงตอนนี้จำนวนผู้ใช้จะค่อย ๆ เพิ่มขึ้นเพราะผมโปรโมตไว้หลายที่ แต่ก็ยังไม่มีใครเขียนรีวิวไว้แม้แต่คนเดียว

สำหรับผมที่ตอนนี้สัมผัสได้ด้วยตัวเองว่า “ไม่มีคอมเมนต์น่ากลัวยิ่งกว่าคอมเมนต์แย่ ๆ” ไม่ว่าจะเป็นคำวิจารณ์ แนวทางปรับปรุง รายงานบั๊ก หรือแม้แต่เรื่องเล็กน้อยมาก ๆ ถ้าคุณช่วยฝากความเห็นไว้ให้สักหน่อย ผมจะขอบคุณมากจริง ๆ

 

GitHub: https://github.com/hamsteak1488/focus-anchor

Chrome Webstore: https://chromewebstore.google.com/detail/focus-anchor/…

[hwhang0917]

เป็นปลั๊กอินที่ดีมากครับ!
ปกติผมอ่านข้อความไปพร้อมกับใช้เมาส์เลือกข้อความไปด้วย อันนี้มีประโยชน์มากจริง ๆ!

ถ้ารองรับการ bind คีย์แบบ vim ได้ด้วยก็น่าจะดีมากครับ!
แล้วมีแผนจะรองรับ Firefox ด้วยไหมครับ?

[hamsteak]

ขณะนี้กำลังพัฒนาตัวเลือกการกำหนดคีย์ลัดอยู่ และมีแผนจะเพิ่มเข้ามาในเวอร์ชันถัดไป!

ส่วนการรองรับ Firefox ก็จะเริ่มดำเนินการทันทีที่รีแฟกเตอร์โค้ดเสร็จเรียบร้อย

[vigorous5537]

เป็นฟีเจอร์ที่เรียบง่ายแต่ดีมากจริงๆ!
คงต้องติดตั้งไว้ที่บริษัทแล้วใช้งานกันยาวๆ เลยครับ

จุดที่น่าเสียดายนิดหน่อยก็คือไม่มี shortcut
พอมีส่วนขยายเยอะขึ้น อันที่ปักหมุดไว้ด้านบนก็เยอะมาก เลยคิดว่าถ้ามีคีย์ลัดด้วยก็น่าจะดีครับ

[hamsteak]

ขอบคุณสำหรับความคิดเห็นครับ/ค่ะ! ผม/ฉันจะพัฒนาให้สามารถเพิ่มฟังก์ชันคีย์ลัดได้ในเวอร์ชันถัดไปทันทีครับ/ค่ะ