Tự tạo tiện ích Chrome Pixel Ruler: Giải pháp đo lường và căn chỉnh giao diện trực tiếp trên trình duyệt

Trong công việc thiết kế và lập trình giao diện (front-end), việc đo đạc chính xác từng pixel là điều diễn ra thường xuyên. Liệu khối div này cách biên 8px hay 12px? Hai cột này có thực sự thẳng hàng với nhau không? Tôi cảm thấy mệt mỏi khi phải liên tục chuyển tab để xác nhận các kích thước, vì vậy tôi đã quyết định xây dựng một tiện ích mở rộng Chrome giúp trả lời những câu hỏi này ngay trên trang, mà không cần rời khỏi giao diện làm việc.

Bạn có thể tìm hiểu và cài đặt tiện ích tại Chrome Web Store hoặc trang chủ dự án.

Công cụ này làm được gì?

Pixel Ruler + Alignment Checker hoạt động bằng cách chồng các công cụ đo lường và căn chỉnh trực tiếp lên bất kỳ trang web nào:

• Thước đo trên màn hình (On-screen ruler): Kéo thả để đo khoảng cách giữa bất kỳ hai điểm nào tính bằng pixel.
• Đường hướng dẫn (Alignment guides): Các đường ngang và dọc có thể đặt ở bất kỳ vị trí nào trên trang.
• Đo lường phần tử (Element measurement): Nhấp vào một phần tử DOM để xem kích thước và vị trí của nó.
• Kiểm tra khoảng cách (Spacing check): Xác minh khoảng cách giữa hai phần tử.
• Giữ nguyên khi cuộn (Persistent across scroll): Các đường hướng dẫn sẽ cố định tại chỗ khi bạn cuộn trang.

Mục tiêu thiết kế là giảm thiểu ma sát: mở tiện ích, bắt đầu đo, và đóng lại mà không để lại dấu vết nào.

Kiến trúc: Chrome MV3

Tiện ích sử dụng Chrome Manifest V3, hiện là tiêu chuẩn bắt buộc. MV3 có Chính sách bảo mật nội dung (CSP) chặt chẽ hơn MV2 — sử dụng service workers thay vì background pages và cấp quyền hạn khắt khe hơn.

Đối với một công cụ overlay trực quan, MV3 thực sự giúp đơn giản hóa mọi thứ. Không cần quy trình nền (background process). Toàn bộ tiện ích là một content script (script nội dung) chèn một lớp đo lường vào tab đang hoạt động.

Phương pháp lớp phủ (Overlay)

Khi được kích hoạt, tiện ích chèn một thẻ div overlay bao phủ toàn bộ khung nhìn (viewport) của trang với thuộc tính pointer-events: none — ngoại trừ các tay cầm tương tác của thước đo và đường hướng dẫn. Các thao tác nhấp chuột sẽ xuyên qua đến trang bên dưới, giúp bạn có thể tương tác với trang web trong khi vẫn thấy các thước đo.

Giá trị z-index được đặt là 2147483647 — số nguyên 32-bit tối đa — mức bối cảnh xếp chồng (stacking context) cao nhất có thể.

Triển khai thước đo

Thước đo là một phần tử canvas. Khi bạn nhấp và kéo, nó tính toán khoảng cách pixel sử dụng khoảng cách Euclid, sau đó hiển thị nhãn tại điểm trung điểm.

Tính năng "bám" (snapping) vào góc 45 độ khi giữ phím Shift là một chi tiết UX nhỏ giúp tăng tốc độ đo lường theo chiều ngang và dọc.

Đường hướng dẫn

Các đường dẫn là các phần tử được định vị tuyệt đối (absolutely positioned) bên trong lớp phủ. Mỗi đường có một tay cầm để kéo. Kéo để di chuyển, nhấp đúp để xóa. Vị trí được lưu giữ qua chrome.storage.local trong cùng một tên miền.

Thách thức về CSP

Các tiêu đề CSP nghiêm ngặt trên một số trang web sẽ chặn các kiểu nội tuyến (inline styles) được chèn vào. Tôi đã giải quyết vấn đề này bằng cách chèn styles thông qua chrome.scripting.insertCSS thay vì inline, điều này đáp ứng hầu hết các cấu hình CSP.

Những bài học rút ra

Hệ tọa độ DOM rất dễ gây nhầm lẫn. getBoundingClientRect() cung cấp tọa độ tương đối khung nhìn (viewport). offsetLeft/offsetTop cung cấp tọa độ tương đối với phần tử cha. scrollX/scrollY cung cấp độ lệch cuộn. Các phép đo nhất quán đòi hỏi phải thận trọng về không gian tọa độ tại từng bước.

Mật độ điểm ảnh (Pixel density) rất quan trọng. Trên màn hình DPI cao, devicePixelRatio là 2 trở lên. Canvas mà không có sự bù trừ này sẽ hiển thị bị mờ. Hãy nhân kích thước canvas với devicePixelRatio và chia nhỏ ngữ cảnh (scale context).

UX của tiện ích phải tức thì. Không chấp nhận độ trễ cảm nhận được. Lớp overlay kích hoạt trong vòng dưới 50ms — không có khởi tạo không đồng bộ (async) nào trên đường dẫn quan trọng.

Xuất bản lên Chrome Web Store

Quá trình xem duyệt MV3 thường mất từ 1-3 ngày. Những điều sau đã giúp ích rất nhiều:

• Tối thiểu hóa manifest.json — chỉ yêu cầu những quyền bạn thực sự cần.
• Chính sách quyền riêng tư kỹ thuật được liên kết từ mục đăng tin.
• Ảnh chụp màn hình cho thấy tiện ích đang được sử dụng thực tế.
• Mô tả một đoạn khớp chính xác với những gì tiện ích thực hiện.

Hãy thử ngay

Nếu bạn làm việc về UI, thực hiện đánh giá thiết kế, hoặc chỉ muốn xác minh CSS của mình hoạt động đúng như ý tưởng:

Link cài đặt Chrome Web Store

Tôi rất sẵn lòng giải đáp các câu hỏi về Chrome extension APIs, các mẫu MV3, hoặc kiến trúc content script trong phần bình luận.