browser.action

Mô tả

Sử dụng API chrome.action để kiểm soát biểu tượng của tiện ích trên thanh công cụ của Google Chrome.

Biểu tượng hành động xuất hiện trên thanh công cụ của trình duyệt, bên cạnh thanh địa chỉ. Sau khi cài đặt, các tiện ích này sẽ xuất hiện trong trình đơn tiện ích (biểu tượng mảnh ghép). Người dùng có thể ghim biểu tượng tiện ích của bạn vào thanh công cụ.

Phạm vi cung cấp

Chrome 88 trở lên browser.* kể từ Chrome 148 MV3 trở lên

Tệp kê khai

Bạn phải khai báo các khoá sau trong tệp kê khai để sử dụng API này.

"action"

Để sử dụng API browser.action, hãy chỉ định "manifest_version" của 3 và thêm khoá "action" vào tệp kê khai.

{
  "name": "Action Extension",
  ...
  "action": {
    "default_icon": {              // optional
      "16": "images/icon16.png",   // optional
      "24": "images/icon24.png",   // optional
      "32": "images/icon32.png"    // optional
    },
    "default_title": "Click Me",   // optional, shown in tooltip
    "default_popup": "popup.html"  // optional
  },
  ...
}

Khoá "action" (cùng với các khoá con) là không bắt buộc. Khi không có biểu tượng, tiện ích của bạn vẫn xuất hiện trên thanh công cụ để cung cấp quyền truy cập vào trình đơn của tiện ích. Vì lý do này, bạn nên luôn thêm ít nhất các khoá "action" và "default_icon".

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

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

Biểu tượng

Biểu tượng là hình ảnh chính trên thanh công cụ cho tiện ích của bạn và được đặt bằng khoá "default_icon" trong khoá "action" của tệp kê khai. Biểu tượng phải có chiều rộng và chiều cao là 16 pixel không phụ thuộc vào thiết bị (DIP).

Khoá "default_icon" là một từ điển về kích thước cho đường dẫn hình ảnh. Chrome sử dụng các biểu tượng này để chọn tỷ lệ hình ảnh cần dùng. Nếu không tìm thấy kết quả trùng khớp hoàn toàn, Chrome sẽ chọn kết quả gần nhất hiện có và điều chỉnh tỷ lệ cho phù hợp với hình ảnh. Điều này có thể ảnh hưởng đến chất lượng hình ảnh.

Vì các thiết bị có hệ số tỷ lệ ít phổ biến hơn như 1,5 lần hoặc 1,2 lần đang ngày càng trở nên phổ biế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. Điều này cũng giúp tiện ích của bạn không bị ảnh hưởng trước những thay đổi có thể xảy ra về kích thước hiển thị biểu tượng. Tuy nhiên, nếu chỉ cung cấp một kích thước, thì bạn cũng có thể đặt khoá "default_icon" thành một chuỗi có đường dẫn đến một biểu tượng duy nhất thay vì một từ điển.

Bạn cũng có thể gọi action.setIcon() để đặt biểu tượng của tiện ích theo phương thức lập trình bằng cách chỉ định một đường dẫn hình ảnh khác hoặc cung cấp biểu tượng được tạo động bằng phần tử canvas HTML hoặc API canvas ngoài màn hình nếu đặt từ trình chạy dịch vụ tiện ích.

const canvas = new OffscreenCanvas(16, 16);
const context = canvas.getContext('2d');
context.clearRect(0, 0, 16, 16);
context.fillStyle = '#00FF00';  // Green
context.fillRect(0, 0, 16, 16);
const imageData = context.getImageData(0, 0, 16, 16);
browser.action.setIcon({imageData: imageData}, () => { /* ... */ });

Đối với tiện ích đóng gói (được cài đặt từ tệp .crx), hình ảnh có thể ở hầu hết các định dạng mà công cụ kết xuất Blink có thể hiển thị, bao gồm PNG, JPEG, BMP, ICO và các định dạng khác. Không hỗ trợ định dạng SVG. Tiện ích chưa đóng gói phải sử dụng hình ảnh PNG.

Chú thích (tiêu đề)

Chú thích hoặc tiêu đề sẽ xuất hiện khi người dùng giữ con trỏ chuột trên biểu tượng của tiện ích trong thanh công cụ. Văn bản này cũng có trong văn bản hỗ trợ tiếp cận mà trình đọc màn hình đọc khi nút được lấy tiêu điểm.

