chrome.browserAction

Mô tả

Phạm vi cung cấp

Trong hình sau, ô vuông nhiều màu ở bên phải thanh địa chỉ là biểu tượng cho một thao tác của 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 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ý thao tác 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ỳ để dùng trong Chrome. Chrome sẽ chọn biểu tượng gần nhất và điều chỉnh tỷ lệ biểu tượng đó thành kích thước phù hợp để lấp đầy không gian 16 dip. Tuy nhiên, nếu bạn không cung cấp kích thước chính xác, việc mở rộng 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 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. Đ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 phải 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 của trình duyệt trong 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 vuông 16 dip.

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 hoạt 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 cả BMP, GIF, ICO, JPEG hoặc PNG. Đối với các tiện ích chưa đóng gói, 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 manifest hoặc gọi phương thức browserAction.setIcon.

Để hiển thị biểu tượng đúng cách khi mật độ điểm ảnh màn hình (tỷ lệ size_in_pixel / size_in_dip) khác 1, bạn có thể xác định biểu tượng là một tập hợp hình ảnh có kích thước khác nhau. Hình ảnh thực tế sẽ hiển thị được chọn trong số các hình ảnh để phù hợp nhất với kích thước pixel là 16 dip. Bộ biểu tượng có thể chứa mọi quy cách biểu tượng về kích thước và Chrome sẽ chọn quy cách 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 manifest 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 Cung cấp nội dung bằng nhiều ngôn ngữ để biết thông tin chi tiết.

Huy hiệu

Các thao tác trên 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 lớp lên biểu tượng. Huy hiệu giúp bạn dễ dàng cập nhật thao tác của 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 chỉ được có tối đa 4 ký tự.

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

Cửa sổ bật lên

Nếu một thao tác trên 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 mọi nội dung HTML 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 cửa sổ. 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 một cửa sổ bật lên vào thao tác trên 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 manifest hoặc gọi phương thức browserAction.setPopup.

Mẹo

Để có tác động trực quan tốt nhất, hãy tuân thủ các nguyên tắc sau:

• Nên sử dụng các thao tác trên trình duyệt cho những tính năng phù hợp với hầu hết các trang.
• Không sử dụng các thao tác trên trình duyệt cho những tính năng chỉ phù hợp với một số ít trang. Thay vào đó, hãy sử dụng page actions (hành động 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 dip. Biểu tượng thao tác của trình duyệt có vẻ lớn hơn và đậm hơn một chút so với biểu tượng thao tác của trang.
• Khô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 phù hợp với các giao diện và dù sao thì các tiện ích cũng cần nổi bật hơn một chút.
• Không sử dụng độ trong suốt alpha để thêm các cạnh mềm cho 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 mắt trên nhiều màu nền.
• Không liên tục tạo ảnh động cho biểu tượng. Điều đó chỉ gây khó chịu.

Ví dụ

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

chrome.browserAction.disable(
  tabId?: number,
  callback?: function,
): Promise<void>

chrome.browserAction.enable(
  tabId?: number,
  callback?: function,
): Promise<void>

chrome.browserAction.getBadgeBackgroundColor(
  details: TabDetails,
  callback?: function,
): Promise<extensionTypes.ColorArray>

chrome.browserAction.getBadgeText(
  details: TabDetails,
  callback?: function,
): Promise<string>

chrome.browserAction.getPopup(
  details: TabDetails,
  callback?: function,
): Promise<string>

chrome.browserAction.getTitle(
  details: TabDetails,
  callback?: function,
): Promise<string>

chrome.browserAction.setBadgeBackgroundColor(
  details: object,
  callback?: function,
): Promise<void>

chrome.browserAction.setBadgeText(
  details: object,
  callback?: function,
): Promise<void>

chrome.browserAction.setIcon(
  details: object,
  callback?: function,
): Promise<void>

chrome.browserAction.setPopup(
  details: object,
  callback?: function,
): Promise<void>

chrome.browserAction.setTitle(
  details: object,
  callback?: function,
): Promise<void>

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