Thiết kế giao diện người dùng

Giao diện người dùng của tiện ích phải có mục đích và tối giản. Giống như chính các tiện ích, giao diện người dùng phải tuỳ chỉnh hoặc nâng cao trải nghiệm duyệt web mà không làm người dùng mất tập trung.

Hướng dẫn này khám phá các tính năng bắt buộc và không bắt buộc của giao diện người dùng. Sử dụng tài liệu này để tìm hiểu cách thức và thời điểm triển khai các phần tử trên giao diện người dùng trong một tiện ích.

Kích hoạt tiện ích trên tất cả các trang

Sử dụng browser_action khi các tính năng của tiện ích hoạt động trong hầu hết các trường hợp.

Đăng ký thao tác trên trình duyệt

Trường "browser_action" được đăng ký trong tệp kê khai.

{
  "name": "My Awesome browser_action Extension",
  ...
  "browser_action": {
    ...
  }
  ...
}

Việc khai báo "browser_action" sẽ giữ cho biểu tượng có màu, cho biết tiện ích này có sẵn cho người dùng.

Thêm huy hiệu

Huy hiệu hiển thị một biểu ngữ có màu với tối đa 4 ký tự ở trên biểu tượng trình duyệt. Các API này chỉ có thể được dùng bởi những tiện ích khai báo "browser_action" trong tệp kê khai của chúng.

Sử dụng huy hiệu để cho biết trạng thái của tiện ích. Mẫu Sự kiện uống nước hiển thị một huy hiệu có trạng thái "BẬT" để cho người dùng biết rằng họ đã đặt báo thức thành công và không hiển thị gì khi tiện ích ở trạng thái rảnh.

Bật huy hiệu

Tắt huy hiệu

Đặt văn bản của huy hiệu bằng cách gọi chrome.browserAction.setBadgeText và màu biểu ngữ bằng cách gọi chrome.browserAction.setBadgeBackgroundColor .

chrome.browserAction.setBadgeText({text: 'ON'});
chrome.browserAction.setBadgeBackgroundColor({color: '#4688F1'});

Kích hoạt tiện ích trên các trang đã chọn

Sử dụng page_action khi các tính năng của tiện ích chỉ có trong những trường hợp được xác định.

Khai báo thao tác trên trang

Trường "page_action" được đăng ký trong tệp kê khai.

{
  "name": "My Awesome page_action Extension",
  ...
  "page_action": {
    ...
  }
  ...
}

Việc khai báo "page_action" sẽ chỉ tô màu biểu tượng khi người dùng có thể sử dụng tiện ích, nếu không, biểu tượng sẽ hiển thị ở thang độ xám.

Biểu tượng thao tác trên trang đang hoạt động

Biểu tượng thao tác trên trang không dùng được

Xác định các quy tắc để kích hoạt tiện ích

Xác định các quy tắc về thời điểm có thể sử dụng tiện ích bằng cách gọi chrome.declarativeContent trong trình nghe runtime.onInstalled trong tập lệnh nền. Tiện ích mẫu Hành động trên trang theo URL đặt một điều kiện là URL phải chứa "g". Nếu điều kiện được đáp ứng, tiện ích sẽ gọi declarativeContent.ShowPageAction().

chrome.runtime.onInstalled.addListener(function() {
  // Replace all rules ...
  chrome.declarativeContent.onPageChanged.removeRules(undefined, function() {
    // With a new rule ...
    chrome.declarativeContent.onPageChanged.addRules([
      {
        // That fires when a page's URL contains a 'g' ...
        conditions: [
          new chrome.declarativeContent.PageStateMatcher({
            pageUrl: { urlContains: 'g' },
          })
        ],
        // And shows the extension's page action.
        actions: [ new chrome.declarativeContent.ShowPageAction() ]
      }
    ]);
  });
});

Bật hoặc tắt tiện ích

Các tiện ích sử dụng "page_action" có thể kích hoạt và vô hiệu hoá một cách linh động bằng cách gọi pageAction.show và pageAction.hide.

Tiện ích mẫu Mappy quét một trang web để tìm địa chỉ và cho biết vị trí của địa chỉ đó trên một bản đồ tĩnh trong cửa sổ bật lên. Vì tiện ích này phụ thuộc vào nội dung trang, nên tiện ích không thể khai báo các quy tắc để dự đoán những trang sẽ có liên quan. Thay vào đó, nếu tìm thấy một địa chỉ trên trang, tiện ích sẽ gọi pageAction.show để tô màu biểu tượng và báo hiệu rằng tiện ích có thể dùng được trên thẻ đó.

