chrome.sidePanel

Mô tả

Sử dụng API chrome.sidePanel để lưu trữ nội dung trong bảng điều khiển bên của trình duyệt cùng với nội dung chính của một trang web.

Quyền

sidePanel

Để sử dụng Side Panel API, hãy thêm quyền "sidePanel" vào tệp manifest của tiện ích:

manifest.json:

{
  "name": "My side panel extension",
  ...
  "permissions": [
    "sidePanel"
  ]
}

Phạm vi cung cấp

Chrome 114 trở lên MV3 trở lên

Khái niệm và cách sử dụng

Side Panel API cho phép các tiện ích hiển thị giao diện người dùng của riêng chúng trong bảng điều khiển bên, mang đến trải nghiệm liên tục bổ sung cho hành trình duyệt web của người dùng.

Trình đơn thả xuống ở bảng điều khiển bên
Giao diện người dùng bảng điều khiển bên của trình duyệt Chrome.

Một số tính năng bao gồm:

  • Bảng điều khiển bên vẫn mở khi bạn di chuyển giữa các thẻ (nếu bạn đặt chế độ này).
  • Tính năng này chỉ có thể dùng được trên một số trang web cụ thể.
  • Là một trang tiện ích, bảng điều khiển bên có quyền truy cập vào tất cả các API của Chrome.
  • Trong phần cài đặt của Chrome, người dùng có thể chỉ định bên mà bảng điều khiển sẽ xuất hiện.

Trường hợp sử dụng

Các phần sau đây minh hoạ một số trường hợp sử dụng phổ biến cho Side Panel API. Hãy xem Các mẫu tiện ích để biết các ví dụ đầy đủ về tiện ích.

Hiển thị cùng một bảng điều khiển bên trên mọi trang web

Bạn có thể đặt bảng điều khiển bên ban đầu từ thuộc tính "default_path" trong khoá "side_panel" của tệp kê khai để hiển thị cùng một bảng điều khiển bên trên mọi trang web. Đường dẫn này phải trỏ đến một đường dẫn tương đối trong thư mục tiện ích.

manifest.json:

{
  "name": "My side panel extension",
  ...
  "side_panel": {
    "default_path": "sidepanel.html"
  }
  ...
}

sidepanel.html:

<!DOCTYPE html>
<html>
  <head>
    <title>My Sidepanel</title>
  </head>
  <body>
    <h1>All sites sidepanel extension</h1>
    <p>This side panel is enabled on all sites</p>
  </body>
</html>

Bật bảng điều khiển bên trên một trang web cụ thể

Tiện ích có thể dùng sidepanel.setOptions() để bật bảng điều khiển bên trên một thẻ cụ thể. Ví dụ này sử dụng chrome.tabs.onUpdated() để theo dõi mọi nội dung cập nhật được thực hiện đối với thẻ. Thao tác này kiểm tra xem URL có phải là www.google.com hay không và bật bảng điều khiển bên. Nếu không, chế độ này sẽ tắt.

service-worker.js:

const GOOGLE_ORIGIN = 'https://www.google.com';

chrome.tabs.onUpdated.addListener(async (tabId, info, tab) => {
  if (!tab.url) return;
  const url = new URL(tab.url);
  // Enables the side panel on google.com
  if (url.origin === GOOGLE_ORIGIN) {
    await chrome.sidePanel.setOptions({
      tabId,
      path: 'sidepanel.html',
      enabled: true
    });
  } else {
    // Disables the side panel on all other sites
    await chrome.sidePanel.setOptions({
      tabId,
      enabled: false
    });
  }
});

Khi người dùng tạm thời chuyển sang một thẻ mà bảng điều khiển bên không được bật, bảng điều khiển bên sẽ bị ẩn. Hộp thoại này sẽ tự động xuất hiện lại khi người dùng chuyển sang một thẻ mà hộp thoại này đã từng mở.

Khi người dùng chuyển đến một trang web không bật bảng điều khiển bên, bảng điều khiển bên sẽ đóng và tiện ích sẽ không xuất hiện trong trình đơn thả xuống của bảng điều khiển bên.

Để xem ví dụ đầy đủ, hãy xem mẫu Bảng điều khiển bên dành riêng cho thẻ.

Mở bảng điều khiển bên bằng cách nhấp vào biểu tượng trên thanh công cụ

Nhà phát triển có thể cho phép người dùng mở bảng điều khiển bên khi họ nhấp vào biểu tượng thanh công cụ thao tác bằng sidePanel.setPanelBehavior(). Trước tiên, hãy khai báo khoá "action" trong tệp kê khai:

manifest.json:

{
  "name": "My side panel extension",
  ...
  "action": {
    "default_title": "Click to open panel"
  },
  ...
}

Bây giờ, hãy thêm mã này vào ví dụ trước:

service-worker.js:

const GOOGLE_ORIGIN = 'https://www.google.com';

// Allows users to open the side panel by clicking on the action toolbar icon
chrome.sidePanel
  .setPanelBehavior({ openPanelOnActionClick: true })
  .catch((error) => console.error(error));
...

Mở bảng điều khiển bên theo cách lập trình khi người dùng tương tác

Chrome 116 giới thiệu sidePanel.open(). API này cho phép các tiện ích mở rộng mở bảng điều khiển bên thông qua một cử chỉ của người dùng tiện ích mở rộng, chẳng hạn như nhấp vào biểu tượng thao tác. Hoặc một hoạt động tương tác của người dùng trên trang tiện ích hoặc tập lệnh nội dung, chẳng hạn như nhấp vào một nút. Để xem bản minh hoạ đầy đủ, hãy xem tiện ích mẫu Mở bảng điều khiển bên.

Đoạn mã sau đây cho biết cách mở một bảng điều khiển bên chung trên cửa sổ hiện tại khi người dùng nhấp vào một trình đơn theo bối cảnh. Khi sử dụng sidePanel.open(), bạn phải chọn bối cảnh mà trong đó thành phần này sẽ mở ra. Sử dụng