chrome.pageAction

Nội dung mô tả

Sử dụng API chrome.pageAction để đặt các biểu tượng vào thanh công cụ chính của Google Chrome, ở bên phải thanh địa chỉ. Hành động trên trang thể hiện những hành động có thể thực hiện trên trang hiện tại, nhưng không áp dụng cho tất cả các trang. Các thao tác trên trang sẽ chuyển sang màu xám khi không hoạt động.

Phạm vi cung cấp

≤ MV2

Một số ví dụ:

  • Đăng ký theo dõi nguồn cấp dữ liệu RSS của trang này
  • Tạo bản trình chiếu từ ảnh của trang này

Biểu tượng RSS trong ảnh chụp màn hình sau đây minh hoạ một thao tác trên trang cho phép bạn đăng ký nguồn cấp dữ liệu RSS cho trang hiện tại.

Các thao tác trên trang bị ẩn sẽ chuyển sang màu xám. Ví dụ: Nguồn cấp dữ liệu RSS dưới đây sẽ chuyển sang màu xám vì bạn không thể đăng ký nguồn cấp dữ liệu đó cho trang hiện tại:

Hãy cân nhắc sử dụng một thao tác trên trình duyệt để người dùng luôn có thể tương tác với tiện ích của bạn.

Tệp kê khai

Hãy đăng ký thao tác trên trang trong tệp kê khai tiện ích như sau:

{
  "name": "My extension",
  ...
  "page_action": {
    "default_icon": {                    // optional
      "16": "images/icon16.png",           // optional
      "24": "images/icon24.png",           // optional
      "32": "images/icon32.png"            // optional
    },
    "default_title": "Google Mail",      // optional; shown in tooltip
    "default_popup": "popup.html"        // optional
  },
  ...
}

Vì các thiết bị có hệ số tỷ lệ ít phổ biến hơn như 1,5x hoặc 1,2x đang trở nên phổ biến hơn, nên bạn nên cung cấp nhiều kích thước cho biểu tượng của mình. Chrome sẽ chọn mô-đun gần nhất và điều chỉnh tỷ lệ để lấp đầy khoảng trống 16 nhúng. Điều này cũng đảm bảo rằng nếu kích thước hiển thị biểu tượng từng thay đổi, thì bạn không cần làm gì thêm để cung cấp các biểu tượng khác nhau! Tuy nhiên, nếu sự khác biệt về kích thước quá lớn, việc điều chỉnh tỷ lệ này có thể khiến biểu tượng bị mất chi tiết hoặc trông không rõ nét.

Cú pháp cũ để đăng ký biểu tượng mặc định vẫn được hỗ trợ:

{
  "name": "My extension",
  ...
  "page_action": {
    ...
    "default_icon": "images/icon32.png"  // optional
    // equivalent to "default_icon": { "32": "images/icon32.png" }
  },
  ...
}

Các phần của giao diện người dùng

Giống như các thao tác trên trình duyệt, các thao tác trên trang có thể có biểu tượng, chú giải công cụ và cửa sổ bật lên. Tuy nhiên, chúng không thể có huy hiệu. Ngoài ra, các tác vụ trên trang có thể chuyển sang màu xám. Bạn có thể tìm thông tin về các biểu tượng, chú giải công cụ và cửa sổ bật lên bằng cách đọc về giao diện người dùng thao tác trên trình duyệt.

Bạn làm cho một thao tác trên trang xuất hiện và chuyển sang màu xám bằng cách sử dụng phương thức pageAction.showpageAction.hide tương ứng. Theo mặc định, tác vụ trên trang sẽ chuyển sang màu xám. Khi hiện biểu tượng, bạn chỉ định thẻ mà biểu tượng sẽ xuất hiện. Biểu tượng này vẫn hiển thị cho đến khi thẻ được đóng hoặc bắt đầu hiển thị một URL khác (chẳng hạn như vì người dùng nhấp vào một đường liên kết).

Mẹo

