Build Chrome Extensions · Part 1 — The Manifest V3 Mental Model & Your First Extension

Start from zero: what a browser extension really is, the four moving parts, the Manifest V3 model, and shipping a working "Hello World" extension you load unpacked in under 10 minutes. With a live anatomy explorer.

JUN 27, 2026 4 MIN READ

Đây là Phần 1 của series 12 bài đưa bạn từ “tôi muốn làm extension trình duyệt” đến tự tin thiết kế, dựng, debug và xuất bản lên Chrome Web Store. Mỗi phần đều có config thật (setup → demo), một trình mô phỏng tương tác, và bài tập.

Ta nhắm Manifest V3 (MV3) — định dạng hiện hành và bắt buộc cho extension Chrome mới. Phần lớn kiến thức áp dụng cho Edge, Brave, và (với chỉnh sửa nhỏ) Firefox.

1. Extension thực chất là gì

Một extension chỉ là công nghệ web — HTML, CSS, JavaScript — đóng gói cùng một file manifest, được cấp quyền đặc biệt để tương tác với trình duyệt và trang web qua API chrome.*.

Phần giải phóng là đây: nếu bạn dựng được trang web, bạn đã biết 80% việc làm extension. 20% mới là kiến trúc (mỗi phần chạy ở đâu) và API chrome.* (bạn có thêm quyền năng gì).

2. Bốn bộ phận chính

Gần như mọi extension là tổ hợp của bốn phần, mỗi phần chạy trong một ngữ cảnh khác nhau:

Part	Where it runs	Job
Manifest	— (a JSON file)	the blueprint: name, version, permissions, which files are what
Action + Popup	the toolbar icon & a tiny window	quick UI when the user clicks your icon
Content script	inside a web page	read/modify the page’s DOM
Background service worker	off-screen, event-driven	the “brain”: reacts to events, coordinates everything

Nhận thức then chốt làm rối mọi người mới: chúng chạy trong các ngữ cảnh tách biệt, cô lập, và không thể gọi trực tiếp hàm của nhau. Chúng giao tiếp bằng truyền tin nhắn (Phần 6).

Bấm vào từng phần trong explorer để xem nó ở đâu và làm gì:

3. Manifest — file bắt buộc duy nhất

Mỗi extension có đúng một manifest.json ở gốc. Đó là điểm vào Chrome đọc để hiểu extension của bạn. Manifest MV3 tối thiểu hợp lệ:

{
  "manifest_version": 3,
  "name": "Hello World",
  "version": "1.0.0",
  "description": "My first extension",
  "action": {
    "default_popup": "popup.html"
  }
}

Ba key bắt buộc: manifest_version (phải là 3), name, và version. Mọi thứ khác khai báo một khả năng. Ta mổ xẻ manifest đầy đủ ở Phần 2.

4. Dựng “Hello World” — từng bước

Tạo thư mục hello-world/ với ba file.

manifest.json:

{
  "manifest_version": 3,
  "name": "Hello World",
  "version": "1.0.0",
  "description": "Says hello and changes the page background.",
  "action": { "default_popup": "popup.html" },
  "permissions": ["activeTab", "scripting"]
}

popup.html — UI hiện khi bấm icon:

<!DOCTYPE html>
<html>
  <body style="width: 200px; font-family: system-ui; padding: 12px;">
    <h3>Hello 👋</h3>
    <button id="paint">Paint this page</button>
    <script src="popup.js"></script>
  </body>
</html>

popup.js — dùng API chrome.* để tiêm code vào tab hiện tại:

document.getElementById('paint').addEventListener('click', async () => {
  const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
  await chrome.scripting.executeScript({
    target: { tabId: tab.id },
    func: () => { document.body.style.background = '#c8ff00'; },
  });
});

Đó là một extension hoàn chỉnh, hữu ích: bấm icon → bấm nút → trang hiện tại chuyển màu lime.

5. Nạp nó — vòng lặp dev

Bạn không cần bước build hay Web Store để chạy cục bộ:

Mở chrome://extensions.
Bật Developer mode (góc trên phải).
Bấm Load unpacked và chọn thư mục hello-world/.
Icon 🧩 xuất hiện — ghim lại, bấm, thử nút.

Vòng lặp dev: sửa file → bấm nút reload ⟳ trên card extension ở chrome://extensions → thử lại. Với thay đổi popup/content thường phải reload cả trang.

Mẹo debug: mỗi ngữ cảnh có DevTools riêng. Chuột phải popup → Inspect. Với service worker, bấm link “service worker” trên card. Với content script, dùng console DevTools bình thường của trang.

6. Bài tập

1. Dựng và nạp extension Hello World ở trên; xác nhận nút tô màu tab đang mở.

2. Không chạy, nêu ba key manifest bắt buộc.

Lời giải

manifest_version, name, version.

3. Vì sao popup.js không gọi trực tiếp được hàm định nghĩa trong content.js?

Lời giải

Chúng chạy trong các ngữ cảnh thực thi tách biệt, cô lập; giao tiếp giữa ngữ cảnh phải qua truyền tin nhắn (Phần 6).

Nâng cao:đổi màu tô, rồi thêm nút thứ hai để reset nền về trắng.

Điểm chính

Extension là công nghệ web + manifest + quyền chrome.*.
Bốn phần trong ngữ cảnh cô lập: manifest, action/popup, content script, service worker nền.
manifest.json là file bắt buộc duy nhất; chỉ manifest_version/name/version là bắt buộc.
Vòng lặp dev là Load unpacked → sửa → reload — không cần build để bắt đầu.

Phần 2 — Manifest chuyên sâu: mọi key quan trọng — action, permissions vs host_permissions, content_scripts, background, icons, web_accessible_resources — và một trình dựng manifest tương tác để thấy đúng từng dòng mở khóa điều gì.