chrome.runtime.onMessage.addListener(function(req, sender) {
  chrome.storage.local.set({'address': req.address})
  chrome.pageAction.show(sender.tab.id);
  chrome.pageAction.setTitle({tabId: sender.tab.id, title: req.address});
});

Cung cấp biểu tượng tiện ích

Phần mở rộng cần có ít nhất một biểu tượng để đại diện. Hãy cung cấp biểu tượng ở định dạng PNG để có kết quả trực quan tốt nhất, mặc dù mọi định dạng mà WebKit hỗ trợ (bao gồm cả BMP, GIF, ICO và JPEG) đều được chấp nhận.

Chỉ định biểu tượng thanh công cụ

Các biểu tượng dành riêng cho thanh công cụ được đăng ký trong trường "default_icon" trong browser_action hoặc page_action trong tệp kê khai. Bạn nên đưa vào nhiều kích thước để mở rộng quy mô cho không gian 16 dip. Bạn nên sử dụng kích thước tối thiểu là 16x16 và 32x32.

{
  "name": "My Awesome page_action Extension",
  ...
  "page_action": {
    "default_icon": {
      "16": "extension_toolbar_icon16.png",
      "32": "extension_toolbar_icon32.png"
    }
  }
  ...
}

Tất cả biểu tượng phải là hình vuông, nếu không có thể bị biến dạng. Nếu bạn không cung cấp biểu tượng nào, Chrome sẽ thêm một biểu tượng chung vào thanh công cụ.

Tạo và đăng ký các biểu tượng bổ sung

Thêm các biểu tượng khác có kích thước sau để sử dụng bên ngoài thanh công cụ.

Kích thước biểu tượngSử dụng biểu tượng
16x16biểu tượng trang web trên các trang của tiện ích
32x32Máy tính chạy Windows thường yêu cầu kích thước này. Khi cung cấp lựa chọn này, bạn sẽ ngăn tình trạng biến dạng kích thước do lựa chọn 48x48 bị thu nhỏ.
48x48hiển thị trên trang quản lý tiện ích
128x128hiển thị khi cài đặt và trong Cửa hàng Chrome trực tuyến

Đăng ký biểu tượng trong tệp kê khai trong trường "icons".

{
  "name": "My Awesome Extension",
  ...
  "icons": {
    "16": "extension_icon16.png",
    "32": "extension_icon32.png",
    "48": "extension_icon48.png",
    "128": "extension_icon128.png"
  }
  ...
}

Các tính năng bổ sung về giao diện người dùng

Cửa sổ bật lên là một tệp HTML xuất hiện trong một cửa sổ đặc biệt khi người dùng nhấp vào biểu tượng trên thanh công cụ. Cửa sổ bật lên hoạt động tương tự như một trang web; cửa sổ này có thể chứa các đường liên kết đến biểu định kiểu và thẻ tập lệnh, nhưng không cho phép JavaScript nội tuyến.

Ví dụ về cửa sổ bật lên Sự kiện uống nước sẽ hiển thị các lựa chọn về bộ tính giờ hiện có. Người dùng đặt báo thức bằng cách nhấp vào một trong các nút được cung cấp.

Ảnh chụp màn hình mẫu của cửa sổ bật lên

<html>
  <head>
    <title>Water Popup</title>
  </head>
  <body>
      <img src='./stay_hydrated.png' id='hydrateImage'>
      <button id='sampleSecond' value='0.1'>Sample Second</button>
      <button id='15min' value='15'>15 Minutes</button>
      <button id='30min' value='30'>30 Minutes</button>
      <button id='cancelAlarm'>Cancel Alarm</button>
    <script src="popup.js"></script>
  </body>
</html>

Bạn có thể đăng ký cửa sổ bật lên trong tệp kê khai, trong mục thao tác của trình duyệt hoặc thao tác của trang.

{
  "name": "Drink Water Event",
  ...
  "browser_action": {
    "default_popup": "popup.html"
  }
  ...
}

Bạn cũng có thể đặt cửa sổ bật lên một cách linh hoạt bằng cách gọi browserAction.setPopup hoặc pageAction.setPopup.

chrome.storage.local.get('signed_in', function(data) {
  if (data.signed_in) {
    chrome.browserAction.setPopup({popup: 'popup.html'});
  } else {
    chrome.browserAction.setPopup({popup: 'popup_sign_in.html'});
  }
});

Chú giải công cụ

