jvinhit//lab

Search posts

Type to search across journal entries.

↑ ↓ navigate ↵ open esc close

Build Chrome Extensions · Part 10 — The Powerful APIs

tabs, scripting, contextMenus, commands (keyboard shortcuts) and notifications — the toolkit that turns a toy into a real product. With an interactive API explorer.

4 MIN READ

Bạn đã hiểu kiến trúc; phần này về tầm với. Năm API này là thứ cho extension điều khiển tab, tiêm hành vi theo yêu cầu, thêm mục menu, gán phím tắt, và báo cho user. Thạo chúng thì bạn xây được gần như mọi thứ.

Chuyển tab và “chạy” từng API bên dưới:

1. chrome.tabs — điều khiển trình duyệt

Truy vấn, tạo, cập nhật, tải lại, nhóm, và di chuyển tab:

const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
chrome.tabs.create({ url: "https://example.com" });
chrome.tabs.update(tab.id, { url: "https://other.com" });
chrome.tabs.onUpdated.addListener((id, info) => {
  if (info.status === "complete") onPageReady(id);
});

Đọc url/title của tab cần quyền "tabs" hoặc host permission khớp; chỉ tạo/cập nhật tab thì không. onUpdated là móc cho “user đã điều hướng”.

2. chrome.scripting — tiêm theo yêu cầu

Cách MV3 chạy code trong trang từ worker — thay cho tabs.executeScript của V2:

// run an inline function
await chrome.scripting.executeScript({
  target: { tabId },
  func: (color) => { document.body.style.background = color; },
  args: ["#c8ff00"], // arguments are serialized to the page
});

// or inject files
await chrome.scripting.executeScript({ target: { tabId }, files: ["content.js"] });
await chrome.scripting.insertCSS({ target: { tabId }, files: ["overlay.css"] });

Ghép với activeTab cho công cụ điều khiển bằng click mà không cần cảnh báo host (Phần 9). func chạy trong thế giới cô lập của trang, nên không bắt được biến của worker — truyền dữ liệu qua args.

3. chrome.contextMenus — hành động chuột phải

Thêm mục vào menu chuột phải của trình duyệt, giới hạn theo ngữ cảnh:

chrome.runtime.onInstalled.addListener(() => {
  chrome.contextMenus.create({
    id: "define",
    title: 'Define "%s"',     // %s = the selected text
    contexts: ["selection"],   // also: "page", "link", "image", "video"
  });
});
chrome.contextMenus.onClicked.addListener((info, tab) => {
  if (info.menuItemId === "define") lookup(info.selectionText);
});

Tạo menu trong onInstalled (không phải mỗi lần thức, kẻo lỗi trùng id). Thử ô chuột phải trong explorer.

4. chrome.commands — phím tắt

Power user yêu phím tắt. Khai báo trong manifest; Chrome cho user gán lại tại chrome://extensions/shortcuts:

{
  "commands": {
    "toggle-feature": {
      "suggested_key": { "default": "Ctrl+Shift+Y", "mac": "Command+Shift+Y" },
      "description": "Toggle the feature"
    },
    "_execute_action": { "suggested_key": { "default": "Ctrl+Shift+E" } }
  }
}
chrome.commands.onCommand.addListener((command) => {
  if (command === "toggle-feature") toggleFeature();
});

Lệnh đặc biệt _execute_action mở popup của bạn. Bấm Shift+Y trong tab commands của explorer để kích hoạt.

5. chrome.notifications — tới user

Thông báo cấp OS phong phú, cả khi không có UI nào mở:

chrome.notifications.create("sync-done", {
  type: "basic",
  iconUrl: "icon128.png",
  title: "Sync complete",
  message: "42 items updated.",
  buttons: [{ title: "View" }],
});
chrome.notifications.onButtonClicked.addListener((id, index) => {
  if (id === "sync-done" && index === 0) openResults();
});

Dùng tiết kiệm — mệt mỏi thông báo khiến user gỡ cài.

6. Ghép lại

Một extension “tô sáng” thực tế dùng tất cả: một click command hoặc action kích worker, worker dùng scripting để tiêm vào activeTab, một contextMenu cung cấp “tô sáng vùng chọn”, và một notification xác nhận khi xong — tất cả đọc cài đặt từ chrome.storage. Đó là cả series hoạt động như một hệ thống.

7. Bài tập

1. Bạn muốn đảo màu trang hiện tại khi user bấm icon, không cảnh báo cài đặt. API và quyền nào?

Lời giải

activeTab + scripting; trong action.onClicked, gọi chrome.scripting.executeScript với func inline.

2. contextMenus.create đôi khi ném “duplicate id”. Vì sao?

Lời giải

Bạn tạo nó mỗi lần worker thức. Chỉ tạo menu trong onInstalled.

3. Bạn truyền biến của worker vào func của executeScript qua closure và nó undefined trong trang. Sửa đi.

Lời giải

Hàm được serialize và chạy trong thế giới của trang — không bắt được biến worker. Truyền chúng qua mảng args.

Nâng cao:trong tab scripting của explorer, tiêm đảo màu, rồi reset — đó chính là vòng executeScript bạn sẽ ship.

Điểm chính

  • tabs điều khiển và quan sát tab; đọc URL cần quyền.
  • scripting tiêm JS/CSS theo yêu cầu — ghép với activeTab;
  • contextMenus phải tạo trong onInstalled.
  • commands thêm phím tắt gán lại được; _execute_action mở popup.
  • notifications tới user bất cứ lúc nào — dùng tiết kiệm.

Tiếp theo

Phần 11 — Công cụ & build chuyên nghiệp: vì sao file thuần không mở rộng được, và cách thiết lập Vite + CRXJS + TypeScript + React cho HMR, đóng gói, và trải nghiệm dev hiện đại, có kiểu.