Manuscript – tiện ích mở rộng trình duyệt để tạo bản demo web và hướng dẫn không bị vỡ dù trang thay đổi

Đây là một tiện ích mở rộng trình duyệt để tạo bản demo theo từng bước, hướng dẫn sử dụng và guide onboarding ngay trên trang web (Chrome·Edge). Bạn có thể nhấp để chọn phần tử cần nhấn mạnh, chồng spotlight, ghi chú và mũi tên vẽ tay rồi phát lại.

Khi tạo ra công cụ này, tôi tập trung vào hai điểm. Các công cụ hiện có thường làm guide bị vỡ chỉ với một thay đổi nhỏ của trang, và kết quả lại bị khóa trong cloud nên khó quản lý phiên bản. Tôi muốn giải quyết khác đi cho cả hai vấn đề này.

Điểm khác biệt

• Rất khó bị vỡ. Mỗi phần tử của từng bước được ghi nhớ theo 3 tầng — thuộc tính ổn định (data-testid·id·aria-label) → văn bản và cấu trúc xung quanh → tọa độ và chữ lân cận. Nếu một tầng bị lệch thì fallback sang tầng tiếp theo.
• Kết quả là một file JSON duy nhất. Có thể commit vào git, xem diff qua PR, đặt cạnh mã nguồn và quản lý. Không bị lock-in cloud.
• Không đụng vào mã của website đích. Tiện ích chỉ hoạt động bên trong trình duyệt nên có thể tạo trên sản phẩm của tôi, website khách hàng hay bất kỳ SaaS bên ngoài nào.

Ngoài ra còn có các tính năng hướng dẫn bằng giọng nói (TTS), cửa sổ presenter, ghi màn hình và chia sẻ kịch bản qua repo GitHub.

• Store: https://chromewebstore.google.com/detail/manuscript/…
• Giới thiệu: https://zendy00.github.io/manuscript-pages/