Sử dụng chú giải công cụ để cung cấp nội dung mô tả hoặc hướng dẫn ngắn gọn cho người dùng khi họ di chuột qua biểu tượng trình duyệt.

Ảnh chụp màn hình ví dụ về chú giải công cụ

Chú thích được đăng ký trong trường "default_title" browser_action hoặc page_action trong tệp kê khai.

{
"name": "Tab Flipper",
  ...
  "browser_action": {
    "default_title": "Press Ctrl(Win)/Command(Mac)+Shift+Right/Left to flip tabs"
  }
...
}

Bạn cũng có thể đặt hoặc cập nhật chú thích bằng cách gọi browserAction.setTitle và pageAction.setTitle.

chrome.browserAction.onClicked.addListener(function(tab) {
  chrome.browserAction.setTitle({tabId: tab.id, title: "You are on tab:" + tab.id});
});

Các chuỗi ngôn ngữ chuyên biệt được triển khai bằng Quốc tế hoá. Tạo các thư mục để lưu trữ thông báo theo ngôn ngữ trong một thư mục có tên là _locales, như sau:

  • _locales/en/messages.json
  • _locales/es/messages.json

Định dạng thông báo trong messages.json của mỗi ngôn ngữ.

{
  "__MSG_tooltip__": {
      "message": "Hello!",
      "description": "Tooltip Greeting."
  }
}

{
  "__MSG_tooltip__": {
      "message": "Hola!",
      "description": "Tooltip Greeting."
  }
}

Thêm tên của thông báo vào trường chú thích thay vì thông báo để bật tính năng bản địa hoá.

{
"name": "Tab Flipper",
  ...
  "browser_action": {
    "default_title": "__MSG_tooltip__"
  }
...
}

Thanh địa chỉ

Người dùng có thể gọi chức năng của tiện ích thông qua thanh địa chỉ. Thêm trường "omnibox" vào tệp kê khai và chỉ định một từ khoá. Tiện ích mẫu Omnibox New Tab Search (Tìm kiếm trên thẻ mới bằng thanh địa chỉ) sử dụng "nt" làm từ khoá.

{
  "name": "Omnibox New Tab Search",\
  ...
  "omnibox": { "keyword" : "nt" },
  "default_icon": {
    "16": "newtab_search16.png",
    "32": "newtab_search32.png"
  }
  ...
}

Khi người dùng nhập "nt" vào thanh địa chỉ, tiện ích sẽ được kích hoạt. Để báo hiệu điều này cho người dùng, Chrome sẽ chuyển biểu tượng 16x16 được cung cấp sang thang độ xám và đưa biểu tượng đó vào thanh địa chỉ bên cạnh tên tiện ích.

Tiện ích đang hoạt động trên thanh địa chỉ

Tiện ích này theo dõi sự kiện omnibox.onInputEntered. Sau khi được kích hoạt, tiện ích sẽ mở một thẻ mới chứa nội dung tìm kiếm trên Google cho mục nhập của người dùng.

chrome.omnibox.onInputEntered.addListener(function(text) {
  // Encode user input for special characters , / ? : @ & = + $ #
  var newURL = 'https://www.google.com/search?q=' + encodeURIComponent(text);
  chrome.tabs.create({ url: newURL });
});

Trình đơn theo bối cảnh

Thêm các lựa chọn mới vào trình đơn theo bối cảnh bằng cách cấp quyền "contextMenus" trong tệp kê khai.

{
  "name": "Global Google Search",
  ...
  "permissions": [
    "contextMenus",
    "storage"
  ],
  "icons": {
    "16": "globalGoogle16.png",
    "48": "globalGoogle48.png",
    "128": "globalGoogle128.png"
  }
  ...
}

Biểu tượng 16x16 xuất hiện bên cạnh mục nhập mới trong trình đơn.

Biểu tượng trình đơn theo bối cảnh

Tạo trình đơn theo bối cảnh bằng cách gọi contextMenus.create trong tập lệnh nền. Bạn nên thực hiện việc này trong sự kiện trình nghe runtime.onInstalled.

chrome.runtime.onInstalled.addListener(function() {
  for (let key of Object.keys(kLocales)) {
    chrome.contextMenus.create({
      id: key,
      title: kLocales[key],
      type: 'normal',
      contexts: ['selection'],
    });
  }
});

