Tôi đã phát triển một tiện ích mở rộng Chrome cung cấp hiệu ứng làm nổi bật theo từng câu để tăng khả năng tập trung.
(github.com/hamsteak1488)Tôi đã phát triển một tiện ích mở rộng Chrome có thể làm nổi bật theo từng câu và tự động cuộn để giúp việc đọc trang web dễ hơn. Hình ảnh minh họa có trên GitHub.
[Features]
- Làm nổi bật theo từng câu
- Nhiều hiệu ứng khác nhau như gạch chân, đường viền, bút dạ quang, spotlight.
- Có thể nhấp chuột để tập trung vào câu mong muốn.
- Có thể dùng phím mũi tên trên bàn phím để chuyển focus sang câu trước hoặc câu tiếp theo.
- Tự động cuộn
- Tự động cuộn đến câu đang được focus.
- Hoạt động chính xác ngay cả trong các vùng chứa cuộn lồng nhau.
- Người dùng có thể thiết lập độ cao để câu sau khi cuộn sẽ nằm ở vị trí mong muốn trong màn hình.
- Tính đa dụng
- Đã xác nhận hoạt động tốt trong nhiều môi trường khác nhau như Google, GitHub, ChatGPT, Notion, Youtube, GeekNews, HackerNews, BOJ, Naver, LinkedIn, Tistory, Velog, SamsungSDS.
- Cho đến nay, đã hoạt động thành công trên mọi trang web ngoại trừ các trường hợp cây DOM thay đổi theo thời gian thực.
[Động cơ phát triển]
Trong quá trình chuẩn bị phỏng vấn, tôi phải đọc rất nhiều tin tức liên quan đến các công ty, nhưng đôi khi bị mất tập trung nên tốc độ đọc trở nên rất chậm. Để cố duy trì sự tập trung, tôi đã dùng chuột kéo từ ký tự đầu tiên mỗi khi đọc một câu để liên tục đánh dấu mình đang đọc đến câu nào.
Nhưng việc phải thao tác chuột mỗi lần đọc một câu khiến cổ tay tôi bị đau. Ngoài ra, trong tư thế thoải mái như gác chân lên bàn và ngả ghế ra sau, việc di chuyển chuột chính xác là rất khó.
Tôi đã thử tìm tiện ích mở rộng Chrome có thể đánh dấu vị trí đang đọc theo từng câu, nhưng trong các mục phổ biến thì không có. Sau khi tiếp tục lục tìm trên Web Store, tôi có tìm ra đúng hai cái, nhưng chúng không hoạt động trên nhiều trang web, làm biến đổi trang web, phân tách câu không chính xác và không thể tùy chỉnh kiểu highlight theo ý muốn, nên tôi không hài lòng.
Vì vậy tôi bắt đầu tự làm để dùng một mình, rồi cứ tiếp tục cải tiến và cuối cùng tạo ra một sản phẩm khá ổn, nên tôi nghĩ có thể sẽ hữu ích cho ai đó và đã đưa nó lên cả Web Store.
[Quá trình phát triển]
Ở phần cốt lõi là logic tách câu, tôi áp dụng cách duyệt tiền thứ tự cây DOM và xác định trước vị trí bắt đầu, kết thúc của câu từ các mảnh văn bản. Ban đầu tôi đã nghĩ khá đơn giản rằng “chỉ cần tách câu đại khái bằng dấu chấm với dấu hỏi là xong chứ gì?”, nhưng nếu các thẻ nằm xen giữa câu thì toàn bộ câu sẽ không nằm trong một text node duy nhất, nên tôi đã phải xây dựng thuật toán khá phức tạp.
Tính năng tự động cuộn ban đầu không có trong kế hoạch, nhưng sau khi hoàn thành logic tách câu, tôi nhận ra rằng để cuộn xuống thì lại phải cầm chuột một lần nữa, nên bắt đầu triển khai. Tôi tưởng rằng chỉ cần dùng đại phương thức scrollTo là xong, nhưng trên khá nhiều trang web bao gồm cả ChatGPT, chỉ dùng scrollTo đơn giản lại không hoạt động. Ngoài ra, vì scrollTo dùng đơn vị là node chứ không phải câu, nên khi có nhiều câu trong một text node, tôi cũng phải giải quyết vấn đề là cuộn không hề di chuyển dù đã chuyển focus sang câu tiếp theo.
[Tha thiết xin phản hồi]
Tôi biết kiểu “xin xỏ” này có thể không phù hợp, nhưng nếu bạn thấy hứng thú và đã thử dùng một lần, mong bạn cho tôi xin chút phản hồi. Có lẽ nhờ đã quảng bá ở nhiều nơi nên số người dùng đang tăng dần, nhưng cho đến giờ vẫn chưa có lấy một người để lại đánh giá.
Là người đang trực tiếp cảm nhận rằng không có bình luận còn đáng sợ hơn cả bình luận tiêu cực, tôi sẽ thật sự biết ơn nếu bạn để lại bất kỳ ý kiến nào như nhận xét, hướng cải thiện, báo lỗi, hay bất cứ điều gì dù rất nhỏ.
GitHub: https://github.com/hamsteak1488/focus-anchor
Chrome Webstore: https://chromewebstore.google.com/detail/focus-anchor/…
4 bình luận
Đây là một plugin rất tuyệt!
Tôi là kiểu người hay chọn văn bản bằng chuột khi đọc, nên thấy nó cực kỳ hữu ích!
Sẽ thật tuyệt nếu hỗ trợ cả key binding của vim!
Ngoài ra, không biết bạn có dự định hỗ trợ Firefox không?
Hiện tại tôi đang triển khai tùy chọn gán phím tắt và dự kiến sẽ thêm vào ở phiên bản tiếp theo!
Việc hỗ trợ Firefox cũng sẽ được tiến hành ngay sau khi tôi hoàn tất việc refactor mã.
Đây thực sự là một tính năng rất đơn giản nhưng hay!
Chắc phải cài ở công ty để dùng lâu dài mới được.
Điểm hơi tiếc chắc là không có shortcut.
Vì extension ngày càng nhiều nên có quá nhiều cái được ghim trên thanh trên cùng, có thêm phím tắt thì cũng sẽ rất tốt.
Cảm ơn bạn đã góp ý! Tôi sẽ cố gắng phát triển để tính năng phím tắt có thể được thêm ngay trong phiên bản tiếp theo.