Chú thích mặc định được đặt bằng trường "default_title" của khoá "action" trong manifest.json. Bạn cũng có thể đặt thuộc tính này theo phương thức lập trình bằng cách gọi action.setTitle().

Huy hiệu

Thao tác có thể hiển thị "huy hiệu" (không bắt buộc) – một đoạn văn bản được xếp lớp trên biểu tượng. Điều này cho phép bạn cập nhật hành động để hiển thị một lượng nhỏ thông tin về trạng thái của tiện ích, chẳng hạn như bộ đếm. Huy hiệu có một thành phần văn bản và một màu nền. Vì không gian có hạn, nên bạn nên sử dụng văn bản huy hiệu có tối đa 4 ký tự.

Để tạo huy hiệu, hãy thiết lập huy hiệu theo phương thức lập trình bằng cách gọi action.setBadgeBackgroundColor() và action.setBadgeText(). Không có chế độ cài đặt huy hiệu mặc định trong tệp kê khai. Giá trị màu của huy hiệu có thể là một mảng gồm 4 số nguyên từ 0 đến 255 tạo nên màu RGBA của huy hiệu hoặc một chuỗi có giá trị màu CSS.

browser.action.setBadgeBackgroundColor(
  {color: [0, 255, 0, 0]},  // Green
  () => { /* ... */ },
);

browser.action.setBadgeBackgroundColor(
  {color: '#00FF00'},  // Also green
  () => { /* ... */ },
);

browser.action.setBadgeBackgroundColor(
  {color: 'green'},  // Also, also green
  () => { /* ... */ },
);

Cửa sổ bật lên của một hành động sẽ xuất hiện khi người dùng nhấp vào nút hành động của tiện ích trong thanh công cụ. Cửa sổ bật lên có thể chứa bất kỳ nội dung HTML nào bạn muốn và sẽ tự động được định kích thước cho phù hợp với nội dung. Kích thước của cửa sổ bật lên phải nằm trong khoảng từ 25x25 đến 800x600 pixel.

Cửa sổ bật lên ban đầu được đặt bằng thuộc tính "default_popup" trong khoá "action" trong tệp manifest.json. Nếu có, thuộc tính này phải trỏ đến một đường dẫn tương đối trong thư mục tiện ích. Bạn cũng có thể cập nhật linh động để trỏ đến một đường dẫn tương đối khác bằng phương thức action.setPopup().

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

Trạng thái theo thẻ

Thao tác của tiện ích có thể có các trạng thái khác nhau cho mỗi thẻ. Để đặt giá trị cho một thẻ riêng lẻ, hãy sử dụng thuộc tính tabId trong các phương thức cài đặt của API action. Ví dụ: để đặt văn bản huy hiệu cho một thẻ cụ thể, hãy làm như sau:

function getTabId() { /* ... */}
function getTabBadge() { /* ... */}

browser.action.setBadgeText(
  {
    text: getTabBadge(tabId),
    tabId: getTabId(),
  },
  () => { ... }
);

Nếu thuộc tính tabId bị bỏ qua, thì chế độ cài đặt này sẽ được coi là chế độ cài đặt chung. Chế độ cài đặt dành riêng cho thẻ sẽ được ưu tiên hơn chế độ cài đặt chung.

Trạng thái bật

Theo mặc định, các thao tác trên thanh công cụ được bật (có thể nhấp vào) trên mọi thẻ. Bạn có thể thay đổi chế độ mặc định này bằng cách đặt thuộc tính default_state trong khoá action của tệp kê khai. Nếu default_state được đặt thành "disabled", thì hành động này sẽ bị tắt theo mặc định và phải được bật theo phương thức lập trình để có thể nhấp vào. Nếu default_state được đặt thành "enabled" (mặc định), thì hành động này sẽ được bật và có thể nhấp vào theo mặc định.

Bạn có thể kiểm soát trạng thái theo phương thức lập trình bằng cách sử dụng các phương thức action.enable() và action.disable(). Điều này chỉ ảnh hưởng đến việc cửa sổ bật lên (nếu có) hoặc sự kiện action.onClicked có được gửi đến tiện ích của bạn hay không; điều này không ảnh hưởng đến sự hiện diện của hành động trên thanh công cụ.

Ví dụ

Các ví dụ sau đây cho thấy một số cách phổ biến để sử dụng hành động trong tiện ích. Để dùng thử API này, hãy cài đặt Ví dụ về API hành động từ kho lưu trữ chrome-extension-samples.

