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

Một trình đơn theo bối cảnh sẽ xuất hiện cho thao tác nhấp thay thế (thường được gọi là nhấp chuột phải) của chuột. Trang này mô tả cách triển khai một trình đơn theo bối cảnh. Để biết danh sách đầy đủ các thành phần API có liên quan, hãy xem browser.contextMenu.

Để 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"
  ],

Bạn có thể dùng khoá "icons" nếu muốn hiện biểu tượng bên cạnh một mục trong trình đơn. Trong ví dụ này, mục trong trình đơn cho tiện ích "Global Google Search" (Google Tìm kiếm toàn cầu) dùng 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 trong 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 mẹ duy nhất như trong hình sau:

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 bước này.

service-worker.js:

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

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