jvinhit//lab

Search posts

Type to search across journal entries.

↑ ↓ navigate ↵ open esc close

Build Chrome Extensions · Part 8 — UI Surfaces & the Action API

The popup, options page, side panel, and the toolbar action (badge, icon, title): choosing the right surface, wiring each to storage, and the action API for ambient status. With an interactive mock browser.

4 MIN READ

Extension của bạn có bốn nơi để hiện UI, mỗi nơi có vòng đời và mục đích khác nhau. Chọn đúng là một quyết định UX mà user cảm nhận ngay.

Bấm icon thanh công cụ (🧩) và các nút bên dưới để mở từng bề mặt:

1. Popup

Bảng nhỏ mở khi user bấm icon. Nó chỉ là một trang HTML:

{ "action": { "default_popup": "popup.html", "default_title": "My Extension" } }

Nhớ từ Phần 3: popup phù du — bị hủy khi đóng, nên không giữ state. Coi nó như view thuần trên chrome.storage:

// popup.js
const { enabled } = await chrome.storage.local.get("enabled");
toggle.checked = enabled;
toggle.addEventListener("change", () =>
  chrome.storage.local.set({ enabled: toggle.checked })
);

Giữ popup nhỏ và nhanh — chúng nên mở tức thì.

2. Trang tùy chọn

Một trang đầy đủ, thường trú cho cài đặt chi tiết, tài khoản, hay nhập/xuất. Hai kiểu:

{
  "options_page": "options.html",
  "options_ui": { "page": "options.html", "open_in_tab": true }
}

options_ui (nhúng) là lựa chọn hiện đại; đặt open_in_tab: true cho một tab đầy đủ. Mở nó theo lập trình — thường từ link “Settings” trong popup:

chrome.runtime.openOptionsPage();

Không như popup, options page không phù du, nên là nhà đúng cho form và tương tác nặng hơn.

3. Bảng bên

Mới trong MV3: một bảng neo cạnh trang khi user duyệt. Hoàn hảo cho ứng dụng ghi chú, trợ lý chat, và công cụ tra cứu:

{
  "side_panel": { "default_path": "sidepanel.html" },
  "permissions": ["sidePanel"]
}
// open it on action click instead of a popup
chrome.sidePanel.setPanelBehavior({ openPanelOnActionClick: true });

Khác biệt chính so với popup: nó bền qua điều hướng, cho bạn một không gian làm việc lâu dài. Bật/tắt nó trong mock ở trên.

4. API action — trạng thái nền

Đôi khi bạn không cần mở gì; chỉ muốn báo trạng thái ngay trên icon. API action điều khiển badge, icon, và tooltip:

chrome.action.setBadgeText({ text: "3" });              // unread count
chrome.action.setBadgeBackgroundColor({ color: "#d33" });
chrome.action.setTitle({ title: "3 new items" });        // tooltip
chrome.action.setIcon({ path: "icon-active.png" });      // dynamic icon

Badge tuyệt cho con số (chưa đọc, đã chặn, item tìm thấy). State theo từng tab khả thi bằng cách truyền { tabId } vào bất kỳ cái nào. Bấm “setBadgeText (+1)” trong demo.

Nếu không đặt default_popup, bấm icon sẽ kích chrome.action.onClicked thay vì mở — dùng cho hành động một-bấm.

5. Chọn đúng bề mặt

CầnDùng
Bật/tắt nhanh khi bấmPopup
Không gian làm việc bền khi duyệtSide panel
Cài đặt chi tiết / formOptions page
Con số/trạng thái không cần bảngAction badge
Hành động một-bấm, không UIaction.onClicked (omit popup)

Tất cả đọc/ghi cùng chrome.storage, nên tự động nhất quán (Phần 7).

6. Tạo kiểu nhất quán

Popup, options, và side panel là trang HTML thường — chia sẻ một file CSS và một design system nhỏ giữa chúng. Đặt chiều rộng cố định cho body popup (Chrome co popup theo nội dung; 300–400px là điển hình). Tôn trọng tùy chọn sáng/tối của OS để có cảm giác bản địa.

7. Bài tập

1. Bạn muốn một trợ lý chat ở mở khi user đọc các bài khác nhau. Bề mặt nào?

Lời giải

Side panel — nó bền qua điều hướng, không như popup.

2. Toggle popup reset mỗi lần mở lại. Vì sao, và sửa thế nào?

Lời giải

Popup phù du và không giữ state. Đọc giá trị từ chrome.storage khi mở và ghi khi đổi.

3. Bạn muốn icon hiện số tracker đã chặn trên tab hiện tại. API nào, và làm sao theo từng tab?

Lời giải

chrome.action.setBadgeText({ text, tabId }) — truyền tabId giới hạn badge cho tab đó.

Nâng cao:trong mock, mở popup, bấm “Open full settings”, và để ý popup đóng khi options page tiếp quản — mô phỏng luồng đó trong code thật bằng openOptionsPage().

Điểm chính

  • Popup = điều khiển nhanh, phù du; coi như view trên storage.
  • Side panel = không gian làm việc bền khi duyệt.
  • Options page = trang cài đặt đầy đủ, không phù du.
  • API action = badge, icon, tooltip cho trạng thái nền; bỏ popup cho hành động một-bấm.
  • Mọi bề mặt đồng bộ qua chrome.storage.

Tiếp theo

Phần 9 — Quyền & bảo mật: mô hình quyền, activeTab, quyền tùy chọn và yêu cầu lúc chạy, host permissions, content security policy, và viết extension mà reviewer tin tưởng.