Hiện cửa sổ bật lên

Thông thường, tiện ích sẽ hiển thị một cửa sổ bật lên khi người dùng nhấp vào hành động của tiện ích. Để triển khai tính năng này trong tiện ích của riêng bạn, hãy khai báo cửa sổ bật lên trong manifest.json và chỉ định nội dung mà Chrome sẽ hiển thị trong cửa sổ bật lên.

// manifest.json
{
  "name": "Action popup demo",
  "version": "1.0",
  "manifest_version": 3,
  "action": {
    "default_title": "Click to view a popup",
    "default_popup": "popup.html"
  }
}
<!-- popup.html -->
<!DOCTYPE html>
<html>
<head>
  <style>
    html {
      min-height: 5em;
      min-width: 10em;
      background: salmon;
    }
  </style>
</head>
<body>
  <p>Hello, world!</p>
</body>
</html>

Chèn tập lệnh nội dung khi nhấp vào

Một mẫu phổ biến cho các tiện ích là hiển thị tính năng chính của tiện ích bằng cách sử dụng thao tác của tiện ích. Ví dụ sau đây minh hoạ mẫu này. Khi người dùng nhấp vào thao tác, tiện ích sẽ chèn một tập lệnh nội dung vào trang hiện tại. Sau đó, tập lệnh nội dung sẽ hiển thị một cảnh báo để xác minh rằng mọi thứ đều hoạt động như mong đợi.

// manifest.json
{
  "name": "Action script injection demo",
  "version": "1.0",
  "manifest_version": 3,
  "action": {
    "default_title": "Click to show an alert"
  },
  "permissions": ["activeTab", "scripting"],
  "background": {
    "service_worker": "background.js"
  }
}
// background.js
browser.action.onClicked.addListener((tab) => {
  browser.scripting.executeScript({
    target: {tabId: tab.id},
    files: ['content.js']
  });
});
// content.js
alert('Hello, world!');

Mô phỏng hành động bằng declarativeContent

Ví dụ này cho thấy cách logic nền của tiện ích có thể (a) tắt một hành động theo mặc định và (b) sử dụng declarativeContent để bật hành động trên các trang web cụ thể.

// service-worker.js

// Wrap in an onInstalled callback to avoid unnecessary work
// every time the service worker is run
browser.runtime.onInstalled.addListener(() => {
  // Page actions are disabled by default and enabled on select tabs
  browser.action.disable();

  // Clear all rules to ensure only our expected rules are set
  browser.declarativeContent.onPageChanged.removeRules(undefined, () => {
    // Declare a rule to enable the action on example.com pages
    let exampleRule = {
      conditions: [
        new browser.declarativeContent.PageStateMatcher({
          pageUrl: {hostSuffix: '.example.com'},
        })
      ],
      actions: [new browser.declarativeContent.ShowAction()],
    };

    // Finally, apply our new array of rules
    let rules = [exampleRule];
    browser.declarativeContent.onPageChanged.addRules(rules);
  });
});

Loại

OpenPopupOptions

Chrome 99 trở lên browser.* kể từ Chrome 148

Thuộc tính

  • windowId

    number không bắt buộc

    Mã nhận dạng của cửa sổ để mở cửa sổ bật lên của hành động. Mặc định là cửa sổ đang hoạt động nếu không được chỉ định.

TabDetails

Thuộc tính

  • tabId

    number không bắt buộc

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

UserSettings

Chrome 91 trở lên browser.* kể từ Chrome 148

Tập hợp các chế độ cài đặt do người dùng chỉ định liên quan đến hành động của tiện ích.

Thuộc tính

  • isOnToolbar

    boolean

    Liệu biểu tượng hành động của tiện ích có xuất hiện trên thanh công cụ cấp cao nhất của cửa sổ trình duyệt hay không (tức là liệu tiện ích có được người dùng "ghim" hay không).

UserSettingsChange

Chrome 130 trở lên browser.* kể từ Chrome 148

Thuộc tính

  • isOnToolbar

    boolean không bắt buộc

    Liệu biểu tượng hành động của tiện ích có xuất hiện trên thanh công cụ cấp cao nhất của cửa sổ trình duyệt hay không (tức là liệu tiện ích có được người dùng "ghim" hay không).

Phương thức

disable()

