Build Chrome Extension trong 45 phút bằng Claude Code — không cần biết JavaScript

Định nghĩa

Build Chrome Extension trong 45 phút là phương pháp dùng Claude Code với Planning Mode và Subagents để phân rã việc xây dựng extension thành các nhiệm vụ song song. Người dùng chỉ cần mô tả tính năng bằng tiếng Việt, AI sẽ tự động sinh boilerplate Manifest V3, content scripts, và background service workers, xử lý toàn bộ complexity của chrome.runtime API và asynchronous message passing.

Giải thích chi tiết

Tại sao Chrome Extension từng là "vùng cấm" với non-coders

Trước đây, để làm Chrome Extension bạn phải vật lộn với đống khái niệm phức tạp:

• Manifest V3 schema: File JSON nghiêm ngặt với permissions, host_permissions, web_accessible_resources — một dấu phẩy sai cũng khiến extension không load được
• chrome.runtime API: Giao tiếp giữa content script (chạy trong trang web), popup (UI khi click icon), và background service worker (xử lý events)
• Asynchronous message passing: Promises, chrome.runtime.sendMessage, error handling với chrome.runtime.lastError — nơi 80% bug của beginner xuất hiện
• Service Worker lifecycle: Cách background script tự động sleep/wake và giữ state

Chính những rào cản này khiến người không biết code phải bó tay, dù họ rất muốn tự động hoá workflow trên trình duyệt. Vibe coding với Claude Code xóa sổ rào cản này bằng cách tách biệt ý định của bạn (muốn làm gì) khỏi cú pháp kỹ thuật (viết code như thế nào).

Bốn giai đoạn "45 phút"

Phương pháp này dựa trên kiến trúc agentic của Claude Code để chạy song song các công việc:

Lập kế hoạch với Planning Mode

Dùng lệnh /plan để Claude phân tích yêu cầu và tạo roadmap chi tiết. Ví dụ: một extension đếm thời gian đọc báo được phân rã thành 8 phases với 36 bước cụ thể. Dù estimate ban đầu có thể là 4.5 giờ, nhờ chạy song song nên thực tế chỉ còn 45 phút.

Phân công Subagents chạy song song

Claude spawn 3-4 Subagents chạy đồng thời trong isolated context windows — mỗi agent có "bộ não" riêng không bị nhiễu bởi suy nghĩ của agent khác:

• Agent A: Chuyên gia manifest — viết manifest.json với permissions đúng (activeTab, storage, scripting)
• Agent B: Chuyên gia UI — viết popup.html và CSS cho giao diện đẹp, responsive
• Agent C: Chuyên gia content script — viết logic chèn vào trang web (DOM manipulation)
• Agent D: Chuyên gia background — viết service worker xử lý events

Mỗi agent làm việc trong git worktree riêng, tránh "context pollution" (ô nhiễm ngữ cảnh) khi phải nhảy qua lại giữa nhiều file.

Kết nối các thành phần

Main agent (Claude chính) tổng hợp message passing giữa các thành phần. Thay vì bạn phải viết code nối popup với content script bằng chrome.tabs.sendMessage, bạn chỉ mô tả: "khi click nút ở popup, highlight tất cả headings trên trang hiện tại". Claude tự sinh:

• popup.js: Event listener → gửi message qua chrome.runtime.sendMessage
• content.js: Listener nhận message → thực thi document.querySelectorAll('h1').forEach(...)

Kiểm thử tự động với Browser Tools

Dùng lệnh /chrome để cấu hình browser automation integration, cho phép Claude "nhìn thấy" UI đang build thông qua screenshots và accessibility tree, debug real-time mà không cần bạn chuyển qua lại giữa DevTools và terminal.

Bản chất "không cần JavaScript"

Thực ra, bạn không cần viết JavaScript — bạn chỉ cần mô tả state transitions. Claude đóng vai trò compiler từ tiếng Việt sang Chrome Extension API.

Ví dụ:

• Input của bạn: "Khi user click button trong popup, highlight all headings trên current page bằng màu vàng"
• Output của AI:
  • Sinh popup.js với event listener và chrome.tabs.sendMessage
  • Sinh content.js với chrome.runtime.onMessage listener và logic DOM manipulation
  • Xử lý toàn bộ async error handling (chrome.runtime.lastError) mà bạn không cần biết nó tồn tại

AI xử lý 80% complexity nằm ở asynchronous wiring (Promises, serialization, message passing). Bạn cung cấp ý định, AI cung cấp cú pháp.

Ví dụ thực tế

Extension đếm thời gian đọc báo (Time Tracker)

Đây là use case ưu tiên cho người Việt: tự động track thời gian đọc báo điện tử để báo cáo hiệu quả làm việc.

Prompt copy-paste cho Claude:

