Saya membuat ekstensi Chrome yang memberikan efek highlight per kalimat untuk membantu meningkatkan fokus.

Saya mengembangkan ekstensi Chrome yang memberikan highlight per kalimat dan auto-scroll agar halaman web lebih nyaman dibaca. Gambar demo tersedia di GitHub.

[Features]

• Highlight per kalimat
  • Beragam efek seperti garis bawah, outline, highlighter, spotlight, dan lainnya.
  • Bisa memfokuskan kalimat yang diinginkan dengan klik mouse.
  • Bisa memindahkan fokus ke kalimat sebelumnya atau berikutnya dengan tombol panah keyboard.
• Auto-scroll
  • Otomatis menggulir ke kalimat yang sedang difokuskan.
  • Tetap bekerja akurat bahkan pada nested scroll container.
  • Pengguna dapat mengatur posisi ketinggian kalimat di layar setelah scroll.
• Universalitas
  • Telah dipastikan bekerja dengan baik di berbagai lingkungan seperti Google, GitHub, ChatGPT, Notion, Youtube, GeekNews, HackerNews, BOJ, Naver, LinkedIn, Tistory, Velog, SamsungSDS, dan lainnya.
  • Sejauh ini berhasil berjalan di semua halaman web kecuali kasus ketika DOM tree berubah secara real-time.

[Latar belakang pengembangan]

Saat mempersiapkan wawancara, saya harus banyak membaca berita terkait perusahaan, tetapi kadang fokus saya buyar sehingga kecepatan membaca menjadi sangat lambat. Untuk tetap menjaga konsentrasi, saya terus menandai posisi kalimat yang sedang dibaca dengan menyeret huruf pertama menggunakan mouse setiap kali membaca satu kalimat.

Namun, karena harus mengoperasikan mouse setiap kali membaca kalimat, pergelangan tangan saya jadi sakit. Selain itu, saat duduk santai dengan kaki di atas meja dan kursi direbahkan ke belakang, sangat sulit menggerakkan mouse dengan akurat.

Saya sempat mencari ekstensi Chrome yang bisa menandai posisi baca per kalimat, tetapi tidak ada yang seperti itu di daftar populer. Setelah terus menelusuri Web Store, saya memang menemukan tepat dua, tetapi saya tidak menyukainya karena tidak bekerja di banyak halaman web, mengubah tampilan halaman, pemisahan kalimatnya tidak akurat, dan gaya highlight-nya tidak bisa disesuaikan sesuka hati.

Karena itu, awalnya saya mulai membuatnya sendiri hanya untuk dipakai pribadi. Lalu setelah terus saya perbaiki, hasilnya ternyata cukup bagus, dan saya berpikir mungkin ini juga bisa berguna untuk orang lain, jadi saya sampai mengunggahnya ke Web Store.

[Proses pengembangan]

Untuk logika pemisahan kalimat yang menjadi inti, saya menerapkan pendekatan dengan melakukan pre-order traversal pada DOM tree lalu mencari lebih dulu posisi awal dan akhir kalimat dari potongan-potongan teks. Awalnya saya berpikir enteng, “Paling tinggal membedakan kalimat berdasarkan titik dan tanda tanya, selesai, kan?” Tetapi jika tag seperti ``, terselip di antara kalimat, satu text node tidak akan memuat keseluruhan kalimat, sehingga saya harus menyusun algoritmenya menjadi cukup kompleks.

Fitur auto-scroll awalnya tidak ada dalam rencana. Namun setelah menyelesaikan logika pemisahan kalimat, saya sadar bahwa untuk menggulir ke bawah saya tetap harus memegang mouse lagi, sehingga saya pun mulai mengimplementasikannya. Saya sempat mengira fitur auto-scroll bisa langsung selesai hanya dengan memakai metode scrollTo, tetapi di cukup banyak halaman web termasuk ChatGPT, ada banyak kasus di mana scrollTo sederhana saja tidak bekerja. Selain itu, karena scrollTo menggunakan node sebagai satuan, bukan kalimat, saya juga harus menyelesaikan masalah bahwa ketika ada beberapa kalimat dalam satu text node, memindahkan fokus ke kalimat berikutnya tidak membuat scroll bergerak.

[Memohon feedback]

Saya tahu permintaan seperti ini mungkin kurang pantas, tetapi kalau Anda tertarik dan sempat mencobanya, saya sangat berharap bisa mendapat feedback. Mungkin berkat promosi yang selama ini saya lakukan di berbagai tempat, jumlah pengguna perlahan bertambah, tetapi sampai sekarang belum ada satu pun orang yang meninggalkan review.

Saya kini benar-benar merasakan sendiri bahwa tidak ada respons itu lebih menakutkan daripada komentar buruk. Jadi kritik, usulan perbaikan, laporan bug, atau hal sekecil apa pun akan sangat saya hargai jika Anda bersedia meninggalkan pendapat.

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

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

[hwhang0917]

Plugin yang sangat bagus!
Saya tipe yang sering memilih teks dengan mouse saat membaca, jadi ini sangat berguna!

Akan bagus juga kalau mendukung key binding vim!
Dan, apakah ada rencana untuk mendukung Firefox juga?

[hamsteak]

Saat ini saya sedang mengimplementasikan opsi penetapan shortcut dan berencana menambahkannya di versi berikutnya!

Dukungan Firefox juga akan segera saya kerjakan begitu refactoring kode selesai.

[vigorous5537]

Ini benar-benar fitur yang sangat simpel dan bagus!
Sepertinya perlu dipasang di kantor dan dipakai terus-menerus.

Yang agak disayangkan mungkin hanya tidak adanya shortcut.
Karena ekstensi makin banyak, yang dipin di bagian atas jadi terlalu banyak, jadi akan bagus juga kalau ada shortcut.

[hamsteak]

Terima kasih atas masukannya! Saya akan mengupayakan agar fitur pintasan keyboard bisa ditambahkan langsung pada versi berikutnya.