browser.action.disable(
  tabId?: number,
)
: Promise<void>

Tắt thao tác cho một thẻ.

Thông số

  • tabId

    number không bắt buộc

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

Giá trị trả về

  • Promise<void>

enable()

browser.action.enable(
  tabId?: number,
)
: Promise<void>

Bật thao tác cho một thẻ. Theo mặc định, các hành động sẽ được bật.

Thông số

  • tabId

    number không bắt buộc

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

Giá trị trả về

  • Promise<void>

getBadgeBackgroundColor()

browser.action.getBadgeBackgroundColor(
  details: TabDetails,
)
: Promise<extensionTypes.ColorArray>

Lấy màu nền của hành động.

Thông số

Giá trị trả về

getBadgeText()

browser.action.getBadgeText(
  details: TabDetails,
)
: Promise<string>

Lấy văn bản huy hiệu của hành động. Nếu không có thẻ nào được chỉ định, thì văn bản huy hiệu không dành riêng cho thẻ sẽ được trả về. Nếu bạn bật displayActionCountAsBadgeText, thì văn bản phần giữ chỗ sẽ được trả về, trừ phi có quyền declarativeNetRequestFeedback hoặc văn bản huy hiệu dành riêng cho thẻ được cung cấp.

Thông số

Giá trị trả về

  • <string> hứa hẹn

getBadgeTextColor()

Chrome 110 trở lên trình duyệt.* kể từ Chrome 148
browser.action.getBadgeTextColor(
  details: TabDetails,
)
: Promise<extensionTypes.ColorArray>

Lấy màu văn bản của hành động.

Thông số

Giá trị trả về

getPopup()

browser.action.getPopup(
  details: TabDetails,
)
: Promise<string>

Lấy tài liệu html được đặt làm cửa sổ bật lên cho hành động này.

Thông số

Giá trị trả về

  • <string> hứa hẹn

getTitle()

browser.action.getTitle(
  details: TabDetails,
)
: Promise<string>

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

Thông số

Giá trị trả về

  • <string> hứa hẹn

getUserSettings()

Chrome 91 trở lên browser.* kể từ Chrome 148
browser.action.getUserSettings(): Promise<UserSettings>

Trả về chế độ cài đặt do người dùng chỉ định liên quan đến hành động của tiện ích.

Giá trị trả về

isEnabled()

Chrome 110 trở lên trình duyệt.* kể từ Chrome 148
browser.action.isEnabled(
  tabId?: number,
)
: Promise<boolean>

Cho biết liệu hành động của tiện ích có được bật cho một thẻ hay không (hoặc trên toàn cầu nếu không cung cấp tabId). Các hành động chỉ được bật bằng declarativeContent luôn trả về giá trị false.

Thông số

  • tabId

    number không bắt buộc

    Mã của thẻ mà bạn muốn kiểm tra trạng thái bật.

Giá trị trả về

  • Promise<boolean>

openPopup()

Chrome 127 trở lên browser.* kể từ Chrome 148
browser.action.openPopup(
  options?: OpenPopupOptions,
)
: Promise<void>

Mở cửa sổ bật lên của tiện ích. Từ Chrome 118 đến Chrome 126, tính năng này chỉ dành cho các tiện ích được cài đặt theo chính sách.

Thông số

  • tùy chọn

    OpenPopupOptions không bắt buộc

    Chỉ định các tuỳ chọn để mở cửa sổ bật lên.

Giá trị trả về

  • Promise<void>

setBadgeBackgroundColor()

browser.action.setBadgeBackgroundColor(
  details: object,
)
: Promise<void>

Đặt màu nền cho huy hiệu.

Thông số

  • chi tiết

    đối tượng

    • màu

      string | ColorArray

      Một mảng gồm 4 số nguyên trong khoảng [0,255] tạo nên màu RGBA của huy hiệu. Ví dụ: màu đỏ mờ là [255, 0, 0, 255]. Cũng có thể là một chuỗi có giá trị CSS, trong đó màu đỏ mờ là #FF0000 hoặc #F00.

    • tabId

      number không bắt buộc

      Giới hạn thay đổi khi một thẻ cụ thể được chọn. Tự động đặt lại khi thẻ đóng.

Giá trị trả về

  • Promise<void>

setBadgeText()

browser.action.setBadgeText(
  details: object,
)
: Promise<void>

Đặt văn bản huy hiệu cho hành động. Huy hiệu sẽ xuất hiện ở đầu biểu tượng.