/plan Tạo Chrome Extension "Focus Reader" theo yêu cầu:
- Mỗi khi user vào trang báo (vnexpress.net, tuoitre.vn, thanhnien.vn), bắt đầu đếm thời gian
- Hiển thị popup khi click icon extension, show tổng thời gian đã đọc hôm nay theo phút
- Lưu data vào local storage, reset mỗi ngày
- Design UI đơn giản màu xanh dương, font Roboto, có nút "Xem lịch sử tuần"
- Không cần permission nguy hiểm, chỉ cần access đến các trang báo cụ thể

Claude sẽ:

1. Tạo subagent viết manifest với host_permissions chỉ cho các domain báo Việt Nam
2. Tạo subagent viết content script detect window.onload và beforeunload để tính thời gian
3. Tạo subagent viết popup HTML/CSS với đồng hồ đẹp
4. Wire message passing để background script tổng hợp thời gian từ nhiều tab

Lệnh chạy thực tế:

claude --permission-mode plan "Tạo extension đọc báo như mô tả trên, đặt trong thư mục ./focus-reader"

LinkedIn Profile Highlighter cho Recruiter

Mô tả bằng tiếng Việt:

Tạo extension giúp tôi đánh dấu các profile LinkedIn có từ khóa "AI Engineer" hoặc "Machine Learning" trong headline. Khi vào trang profile, tự động highlight nền vàng phần headline nếu match keywords. Thêm nút "Save to CSV" trong popup để export danh sách profile đã xem kèm URL và tên.

Claude tự:

• Sinh content script với document.querySelectorAll() để tìm profile headlines
• Thêm logic filter keywords không phân biệt hoa thường
• Tạo popup với chức năng download CSV (dùng Blobs và URL.createObjectURL)
• Xử lý permissions chỉ cho linkedin.com trong manifest

YouTube Focus Mode (Chặn distraction)

Yêu cầu:

Extension chặn distractions trên YouTube: ẩn sidebar recommendations và comments, chỉ giữ lại video player và search bar. Thêm toggle on/off trong popup. Dùng content script để inject CSS ẩn elements.

Claude sẽ tạo:

• Content script inject CSS: ytd-watch-next-secondary-results-renderer và ytd-comments bị ẩn bằng display: none
• Popup với toggle switch gửi message đến content script để enable/disable CSS
• Background script lắng nghe toggle state và persist vào chrome.storage

Ứng dụng

Dành cho người không biết code (Non-coders)

• Founders validate idea: Tạo extension đơn giản để test giả thuyết thị trường (ví dụ: extension check giá crypto trên các sàn Remitano, Binance P2P) trước khi thuê dev viết bản production
• Marketers/Analysts: Build scraper cá nhân để thu thập data từ các trang e-commerce (Tiki, Shopee, Lazada) phục vụ phân tích giá đối thủ, không cần học Python hay Scrapy

Dành cho Product Managers

• Internal tools: Tạo extension cho team nội bộ để tự động điền form báo cáo, highlight thông tin quan trọng trên internal dashboard (ví dụ: đánh dấu đơn hàng có giá trị cao trên admin panel của hệ thống nội bộ), tiết kiệm thời gian thao tác lặp lại
• Prototyping: Demo ý tưởng sản phẩm cho stakeholder bằng extension thực chạy được thay vì Figma tĩnh

Dành cho Developers (muốn nhanh)

• Boilerplate generation: Sinh nhanh scaffold extension để làm POC (proof of concept), sau đó refactor lại code production nếu cần scale
• Automation cá nhân: Script lấy dữ liệu từ các trang government (Bộ Kế hoạch và Đầu tư, Tổng cục Thống kê) để báo cáo hàng tuần mà không cần viết code từ đầu

So sánh

Kết luận: Vibe coding không sinh ra extension production-grade cho 1 triệu users (cần review security và performance), nhưng là cách nhanh nhất để từ "ý tưởng" đến "chạy được" cho personal tools hoặc MVPs. Đối với non-coders, đây là cánh cửa duy nhất để tự động hoá workflow trình duyệt mà không cần học 6 tháng JavaScript.

Bài viết liên quan

Cùng cụm (Vibe Coding):

• Vibe Coding là gì? Người không biết code cũng build được app — Giải thích triết lý "mô tả bằng tiếng Việt → AI làm" và stochastic iteration
• Bài tập: Build app đầu tiên chỉ bằng mô tả tiếng Việt — Prompt template cơ bản cho người mới bắt đầu
• Build landing page chuyên nghiệp trong 1 giờ — Áp dụng vibe coding cho web static site

Đọc tiếp (Level 4 — Real Projects):

• Case study: Build SaaS trong 4 giờ với $20 — Nâng cấp từ extension đơn giản lên ứng dụng fullstack với database và payment
• Di chuyển Legacy Code: Strangler Fig Pattern với Claude — Kỹ thuật refactoring codebase lớn bằng AI (dành cho khi extension của bạn trở nên phức tạp)