const kLocales = {
  'com.au': 'Australia',
  'com.br': 'Brazil',
  'ca': 'Canada',
  'cn': 'China',
  'fr': 'France',
  'it': 'Italy',
  'co.in': 'India',
  'co.jp': 'Japan',
  'com.ms': 'Mexico',
  'ru': 'Russia',
  'co.za': 'South Africa',
  'co.uk': 'United Kingdom'
};

Ví dụ về trình đơn ngữ cảnh Google Tìm kiếm toàn cầu tạo nhiều lựa chọn từ danh sách trong locales.js . Khi một tiện ích chứa nhiều trình đơn theo bối cảnh, Google Chrome sẽ tự động thu gọn các trình đơn đó thành một trình đơn chính duy nhất.

Nhiều trình đơn theo bối cảnh sẽ thu gọn

Lệnh

Tiện ích có thể xác định các lệnh cụ thể và liên kết các lệnh đó với một tổ hợp phím. Đăng ký một hoặc nhiều lệnh trong tệp kê khai trong trường "commands".

{
  "name": "Tab Flipper",
  ...
  "commands": {
    "flip-tabs-forward": {
      "suggested_key": {
        "default": "Ctrl+Shift+Right",
        "mac": "Command+Shift+Right"
      },
      "description": "Flip tabs forward"
    },
    "flip-tabs-backwards": {
      "suggested_key": {
        "default": "Ctrl+Shift+Left",
        "mac": "Command+Shift+Left"
      },
      "description": "Flip tabs backwards"
    }
  }
  ...
}

Bạn có thể dùng các lệnh để cung cấp phím tắt mới hoặc phím tắt thay thế cho trình duyệt. Tiện ích mẫu Tab Flipper theo dõi sự kiện commands.onCommand trong tập lệnh nền và xác định chức năng cho từng tổ hợp đã đăng ký.

chrome.commands.onCommand.addListener(function(command) {
  chrome.tabs.query({currentWindow: true}, function(tabs) {
    // Sort tabs according to their index in the window.
    tabs.sort((a, b) => { return a.index < b.index; });
    let activeIndex = tabs.findIndex((tab) => { return tab.active; });
    let lastTab = tabs.length - 1;
    let newIndex = -1;
    if (command === 'flip-tabs-forward')
      newIndex = activeIndex === 0 ? lastTab : activeIndex - 1;
    else  // 'flip-tabs-backwards'
      newIndex = activeIndex === lastTab ? 0 : activeIndex + 1;
    chrome.tabs.update(tabs[newIndex].id, {active: true, highlighted: true});
  });
});

Các lệnh cũng có thể tạo một tổ hợp phím hoạt động đặc biệt với tiện ích của lệnh. Ví dụ Hello Extensions (Tiện ích Xin chào) đưa ra một lệnh để mở cửa sổ bật lên.

{
  "name": "Hello Extensions",
  "description" : "Base Level Extension",
  "version": "1.0",
  "browser_action": {
    "default_popup": "hello.html",
    "default_icon": "hello_extensions.png"
  },
  "manifest_version": 2,
  "commands": {
    "_execute_browser_action": {
      "suggested_key": {
        "default": "Ctrl+Shift+F",
        "mac": "MacCtrl+Shift+F"
      },
      "description": "Opens hello.html"
    }
  }
}

Vì tiện ích xác định browser_action nên tiện ích này có thể chỉ định "execute_browser_action" trong các lệnh để mở tệp bật lên mà không cần thêm tập lệnh nền. Nếu sử dụng page_action, bạn có thể thay thế bằng "execute_page_action". Bạn có thể dùng cả lệnh trình duyệt và lệnh tiện ích trong cùng một tiện ích.

Ghi đè các trang

Tiện ích có thể ghi đè và thay thế trang web Nhật ký, Thẻ mới hoặc Dấu trang bằng một tệp HTML tuỳ chỉnh. Giống như cửa sổ bật lên, thành phần này có thể bao gồm logic và kiểu chuyên biệt, nhưng không cho phép JavaScript nội tuyến. Mỗi tiện ích chỉ được phép ghi đè một trong ba trang có thể có.

Đăng ký một trang ghi đè trong tệp kê khai trong trường "chrome_url_overrides".

{
  "name": "Awesome Override Extension",
  ...

  "chrome_url_overrides" : {
    "newtab": "override_page.html"
  },
  ...
}

Bạn nên thay thế trường "newtab" bằng "bookmarks" hoặc "history" khi ghi đè các trang đó.

<html>
  <head>
  <title>New Tab</title>
  </head>
  <body>
    <h1>Hello World</h1>
  <script src="logic.js"></script>
  </body>
</html>