chrome.browserAction

Mô tả

Phạm vi cung cấp

Trong hình sau, hình vuông nhiều màu ở bên phải thanh địa chỉ là biểu tượng cho một thao tác trong trình duyệt. Một cửa sổ bật lên sẽ xuất hiện bên dưới biểu tượng.

Nếu bạn muốn tạo một biểu tượng không phải lúc nào cũng hoạt động, hãy sử dụng thao tác trên trang thay vì thao tác trên trình duyệt.

Tệp kê khai

Đăng ký hành động của trình duyệt trong tệp kê khai tiện ích như sau:

{
  "name": "My extension",
  ...
  "browser_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
  },
  ...
}

Bạn có thể cung cấp biểu tượng có kích thước bất kỳ để sử dụng trong Chrome. Chrome sẽ chọn biểu tượng gần nhất và điều chỉnh theo tỷ lệ sao cho phù hợp với không gian 16 pixel. Tuy nhiên, nếu bạn không cung cấp kích thước chính xác, việc điều chỉnh theo tỷ lệ này có thể khiến biểu tượng bị mất chi tiết hoặc trông mờ.

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. Điều này cũng đảm bảo rằng nếu kích thước hiển thị biểu tượng thay đổi, bạn không cần làm gì thêm để cung cấp các biểu tượng khác!

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

{
  "name": "My extension",
  ...
  "browser_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

Một thao tác trên trình duyệt có thể có biểu tượng, chú giải công cụ, huy hiệu và cửa sổ bật lên.

Biểu tượng

Các biểu tượng thao tác trong trình duyệt trên Chrome có chiều rộng và chiều cao là 16 dip (pixel độc lập với thiết bị). Các biểu tượng lớn hơn sẽ được đổi kích thước cho phù hợp, nhưng để có kết quả tốt nhất, hãy sử dụng biểu tượng hình vuông 16 pixel.

Bạn có thể đặt biểu tượng theo hai cách: sử dụng hình ảnh tĩnh hoặc sử dụng phần tử canvas HTML5. Việc sử dụng hình ảnh tĩnh sẽ dễ dàng hơn đối với các ứng dụng đơn giản, nhưng bạn có thể tạo giao diện người dùng linh động hơn (chẳng hạn như ảnh động mượt mà) bằng cách sử dụng phần tử canvas.

Hình ảnh tĩnh có thể ở bất kỳ định dạng nào mà WebKit có thể hiển thị, bao gồm BMP, GIF, ICO, JPEG hoặc PNG. Đối với các tiện ích chưa giải nén, hình ảnh phải ở định dạng PNG.

Để đặt biểu tượng, hãy sử dụng trường default_icon của browser_action trong tệp kê khai hoặc gọi phương thức browserAction.setIcon.

Để hiển thị biểu tượng đúng cách khi mật độ pixel màn hình (tỷ lệ size_in_pixel / size_in_dip) khác với 1, bạn có thể xác định biểu tượng là một tập hợp hình ảnh có nhiều kích thước. Hình ảnh thực tế sẽ được chọn từ tập hợp để phù hợp nhất với kích thước pixel là 16 dip. Bộ biểu tượng có thể chứa bất kỳ thông số kỹ thuật biểu tượng kích thước nào và Chrome sẽ chọn thông số kỹ thuật phù hợp nhất.

Chú giải công cụ

Để đặt chú giải công cụ, hãy sử dụng trường default_title của browser_action trong tệp kê khai hoặc gọi phương thức browserAction.setTitle. Bạn có thể chỉ định các chuỗi theo ngôn ngữ cụ thể cho trường default_title; hãy xem phần Quốc tế hoá để biết thông tin chi tiết.

Huy hiệu

Các thao tác trong trình duyệt có thể tuỳ ý hiển thị một huy hiệu – một đoạn văn bản được xếp chồng lên biểu tượng. Huy hiệu giúp bạn dễ dàng cập nhật thao tác trong trình duyệt để hiển thị một lượng nhỏ thông tin về trạng thái của tiện ích.

Vì huy hiệu có không gian hạn chế nên huy hiệu phải có tối đa 4 ký tự.

Đặt văn bản và màu của huy hiệu bằng cách sử dụng browserAction.setBadgeText và browserAction.setBadgeBackgroundColor tương ứng.

Cửa sổ bật lên

Nếu một hành động trong trình duyệt có cửa sổ bật lên, thì cửa sổ bật lên sẽ xuất hiện khi người dùng nhấp vào biểu tượng của tiện ích. Cửa sổ bật lên có thể chứa bất kỳ nội dung HTML nào mà bạn muốn và tự động điều chỉnh kích thước cho phù hợp với nội dung đó. Cửa sổ bật lên không được nhỏ hơn 25x25 và không được lớn hơn 800x600.

Để thêm cửa sổ bật lên vào hành động trong trình duyệt, hãy tạo một tệp HTML có nội dung của cửa sổ bật lên. Chỉ định tệp HTML trong trường default_popup của browser_action trong tệp kê khai hoặc gọi phương thức browserAction.setPopup.

Mẹo

Để có hiệu ứng hình ảnh tốt nhất, hãy làm theo các nguyên tắc sau:

• Nên sử dụng thao tác trên trình duyệt cho các tính năng phù hợp trên hầu hết các trang.
• Đừng sử dụng hành động trong trình duyệt cho những tính năng chỉ phù hợp với một vài trang. Thay vào đó, hãy sử dụng thao tác trên trang.
• Nên sử dụng các biểu tượng lớn, đầy màu sắc để tận dụng tối đa không gian 16x16 điểm ảnh. Biểu tượng hành động trong trình duyệt phải lớn và đậm hơn một chút so với biểu tượng hành động trên trang.
• Đừng cố gắng bắt chước biểu tượng trình đơn đơn sắc của Google Chrome. Cách này không hiệu quả với các giao diện và dù sao, các tiện ích cũng cần phải nổi bật một chút.
• Nên sử dụng độ trong suốt alpha để thêm các cạnh mềm vào biểu tượng. Vì nhiều người sử dụng giao diện nên biểu tượng của bạn phải trông đẹp trên nhiều màu nền.
• Không tạo ảnh động liên tục cho biểu tượng. Điều đó thật phiền phức.

Ví dụ

Bạn có thể tìm thấy các ví dụ đơn giản về cách sử dụng hành động trong trình duyệt trong thư mục examples/api/browserAction. Để biết các ví dụ khác và để được trợ giúp về cách xem mã nguồn, hãy xem phần Mẫu.

chrome.browserAction.disable(
  tabId?: number,
  callback?: function,
)

chrome.browserAction.enable(
  tabId?: number,
  callback?: function,
)

chrome.browserAction.getBadgeBackgroundColor(
  details: TabDetails,
  callback?: function,
)

chrome.browserAction.getBadgeText(
  details: TabDetails,
  callback?: function,
)

chrome.browserAction.getPopup(
  details: TabDetails,
  callback?: function,
)

chrome.browserAction.getTitle(
  details: TabDetails,
  callback?: function,
)

chrome.browserAction.setBadgeBackgroundColor(
  details: object,
  callback?: function,
)

chrome.browserAction.setBadgeText(
  details: object,
  callback?: function,
)

chrome.browserAction.setIcon(
  details: object,
  callback?: function,
)

chrome.browserAction.setPopup(
  details: object,
  callback?: function,
)

chrome.browserAction.setTitle(
  details: object,
  callback?: function,
)

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