Để tạo ấn tượng tốt nhất về mặt hình ảnh, hãy làm theo các nguyên tắc sau:

  • Hãy sử dụng thao tác trên trang cho những tính năng chỉ phù hợp với một vài trang.
  • Không sử dụng thao tác trên trang cho những tính năng phù hợp với hầu hết các trang. Thay vào đó, hãy sử dụng thao tác trên trình duyệt.
  • Không liên tục tạo ảnh động cho biểu tượng. Điều đó chỉ gây khó chịu thôi.

Loại

ImageDataType

Dữ liệu pixel cho một hình ảnh. Phải là một đối tượng ImageData (ví dụ: từ phần tử canvas).

Loại

ImageData

TabDetails

Chrome 88 trở lên

Thuộc tính

  • tabId

    số không bắt buộc

    Mã của thẻ cần truy vấn trạng thái. Nếu không có tab nào được chỉ định, trạng thái không phải tab cụ thể sẽ được trả về.

Phương thức

getPopup()

Cam kết
chrome.pageAction.getPopup(
  details: TabDetails,
  callback?: function,
)

Lấy tài liệu html được thiết lập làm cửa sổ bật lên cho thao tác trên trang này.

Tham số

  • chi tiết
  • số gọi lại

    hàm không bắt buộc

    Tham số callback sẽ có dạng như sau:

    (result: string)=>void

    • kết quả

      string

Giá trị trả về

  • Hứa hẹn<string>

    Chrome 101 trở lên

    Lời hứa chỉ được hỗ trợ cho Manifest V3 trở lên, các nền tảng khác cần sử dụng lệnh gọi lại.

getTitle()

Cam kết
chrome.pageAction.getTitle(
  details: TabDetails,
  callback?: function,
)

Lấy tiêu đề của hành động trên trang.

Tham số

  • chi tiết
  • số gọi lại

    hàm không bắt buộc

    Tham số callback sẽ có dạng như sau:

    (result: string)=>void

    • kết quả

      string

Giá trị trả về

  • Hứa hẹn<string>

    Chrome 101 trở lên

    Lời hứa chỉ được hỗ trợ cho Manifest V3 trở lên, các nền tảng khác cần sử dụng lệnh gọi lại.

hide()

Cam kết
chrome.pageAction.hide(
  tabId: number,
  callback?: function,
)

Ẩn hành động trên trang. Các thao tác trên trang đã ẩn vẫn xuất hiện trên thanh công cụ của Chrome nhưng có màu xám.

Tham số

  • tabId

    number

    Mã của thẻ mà bạn muốn sửa đổi hành động trên trang.

  • số gọi lại

    hàm không bắt buộc

    Chrome 67 trở lên

    Tham số callback sẽ có dạng như sau:

    ()=>void

Giá trị trả về

  • Promise<void>

    Chrome 101 trở lên

    Lời hứa chỉ được hỗ trợ cho Manifest V3 trở lên, các nền tảng khác cần sử dụng lệnh gọi lại.

setIcon()

Cam kết
chrome.pageAction.setIcon(
  details: object,
  callback?: function,
)

Đặt biểu tượng cho tác vụ trang. Biểu tượng có thể được chỉ định làm đường dẫn đến tệp hình ảnh hoặc dữ liệu pixel từ một phần tử canvas hoặc làm từ điển của một trong hai phần tử đó. Bạn phải chỉ định thuộc tính path (đường dẫn) hoặc imageData.

Tham số

  • chi tiết

    đối tượng

    • iconIndex

      số không bắt buộc

      Không dùng nữa. Đối số này sẽ bị bỏ qua.

    • imageData

      ImageData|đối tượng không bắt buộc

      Đối tượng ImageData hoặc từ điển {size -> ImageData} biểu thị biểu tượng cần đặt. Nếu biểu tượng được chỉ định làm từ điển, thì hình ảnh thực tế được sử dụng sẽ được chọn tuỳ thuộc vào mật độ pixel của màn hình. Nếu số pixel hình ảnh vừa với một đơn vị không gian màn hình bằng scale, thì hình ảnh có kích thước scale * n sẽ được chọn, trong đó n là kích thước của biểu tượng trong giao diện người dùng. Bạn phải chỉ định ít nhất một hình ảnh. Lưu ý rằng 'details.imageData = foo' tương đương với 'details.imageData = {'16': foo}'

    • path

      chuỗi|đối tượng không bắt buộc

      Đường dẫn hình ảnh tương đối hoặc từ điển {size -> tương đối đường dẫn hình ảnh} trỏ đến biểu tượng cần đặt. Nếu biểu tượng được chỉ định làm từ điển, thì hình ảnh thực tế được sử dụng sẽ được chọn tuỳ thuộc vào mật độ pixel của màn hình. Nếu số pixel hình ảnh vừa với một đơn vị không gian màn hình bằng scale, thì hình ảnh có kích thước scale * n sẽ được chọn, trong đó n là kích thước của biểu tượng trong giao diện người dùng. Bạn phải chỉ định ít nhất một hình ảnh. Lưu ý rằng "details.path = foo" tương đương với 'details.path = {'16': foo}'

    • tabId

      number

      Mã của thẻ mà bạn muốn sửa đổi hành động trên trang.

  • số gọi lại

    hàm không bắt buộc

    Tham số callback sẽ có dạng như sau:

    ()=>void