Thông số

  • chi tiết

    đối tượng

    • tabId

      number không bắt buộc

      Giới hạn thay đổi khi một thẻ cụ thể được chọn. Tự động đặt lại khi thẻ đóng.

    • văn bản

      chuỗi không bắt buộc

      Bạn có thể truyền số lượng ký tự bất kỳ, nhưng chỉ có khoảng 4 ký tự vừa với không gian. Nếu bạn truyền một chuỗi trống (''), thì văn bản huy hiệu sẽ bị xoá. Nếu bạn chỉ định tabId và text là rỗng, thì văn bản cho thẻ được chỉ định sẽ bị xoá và mặc định là văn bản huy hiệu chung.

Giá trị trả về

  • Promise<void>

setBadgeTextColor()

Chrome 110 trở lên trình duyệt.* kể từ Chrome 148
browser.action.setBadgeTextColor(
  details: object,
)
: Promise<void>

Đặt màu văn bản cho huy hiệu.

Thông số

  • chi tiết

    đối tượng

    • màu

      string | ColorArray

      Một mảng gồm 4 số nguyên trong khoảng [0,255] tạo nên màu RGBA của huy hiệu. Ví dụ: màu đỏ mờ là [255, 0, 0, 255]. Cũng có thể là một chuỗi có giá trị CSS, trong đó màu đỏ mờ là #FF0000 hoặc #F00. Nếu bạn không đặt giá trị này, thì một màu sẽ được tự động chọn để tương phản với màu nền của huy hiệu, nhờ đó văn bản sẽ hiển thị. Màu có giá trị alpha tương đương với 0 sẽ không được đặt và sẽ trả về lỗi.

    • tabId

      number không bắt buộc

      Giới hạn thay đổi khi một thẻ cụ thể được chọn. Tự động đặt lại khi thẻ đóng.

Giá trị trả về

  • Promise<void>

setIcon()

browser.action.setIcon(
  details: object,
)
: Promise<void>

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

Thông số

  • chi tiết

    đối tượng

    • imageData

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

      Đối tượng ImageData hoặc từ điển {size -> ImageData} đại diện cho biểu tượng cần đặt. Nếu biểu tượng được chỉ định dưới dạng 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ố lượng điểm ả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}"

    • đường dẫn

      string | object không bắt buộc

      Đường dẫn hình ảnh tương đối hoặc từ điển {size -> relative image path} trỏ đến biểu tượng cần đặt. Nếu biểu tượng được chỉ định dưới dạng 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ố lượng điểm ả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 không bắt buộc

      Giới hạn thay đổi khi một thẻ cụ thể được chọn. Tự động đặt lại khi thẻ đóng.

Giá trị trả về

  • Promise<void>

    Chrome 96 trở lên browser.* kể từ Chrome 148

setPopup()

browser.action.setPopup(
  details: object,
)
: Promise<void>

Đặt tài liệu HTML sẽ đượ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.

Thông số

  • chi tiết

    đối tượng

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

      chuỗi

      Đường dẫn tương đối đến tệp HTML để 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ì không có cửa sổ bật lên nào xuất hiện.

    • tabId

      number không bắt buộc

      Giới hạn thay đổi khi một thẻ cụ thể được chọn. Tự động đặt lại khi thẻ đóng.

Giá trị trả về

  • Promise<void>

setTitle()

browser.action.setTitle(
  details: object,
)
: Promise<void>

Đặt tiêu đề cho hành động. Thông tin này xuất hiện trong chú thích.

Thông số

  • chi tiết

    đối tượng

    • tabId

      number không bắt buộc

      Giới hạn thay đổi khi một thẻ cụ thể được chọn. Tự động đặt lại khi thẻ đóng.

    • tiêu đề

      chuỗi

      Chuỗi mà hành động sẽ hiển thị khi di chuột qua.

Giá trị trả về

  • Promise<void>

Sự kiện

onClicked

browser.action.onClicked.addListener(
  callback: function,
)

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

Thông số

  • callback

    hàm

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

    (tab: tabs.Tab) => void

onUserSettingsChanged

Chrome 130 trở lên browser.* kể từ Chrome 148
browser.action.onUserSettingsChanged.addListener(
  callback: function,
)

Được kích hoạt khi chế độ cài đặt do người dùng chỉ định liên quan đến thay đổi về hành động của tiện ích.

Thông số