Xây dựng trình đơn theo bối cảnh

Trình đơn theo bối cảnh xuất hiện cho hoạt động nhấp thay thế (thường được gọi là nhấp chuột phải) của chuột. Để xây dựng trình đơn theo bối cảnh, trước tiên, hãy thêm quyền "contextMenus" vào tệp manifest.json.

manifest.json:

  "permissions": [
    "contextMenus"
  ],

Bạn có thể dùng phím "icons" nếu muốn biểu tượng bên cạnh một mục trong trình đơn xuất hiện. Trong ví dụ này, mục trong trình đơn cho cụm từ "Tìm kiếm toàn cầu trên Google" phần mở rộng sử dụng biểu tượng 16 x 16.

Một mục trong trình đơn theo bối cảnh có biểu tượng 16 x 16.
Một mục trong trình đơn theo bối cảnh có biểu tượng 16 x 16.

Phần còn lại của ví dụ này được lấy từ mẫu trình đơn theo bối cảnh của Google Tìm kiếm trên toàn cầu, trong đó cung cấp nhiều lựa chọn trên trình đơn theo bối cảnh. Khi một tiện ích chứa nhiều trình đơn theo bối cảnh, Chrome sẽ tự động thu gọn các trình đơn đó thành một trình đơn chính như minh hoạ dưới đây:

Một trình đơn theo bối cảnh lồng nhau.
Hình 4: Trình đơn theo bối cảnh và một trình đơn phụ lồng nhau.

Mẫu cho thấy điều này bằng cách gọi contextMenus.create() trong trình chạy dịch vụ tiện ích. Các mục trong trình đơn phụ được nhập từ tệp locales.js. Sau đó, runtime.onInstalled lặp lại các lượt chuyển đổi đó.

service-worker.js:

const tldLocales = {
  'com.au': 'Australia',
  'com.br': 'Brazil',
  ...
}

chrome.runtime.onInstalled.addListener(async () => {
  for (let [tld, locale] of Object.entries(tldLocales)) {
    chrome.contextMenus.create({
      id: tld,
      title: locale,
      type: 'normal',
      contexts: ['selection'],
    });
  }
});