Build Chrome Extensions · Part 12 — Publish, Auto-Update, Cross-Browser & Capstone

Package and upload to the Chrome Web Store, pass review, version and auto-update, port to Firefox and Edge, and build a capstone "Reading Ruler" extension that ties the whole series together. With an interactive ship checklist.

JUL 26, 2026 4 MIN READ

Bạn đã xây mô hình tư duy, kiến trúc, mọi API, và bộ công cụ hiện đại. Bước cuối là đưa extension tới tay user và giữ nó ở đó. Rồi ta ráp mọi thứ thành một capstone thật.

Đánh dấu checklist phát hành bên dưới và nghiên cứu bản đồ capstone:

1. Đóng gói

Chạy build production (Phần 11), rồi nén nội dung của dist/ — không phải thư mục cha:

npm run build
cd dist && zip -r ../my-extension.zip . && cd ..

Gốc của zip phải chứa manifest.json trực tiếp. Kiểm tra số phiên bản cao hơn mọi phiên bản đã phát hành — store từ chối phiên bản bằng hoặc thấp hơn.

2. Chrome Web Store

Đăng ký tài khoản dev — phí một lần $5 cho không giới hạn extension.
Tạo item mới và tải zip lên.
Điền listing: tên, mô tả, danh mục, icon 128×128, ảnh chụp, và ô quảng bá.
Thêm chính sách bảo mật nếu chạm dữ liệu user (bắt buộc cho nhiều quyền).
Giải thích từng quyền trong ghi chú duyệt.
Gửi duyệt — có thể mất từ vài giờ đến vài ngày.

Nguyên nhân từ chối lớn nhất là quyền rộng không lý do và code minify không giải thích — đều tránh được với bài học Phần 9.

3. Đánh phiên bản & tự cập nhật

Chrome tự cập nhật extension đã cài. Để ship cập nhật, tăng version, build lại, và tải zip mới:

{ "version": "1.1.0" }

Dùng nhánh reason === "update" của onInstalled để chạy di trú dữ liệu giữa các phiên bản (Phần 7). User nhận cập nhật tự động trong vài giờ — họ không cần làm gì.

4. Đa trình duyệt

Edge chạy Chromium — cùng zip chạy trên store Edge Add-ons, thường không đổi gì.
Firefox hỗ trợ MV3 nhưng dùng namespace browser.* (dựa promise) và có vài khác biệt API. webextension-polyfill cho bạn viết browser.* khắp nơi và chạy cả hai.

import browser from "webextension-polyfill";
const { theme } = await browser.storage.local.get("theme"); // works in Chrome + Firefox

Viết theo API promise browser.* từ đầu thì bạn giữ tính di động.

5. Capstone — “Reading Ruler”

Hãy gắn cả series vào một extension: một thước đọc tô sáng dòng dưới con trỏ, giúp tập trung khi đọc. Mỗi mảnh ánh xạ tới một phần:

Mảnh	Làm	Parts
Popup	bật/tắt, chọn màu & chiều cao	8, 7
Content script	vẽ overlay thước trong Shadow DOM, theo chuột	4, 9
Service worker	xử lý command + context menu, chuyển tiếp toggle	5, 6, 10
Options page	độ mờ, preset, gợi ý phím tắt	8
`chrome.storage` + `onChanged`	nguồn sự thật duy nhất, phản ứng trực tiếp	7
`commands` + action badge	`Ctrl+Shift+R` bật/tắt; badge hiện trạng thái	10, 8

Luồng: popup ghi { enabled: true, color, height } vào storage → onChanged kích hoạt → content script trong mọi tab mở hiện/cập nhật thước → badge action phản ánh trạng thái. Không phát thủ công, không state worker thường trú — đúng các mẫu series này dạy.

Bản đồ capstone trong demo hiện cả sáu mảnh và phần nào mỗi cái dựa vào.

6. Đi đâu tiếp

declarativeNetRequest để chặn quảng cáo/tracker mà không đọc mọi request.
Tài liệu offscreen cho API DOM (âm thanh, clipboard) mà worker không dùng được.
chrome.identity cho luồng OAuth.
Chính sách doanh nghiệp và khu vực storage managed cho triển khai tổ chức.

Mỗi cái dựng trực tiếp trên nền tảng bạn đã có.

7. Bài tập

1. Bạn tải phiên bản 1.0.0, sửa bug, và tải lại 1.0.0. Store từ chối. Vì sao?

Lời giải

Phiên bản phải tăng. Tăng lên 1.0.1 và tải lại.

2. Extension chạy trong Chrome nhưng chrome.storage là undefined trong Firefox. Cách sửa sạch nhất?

Lời giải

Dùng webextension-polyfill và API promise browser.* để cùng code chạy cả hai.

3. Trong capstone, user bật thước trong popup nhưng các tab đã mở không cập nhật. Cơ chế nào làm chúng phản ứng mà không cần messaging thủ công?

Lời giải

Mỗi content script lắng nghe chrome.storage.onChanged và render lại khi cài đặt đổi.

Nâng cao:hoàn thành checklist phát hành trong demo tới 100% — đó là trình tự đúng nghĩa để đưa bất kỳ extension nào lên live.

Điểm chính

Ship dist/ đã nén với manifest.json ở gốc và version luôn tăng.
Vượt duyệt bằng cách giải thích từng quyền và giữ bộ gọn.
Chrome tự cập nhật user; chạy di trú ở nhánh update.
Tới Edge miễn phí; dùng webextension-polyfill cho Firefox.
Một extension thật chỉ là tất cả mảnh của series hoạt động như một hệ thống.

Hoàn thành series

Đó là toàn bộ hành trình — từ “extension là gì” tới một sản phẩm đã phát hành, đa trình duyệt, có công cụ chuyên nghiệp. Giờ bạn có mô hình tư duy và các mẫu cụ thể để xây gần như mọi thứ trong trình duyệt. Đi ship gì đó đi.