Giao diện người dùng của tiện ích phải có chủ đích và ở mức tối thiểu. Cũng giống như chính các tiện ích mở rộng, 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 khiến người dùng bị phân tâm.
Hướng dẫn này khám phá các tính năng giao diện người dùng bắt buộc và không bắt buộc. Hãy sử dụng báo cáo này để biết cách thức và thời điểm để triển khai các thành phần khác nhau trên giao diện người dùng trong một tiện ích.
Kích hoạt tiện ích này 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ữ màu biểu tượng, 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ự ở đầu biểu tượng trình duyệt. Họ chỉ có thể
được sử dụng bởi các tiện ích khai báo "browser_action" trong tệp kê khai.
Sử dụng huy hiệu để cho biết trạng thái của tiện ích. Mẫu Dorink Water Event hiển thị 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 đang ở trạng thái rảnh.
Đặ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 này trên một số trang
Sử dụng page_action khi các tính năng của tiện ích chỉ sử dụng được trong một số trường hợp xác định.
Khai báo hành động 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ỉ đổi màu biểu tượng khi tiện ích được cung cấp cho người dùng,
nếu không thì sẽ hiển thị theo thang màu xám.
Xác định quy tắc kích hoạt tiện ích
Xác định các quy tắc cho trường hợp 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. Mẫu Hành động trên trang theo URL
phần mở rộng đặt điều kiện rằng url phải chứa "g". Nếu đáp ứng điều kiện, tiện ích
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à tắt 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à hiển thị vị trí của trang web đó trên
bản đồ 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 không thể khai báo quy tắc
để dự đoán trang nào sẽ có liên quan. Thay vào đó, nếu một địa chỉ được tìm thấy trên trang mà địa chỉ đó gọi
pageAction.show để tô màu biểu tượng và báo hiệu rằng bạn có thể sử dụng tiện ích 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
Các tiện ích cần có ít nhất một biểu tượng để thể hiện. Cung cấp biểu tượng ở định dạng PNG phù hợp nhất kết quả trực quan, mặc dù bất kỳ định dạng nào được WebKit hỗ trợ, bao gồm BMP, GIF, ICO và JPEG đã chấp nhận.
Chỉ định biểu tượng trên 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" bên dưới
browser_action hoặc page_action trong tệp kê khai. Việc bao gồm nhiều kích thước là
nên điều chỉnh theo tỷ lệ cho không gian nhúng 16 độ. 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ả các biểu tượng phải là hình vuông, nếu không chúng có thể bị méo. Nếu bạn không cung cấp biểu tượng nào, Chrome sẽ thêm mã chung vào thanh công cụ.
Tạo và đăng ký biểu tượng bổ sung
Thêm các biểu tượng bổ sung với 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ượng | Biểu tượng sử dụng |
|---|---|
| 16x16 | biểu tượng trang web trên các trang của tiện ích |
| 32x32 | Máy tính Windows thường yêu cầu kích thước này. Việc cung cấp tuỳ chọn này sẽ ngăn tình trạng méo kích thước thu nhỏ tuỳ chọn 48x48. |
| 48x48 | hiển thị trên trang quản lý tiện ích |
| 128x128 | hiển thị khi cài đặt và trong Cửa hàng Chrome trực tuyến |
Đăng ký các 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 giao diện người dùng bổ sung
Cửa sổ bật lên
Cửa sổ bật lên là tệp HTML được hiển thị trong một cửa sổ đặc biệt khi người dùng nhấp vào biểu tượng thanh công cụ. Một cửa sổ bật lên hoạt động rất giống với một trang web; tệp này có thể chứa các liên kết đến biểu định kiểu và thẻ tập lệnh, nhưng không cho phép JavaScript cùng dòng.
Cửa sổ bật lên ví dụ Drink Water Event (Sự kiện uống nước) cho thấy các lựa chọn hẹn giờ hiện có. Người dùng đặt báo thức theo bằng cách nhấp vào một trong các nút được cung cấp.
<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 phần hành động trên trình duyệt hoặc hành động trên 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 động 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ú thích để cung cấp nội dung mô tả ngắn hoặc hướng dẫn cho người dùng khi di chuột lên trình duyệt .
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 cùng với tính năng Quốc tế hoá. Tạo thư mục để
thông báo cụ thể theo ngôn ngữ nội bộ trong thư mục có tên _locales, như sau:
_locales/en/messages.json_locales/es/messages.json
Định dạng thư bên trong messages.json của mỗi ngôn ngữ.
{
"__MSG_tooltip__": {
"message": "Hello!",
"description": "Tooltip Greeting."
}
}
{
"__MSG_tooltip__": {
"message": "Hola!",
"description": "Tooltip Greeting."
}
}
Đưa tên 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 tiện ích thông qua thanh địa chỉ. Đưa trường "omnibox" vào
tệp kê khai và chỉ định một từ khoá. Tiện ích mẫu Thanh địa chỉ Tìm thẻ mới sử dụng "nt" dưới dạng
từ khóa.
{
"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ỉ, thao tác này sẽ kích hoạt tiện ích. Để thông báo điều này cho người dùng, khung màu xám cho biểu tượng 16x16 được cung cấp và đưa biểu tượng vào thanh địa chỉ bên cạnh tên tiện ích.
Tiện ích này theo dõi sự kiện omnibox.onInputEntered. Sau khi được kích hoạt,
tiện ích mở rộng 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 });
});
Menu ngữ cảnh
Thêm các lựa chọn mới cho 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 được hiển thị bên cạnh mục nhập mới trong trình đơn.
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. Chiến dịch này
bạn nên thực hiện 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 theo bối cảnh của Google Tìm kiếm chung tạo nhiều lựa chọn cho 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 tự động thu gọn chúng vào một trình đơn chính.
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
lệnh khác trong tệp kê khai ở 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 thay thế cho trình duyệt. Mẫu Trình lật thẻ
tiện ích theo dõi sự kiện commands.onCommand trong tập lệnh nền và xác định
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 liên kết phím hoạt động đặc biệt với tiện ích của phím đó. Ví dụ về Hello Extensions sẽ đưa ra 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 có thể chỉ định "execute_browser_action" trong
các lệnh để mở tệp bật lên mà không thêm tập lệnh nền. Nếu sử dụng
page_action, có thể thay thế bằng "execute_page_action". Cả trình duyệt và tiện ích
có thể sử dụng các lệnh trong cùng một tiện ích.
Ghi đè trang
Tiện ích có thể ghi đè và thay thế trang web Lịch sử, Thẻ mới hoặc Dấu trang bằng HTML tùy chỉnh. Giống như cửa sổ bật lên, nội dung này có thể chứa logic và phong cách chuyên biệt nhưng không cho phép JavaScript cùng dòng. Một 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"
},
...
}
Trường "newtab" phải được thay thế bằng "bookmarks" hoặc "history" khi ghi đè các trường đó
.
<html>
<head>
<title>New Tab</title>
</head>
<body>
<h1>Hello World</h1>
<script src="logic.js"></script>
</body>
</html>