Crop - tiện ích mở rộng Chrome giúp chọn chính xác phần tử trên trang web để chụp

Xin chào. Tôi muốn giới thiệu Crop, một tiện ích mở rộng Chrome để chụp chính xác phần bạn muốn trên trang web.

Crop hiển thị một lớp phủ trên trang bạn đang xem, cho phép bạn rê chuột để chọn phần tử DOM hoặc tự kéo chọn vùng rồi sao chép/lưu dưới dạng PNG.

Tôi thấy quy trình chọn chính xác phần tử trong tính năng chụp màn hình của Firefox rất tiện, và muốn dùng cách tương tự trên Chrome nên đã bắt đầu làm tiện ích này.

Tính năng chính

• Tô sáng phần tử DOM khi hover chuột
• Chọn phần tử bằng cách nhấp
• Kéo để chọn vùng tùy chỉnh
• Di chuyển và thay đổi kích thước vùng chọn
• Chụp viewport hiện tại
• Chụp toàn bộ trang
• Chụp cuộn cho vùng chọn kéo dài ra ngoài viewport
• Sao chép PNG vào clipboard hoặc lưu thành tệp

Quyền hạn và quyền riêng tư

Vì là tiện ích mở rộng trình duyệt nên vấn đề quyền truy cập có thể khiến mọi người bận tâm, vì vậy tôi đã cố gắng giảm phần này xuống mức tối đa.

Hiện tại chỉ dùng các quyền sau.

• activeTab: chỉ truy cập tạm thời vào tab hiện tại mà người dùng chạy tiện ích
• scripting: chèn script lớp phủ vào tab hiện tại
• clipboardWrite: sao chép PNG đã tạo vào clipboard
• downloads: lưu PNG đã tạo

Không yêu cầu các quyền rộng như debugger, <all_urls>.

Ảnh chụp màn hình được xử lý cục bộ trong trình duyệt. Tôi không tải ảnh chụp hay dữ liệu trang lên máy chủ, và cũng không thêm telemetry. Hình ảnh chỉ được đưa ra clipboard hoặc tệp tải xuống khi người dùng nhấn Copy hoặc Save.

Giới hạn hiện tại

Do các ràng buộc của tiện ích mở rộng Chrome, các trường hợp dưới đây có giới hạn.

• Không chạy được trên các trang bị hạn chế như chrome:// hoặc Chrome Web Store.
• Bên trong iframe cross-origin, content script không thể kiểm tra nên việc chọn phần tử bị hạn chế.
• Cũng không thể truy cập bên trong closed shadow DOM.
• Chụp toàn bộ trang hiện hoạt động theo top-level document.
• Với các trang rất lớn, PNG có thể bị downscale do giới hạn canvas của trình duyệt.
• Với các trang có nhiều lazy loading, animation, sticky header/footer, kết quả ghép ảnh full-page có thể không hoàn hảo.

Về triển khai

Tiện ích được xây dựng dựa trên Chrome Manifest V3.

Tiện ích chèn content script lên trang và xử lý luồng chọn/thay đổi kích thước/chụp trong lớp phủ dựa trên Shadow DOM. Với toàn bộ trang hoặc vùng nằm ngoài viewport, việc chụp được thực hiện bằng cách kết hợp chrome.tabs.captureVisibleTab() với scroll stitching.

Một phần mã tham khảo/áp dụng từ phía Firefox Screenshots vẫn giữ thông báo MPL-2.0, còn mã dự án được viết mới đã được sắp xếp để phát hành theo giấy phép MIT. Đây không phải là dự án được liên kết chính thức hay được Mozilla/Firefox bảo chứng.

Liên kết

Chrome Web Store:
https://chromewebstore.google.com/detail/crop/…

GitHub:
https://github.com/postmelee/crop

Nếu bạn thường xuyên chụp trang web cho các công việc như viết tài liệu, báo cáo lỗi, review UI, rất mong bạn dùng thử và để lại những điểm bất tiện hoặc ý tưởng cải thiện.