Giá trị trả về

  • Promise<void>

    Chrome 101 trở lên

    Lời hứa chỉ được hỗ trợ cho Manifest V3 trở lên, các nền tảng khác cần sử dụng lệnh gọi lại.

setPopup()

Cam kết
chrome.pageAction.setPopup(
  details: object,
  callback?: function,
)

Đặt tài liệu HTML được mở dưới dạng cửa sổ bật lên khi người dùng nhấp vào biểu tượng của hành động trên trang.

Tham số

  • chi tiết

    đối tượng

    • cửa sổ bật lên

      string

      Đường dẫn tương đối đến tệp HTML sẽ hiển thị trong cửa sổ bật lên. Nếu bạn đặt chính sách này thành chuỗi trống (''), thì sẽ không có cửa sổ bật lên nào hiển thị.

    • tabId

      number

      Mã của thẻ mà bạn muốn sửa đổi hành động trên trang.

  • số gọi lại

    hàm không bắt buộc

    Chrome 67 trở lên

    Tham số callback sẽ có dạng như sau:

    ()=>void

Giá trị trả về

  • Promise<void>

    Chrome 101 trở lên

    Lời hứa chỉ được hỗ trợ cho Manifest V3 trở lên, các nền tảng khác cần sử dụng lệnh gọi lại.

setTitle()

Cam kết
chrome.pageAction.setTitle(
  details: object,
  callback?: function,
)

Đặt tiêu đề cho hành động trên trang. Điều này được hiển thị trong chú giải công cụ trên tác vụ trang.

Tham số

  • chi tiết

    đối tượng

    • tabId

      number

      Mã của thẻ mà bạn muốn sửa đổi hành động trên trang.

    • title

      string

      Chuỗi chú thích.

  • số gọi lại

    hàm không bắt buộc

    Chrome 67 trở lên

    Tham số callback sẽ có dạng như sau:

    ()=>void

Giá trị trả về

  • Promise<void>

    Chrome 101 trở lên

    Lời hứa chỉ được hỗ trợ cho Manifest V3 trở lên, các nền tảng khác cần sử dụng lệnh gọi lại.

show()

Cam kết
chrome.pageAction.show(
  tabId: number,
  callback?: function,
)

Hiển thị hành động trên trang. Hành động trên trang sẽ hiển thị mỗi khi thẻ được chọn.

Tham số

  • tabId

    number

    Mã của thẻ mà bạn muốn sửa đổi hành động trên trang.

  • số gọi lại

    hàm không bắt buộc

    Chrome 67 trở lên

    Tham số callback sẽ có dạng như sau:

    ()=>void

Giá trị trả về

  • Promise<void>

    Chrome 101 trở lên

    Lời hứa chỉ được hỗ trợ cho Manifest V3 trở lên, các nền tảng khác cần sử dụng lệnh gọi lại.

Sự kiện

onClicked

chrome.pageAction.onClicked.addListener(
  callback: function,
)

Được kích hoạt khi người dùng nhấp vào một biểu tượng hành động trên trang. Sự kiện này sẽ không kích hoạt nếu hành động trên trang có cửa sổ bật lên.

Tham số

  • số gọi lại

    hàm

    Tham số callback sẽ có dạng như sau:

    (tab: tabs.Tab)=>void