Giao diện người dùng của tiện ích phải có mục đích và ở mức tối thiểu. Cũng 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 bạn 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 tiện ích này để hiểu cách thức và thời điểm triển khai các thành phần 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
Hãy 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.
Thao tác đăng ký 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ẽ duy trì biểu tượng có màu, cho biết người dùng có thể sử dụng tiện ích.
Thêm huy hiệu
Huy hiệu sẽ hiển thị một biểu ngữ có màu với tối đa 4 ký tự ở trên cùng biểu tượng trình duyệt. Chỉ các tiện ích khai báo "browser_action" trong tệp kê khai mới có thể sử dụng các tiện ích này.
Sử dụng huy hiệu để cho biết trạng thái của tiện ích. Mẫu Drink Water Event (Sự kiện nước uống) sẽ hiển thị một huy hiệu có trạng thái "BẬT" để cho người dùng biết họ đã đặt chuông báo thành công và không hiển thị gì khi tiện ích ở 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ỉ có sẵn trong những 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ỉ tô màu biểu tượng khi tiện ích được cung cấp cho người dùng, nếu không, biểu tượng 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 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 Thao tác trên trang theo URL đặ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à tắt một cách linh hoạt bằng cách gọi pageAction.show và pageAction.hide.
Tiện ích mẫu Mappy quét trang web để tìm địa chỉ và hiển thị vị trí của trang web đó trên bản đồ tĩnh trong cửa sổ bật lên. Vì phụ thuộc vào nội dung trang, nên tiện ích này không thể khai báo các quy tắc để dự đoán trang nào sẽ có liên quan. Thay vào đó, nếu tìm thấy một địa chỉ trên trang, thì địa chỉ đó sẽ gọi pageAction.show để tô màu biểu tượng và cho biết tiện ích có thể sử 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 các biểu tượng tiện ích
Các tiện ích cần có ít nhất 1 biểu tượng thì mới thể hiện được. Cung cấp các biểu tượng ở định dạng PNG sẽ tạo ra kết quả trực quan tốt nhất, mặc dù mọi định dạng được WebKit hỗ trợ, bao gồm 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 của tệp kê khai. Chúng tôi khuyến khích việc thêm nhiều kích thước để mở rộng không gian 16 nhúng. 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 không có biểu tượng nào được cung cấp, Chrome sẽ thêm một biểu tượng chung vào thanh công cụ.
Tạo và đăng ký biểu tượng bổ sung
Bao gồm các biểu tượng bổ sung theo 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 | Sử dụng biểu tượng |
|---|---|
| 16x16 | biểu tượng trang web trên trang của tiện ích |
| 32x32 | Máy tính Windows thường yêu cầu kích thước này. Nếu bạn cung cấp tuỳ chọn này, thì tuỳ chọn kích thước 48x48 sẽ không bị biến dạng. |
| 48x48 | hiển thị trên trang quản lý tiện ích |
| 128x128 | sẽ hiển thị khi cài đặt và trong Cửa hàng Chrome trực tuyến |
Các biểu tượng đăng ký 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à một tệp HTML được hiển thị trong cửa sổ đặc biệt khi người dùng nhấp vào biểu tượng thanh công cụ. Cửa sổ bật lên hoạt động rất giống như trang web; cửa sổ này có thể chứa đườ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 cùng dòng.
Ví dụ về cửa sổ bật lên Drink Water Event (Sự kiện nước uống) hiển thị các lựa chọn hẹn giờ có sẵn. Người dùng đặt chuông báo 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, bằng thao tác trên trình duyệt hoặc thao tác 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ú 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 di chuột lên biểu tượng trình duyệt.
Các chú giải công cụ đượ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ú giải công cụ 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 cơ chế Quốc tế hoá. Tạo thư mục chứa thông báo dành riêng cho ngôn ngữ lưu trữ trong một thư mục có tên _locales, như sau:
_locales/en/messages.json_locales/es/messages.json
Định dạng thư 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 của thông báo vào trường chú giải công cụ 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 từ khoá. Tiện ích mẫu Tìm kiếm thẻ mới trên 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, tiện ích sẽ chuyển sang màu xám 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 sẽ theo dõi sự kiện omnibox.onInputEntered. Sau khi được kích hoạt, tiện ích này sẽ mở một thẻ mới có chứa nội dung tìm kiếm của Google về 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 về 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 trình đơn mới.
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 theo bối cảnh của Google Tìm kiếm trên toàn cầu sẽ tạo nhiều tuỳ 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 sẽ tự động thu gọn các trình đơn đó thành một trình đơn mẹ.
Lệnh
Tiện ích có thể xác định các lệnh cụ thể và liên kết chúng 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"
}
}
...
}
Có thể dùng các lệnh để cung cấp lối tắt mới hoặc thay thế cho trình duyệt. Tiện ích mẫu Tab Flipper sẽ 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 liên kết phím hoạt động đặc biệt với tiện ích tương ứng. Ví dụ về Hello Extensions đư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 này 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 bao gồm tập lệnh nền. Nếu sử dụng page_action, bạn có thể thay thế nó bằng "execute_page_action". Bạn có thể sử dụng cả lệnh trình duyệt và lệnh tiện ích trong cùng một tiện ích.
Ghi đè 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ư một cửa sổ bật lên, cửa sổ 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 dòng. Mỗi tiện ích chỉ được 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>