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

Một trình đơn theo bối cảnh xuất hiện cho lượt nhấp thay thế (thường được gọi là nhấp chuột phải). Để tạo một 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"
  ],

Nếu muốn, hãy dùng phím "icons" nếu bạn muốn hiển thị biểu tượng bên cạnh một mục trong trình đơn. Trong ví dụ này, mục trình đơn cho tiện ích "Tìm kiếm của Google trên toàn cầu" 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 16x16.
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. Mẫu này cung cấp nhiều lựa chọn về 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 tiện ích đó thành một trình đơn mẹ như minh hoạ dưới đây:

Một trình đơn theo bối cảnh được lồng.
Hình 4: Một trình đơn theo bối cảnh và một trình đơn con được lồng.

Mẫu này 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 sẽ lặp lại các yêu cầu đó.

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'],
    });
  }
});