อินเทอร์เฟซผู้ใช้ของส่วนขยายควรมีจุดประสงค์และเรียบง่าย เช่นเดียวกับส่วนขยายเอง UI ควรปรับแต่งหรือปรับปรุงประสบการณ์การท่องเว็บโดยไม่รบกวนการท่องเว็บ
คู่มือนี้จะอธิบายฟีเจอร์อินเทอร์เฟซผู้ใช้ที่จำเป็นและไม่บังคับ ใช้เพื่อทำความเข้าใจวิธีและเวลา ในการใช้คอมโพเนนต์ UI ต่างๆ ภายในส่วนขยาย
เปิดใช้งานส่วนขยายในทุกหน้า
ใช้ browser_action เมื่อฟีเจอร์ของส่วนขยายทํางานได้ในสถานการณ์ส่วนใหญ่
ลงทะเบียนการดำเนินการในเบราว์เซอร์
ลงทะเบียนช่อง "browser_action" ในไฟล์ Manifest
{
"name": "My Awesome browser_action Extension",
...
"browser_action": {
...
}
...
}
การประกาศ "browser_action" จะทำให้ไอคอนมีสี ซึ่งบ่งบอกว่าส่วนขยายพร้อมให้บริการแก่ผู้ใช้
เพิ่มป้าย
ป้ายจะแสดงแบนเนอร์สีที่มีอักขระสูงสุด 4 ตัวที่ด้านบนของไอคอนเบราว์เซอร์ โดยจะใช้ได้เฉพาะส่วนขยายที่ประกาศ "browser_action" ในไฟล์ Manifest เท่านั้น
ใช้ป้ายเพื่อระบุสถานะของส่วนขยาย ตัวอย่างเหตุการณ์ดื่มน้ำจะแสดงป้ายที่มีข้อความ "เปิด" เพื่อแสดงให้ผู้ใช้เห็นว่าตั้งปลุกสำเร็จ และจะไม่แสดงอะไรเลยเมื่อส่วนขยายไม่ได้ใช้งาน
ตั้งค่าข้อความของป้ายโดยเรียกใช้ chrome.browserAction.setBadgeText และตั้งค่าสีแบนเนอร์
โดยเรียกใช้ chrome.browserAction.setBadgeBackgroundColor
chrome.browserAction.setBadgeText({text: 'ON'});
chrome.browserAction.setBadgeBackgroundColor({color: '#4688F1'});
เปิดใช้งานส่วนขยายในบางหน้า
ใช้ page_action เมื่อฟีเจอร์ของส่วนขยายใช้ได้เฉพาะในสถานการณ์ที่กำหนด
ประกาศการทำงานของหน้าเว็บ
ลงทะเบียนช่อง "page_action" ในไฟล์ Manifest
{
"name": "My Awesome page_action Extension",
...
"page_action": {
...
}
...
}
การประกาศ "page_action" จะเปลี่ยนสีไอคอนเมื่อส่วนขยายพร้อมให้บริการแก่ผู้ใช้เท่านั้น
มิฉะนั้นไอคอนจะแสดงเป็นระดับสีเทา
กำหนดกฎสำหรับการเปิดใช้งานส่วนขยาย
กำหนดกฎสำหรับเวลาที่ส่วนขยายใช้งานได้โดยเรียก chrome.declarativeContent ภายใต้
runtime.onInstalled Listener ในสคริปต์พื้นหลัง ส่วนขยายตัวอย่างการดำเนินการในหน้าเว็บตาม URL
จะตั้งค่าเงื่อนไขที่ URL ต้องมี "g" หากเป็นไปตามเงื่อนไข ส่วนขยายจะเรียกใช้ 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() ]
}
]);
});
});
เปิดหรือปิดใช้ส่วนขยาย
ส่วนขยายที่ใช้ "page_action" สามารถเปิดใช้งานและปิดใช้แบบไดนามิกได้โดยการเรียก pageAction.show และ pageAction.hide
ส่วนขยายตัวอย่าง Mappy จะสแกนหน้าเว็บเพื่อหาที่อยู่และแสดงตำแหน่งบนแผนที่แบบคงที่ในป๊อปอัป เนื่องจากส่วนขยายขึ้นอยู่กับเนื้อหาของหน้าเว็บ จึงไม่สามารถประกาศกฎ
เพื่อคาดการณ์ว่าหน้าใดจะเกี่ยวข้อง แต่หากพบที่อยู่บนหน้าเว็บ ส่วนขยายจะเรียกใช้ pageAction.show เพื่อเปลี่ยนสีไอคอนและส่งสัญญาณว่าใช้ส่วนขยายในแท็บนั้นได้
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});
});
ระบุไอคอนส่วนขยาย
ส่วนขยายต้องมีไอคอนอย่างน้อย 1 รายการเพื่อเป็นตัวแทน ระบุไอคอนในรูปแบบ PNG เพื่อให้ได้ผลลัพธ์ ภาพที่ดีที่สุด แม้ว่าระบบจะยอมรับรูปแบบใดก็ตามที่ WebKit รองรับ ซึ่งรวมถึง BMP, GIF, ICO และ JPEG
กำหนดไอคอนแถบเครื่องมือ
ไอคอนเฉพาะของแถบเครื่องมือจะได้รับการลงทะเบียนในช่อง "default_icon" ภายใต้
browser_action หรือ page_action ในไฟล์ Manifest เราขอแนะนำให้ระบุหลายขนาดเพื่อปรับขนาดให้เหมาะกับพื้นที่ 16 DIP ขอแนะนำให้ใช้ขนาด 16x16 และ 32x32 เป็นอย่างน้อย
{
"name": "My Awesome page_action Extension",
...
"page_action": {
"default_icon": {
"16": "extension_toolbar_icon16.png",
"32": "extension_toolbar_icon32.png"
}
}
...
}
ไอคอนทั้งหมดควรเป็นสี่เหลี่ยมจัตุรัส มิฉะนั้นอาจบิดเบี้ยว หากไม่มีการระบุไอคอน Chrome จะเพิ่มไอคอนทั่วไปลงในแถบเครื่องมือ
สร้างและลงทะเบียนไอคอนเพิ่มเติม
รวมไอคอนเพิ่มเติมในขนาดต่อไปนี้เพื่อใช้ภายนอกแถบเครื่องมือ
| ขนาดไอคอน | การใช้ไอคอน |
|---|---|
| 16x16 | ไอคอน Fav ในหน้าของส่วนขยาย |
| 32x32 | คอมพิวเตอร์ Windows มักต้องใช้ขนาดนี้ การระบุตัวเลือกนี้จะป้องกันไม่ให้ขนาดบิดเบือนจากการย่อตัวเลือก 48x48 |
| 48x48 | แสดงในหน้าการจัดการส่วนขยาย |
| 128x128 | แสดงเมื่อติดตั้งและใน Chrome เว็บสโตร์ |
ลงทะเบียนไอคอนในไฟล์ Manifest ภายใต้ฟิลด์ "icons"
{
"name": "My Awesome Extension",
...
"icons": {
"16": "extension_icon16.png",
"32": "extension_icon32.png",
"48": "extension_icon48.png",
"128": "extension_icon128.png"
}
...
}
ฟีเจอร์ UI เพิ่มเติม
ป๊อปอัป
ป๊อปอัปคือไฟล์ HTML ที่แสดงในหน้าต่างพิเศษเมื่อผู้ใช้คลิกไอคอนแถบเครื่องมือ ป๊อปอัปทำงานคล้ายกับหน้าเว็บมาก โดยอาจมีลิงก์ไปยังสไตล์ชีตและแท็กสคริปต์ แต่ ไม่อนุญาตให้ใช้ JavaScript แบบอินไลน์
ป๊อปอัปตัวอย่างเหตุการณ์ดื่มน้ำจะแสดงตัวเลือกตัวจับเวลาที่มี ผู้ใช้ตั้งปลุกได้โดยคลิกปุ่มใดปุ่มหนึ่งที่ระบุไว้
<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>
คุณลงทะเบียนป๊อปอัปได้ในไฟล์ Manifest ภายใต้การดำเนินการของเบราว์เซอร์หรือการดำเนินการของหน้าเว็บ
{
"name": "Drink Water Event",
...
"browser_action": {
"default_popup": "popup.html"
}
...
}
นอกจากนี้ คุณยังตั้งค่าป๊อปอัปแบบไดนามิกได้โดยเรียกใช้ browserAction.setPopup หรือ
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'});
}
});
เคล็ดลับเครื่องมือ
ใช้เคล็ดลับเครื่องมือเพื่ออธิบายสั้นๆ หรือให้คำแนะนำแก่ผู้ใช้เมื่อวางเมาส์เหนือไอคอนเบราว์เซอร์
เคล็ดลับเครื่องมือจะลงทะเบียนในฟิลด์ "default_title" browser_action หรือ page_action
ในไฟล์ Manifest
{
"name": "Tab Flipper",
...
"browser_action": {
"default_title": "Press Ctrl(Win)/Command(Mac)+Shift+Right/Left to flip tabs"
}
...
}
นอกจากนี้ คุณยังตั้งค่าหรืออัปเดตเคล็ดลับเครื่องมือได้โดยการเรียกใช้ browserAction.setTitle และ
pageAction.setTitle
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.browserAction.setTitle({tabId: tab.id, title: "You are on tab:" + tab.id});
});
สตริงภาษาเฉพาะจะได้รับการติดตั้งใช้งานด้วยการปรับให้เป็นแบบสากล สร้างไดเรกทอรีเพื่อจัดเก็บข้อความเฉพาะภาษาภายในโฟลเดอร์ที่ชื่อ _locales เช่น
_locales/en/messages.json_locales/es/messages.json
จัดรูปแบบข้อความภายใน messages.json ของแต่ละภาษา
{
"__MSG_tooltip__": {
"message": "Hello!",
"description": "Tooltip Greeting."
}
}
{
"__MSG_tooltip__": {
"message": "Hola!",
"description": "Tooltip Greeting."
}
}
ใส่ชื่อข้อความในช่องเคล็ดลับเครื่องมือแทนข้อความเพื่อให้แปลเป็นภาษาอื่นได้
{
"name": "Tab Flipper",
...
"browser_action": {
"default_title": "__MSG_tooltip__"
}
...
}
แถบอเนกประสงค์
ผู้ใช้เรียกใช้ฟังก์ชันการทำงานของส่วนขยายผ่านแถบอเนกประสงค์ได้ ใส่ช่อง "omnibox" ใน
ไฟล์ Manifest และกำหนดคีย์เวิร์ด ส่วนขยายตัวอย่าง Omnibox New Tab Search ใช้ "nt" เป็น
คีย์เวิร์ด
{
"name": "Omnibox New Tab Search",\
...
"omnibox": { "keyword" : "nt" },
"default_icon": {
"16": "newtab_search16.png",
"32": "newtab_search32.png"
}
...
}
เมื่อผู้ใช้พิมพ์ "nt" ลงในแถบอเนกประสงค์ ระบบจะเปิดใช้งานส่วนขยาย หากต้องการส่งสัญญาณนี้ให้ผู้ใช้ ระบบจะเปลี่ยนไอคอนขนาด 16x16 ที่ระบุให้เป็นสีเทาและรวมไว้ในแถบอเนกประสงค์ข้างชื่อส่วนขยาย
ส่วนขยายจะรอเหตุการณ์ omnibox.onInputEntered หลังจากทริกเกอร์แล้ว ส่วนขยายจะเปิดแท็บใหม่ที่มีการค้นหาใน Google สำหรับรายการของผู้ใช้
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 });
});
เมนูตามบริบท
เพิ่มตัวเลือกเมนูตามบริบทใหม่โดยให้สิทธิ์ "contextMenus" ในไฟล์ Manifest
{
"name": "Global Google Search",
...
"permissions": [
"contextMenus",
"storage"
],
"icons": {
"16": "globalGoogle16.png",
"48": "globalGoogle48.png",
"128": "globalGoogle128.png"
}
...
}
ไอคอน 16x16 จะแสดงข้างรายการเมนูใหม่
สร้างเมนูตามบริบทโดยเรียกใช้ contextMenus.create ในสคริปต์ที่ทำงานในเบื้องหลัง การดำเนินการนี้
ควรทำภายใต้เหตุการณ์ Listener ของ 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'
};
ตัวอย่างเมนูตามบริบทของ Google Search ทั่วโลกจะสร้างตัวเลือกหลายรายการจากรายการใน locales.js เมื่อส่วนขยายมีเมนูตามบริบทมากกว่า 1 รายการ Google Chrome จะยุบเมนูเหล่านั้นเป็นเมนูหลักเดียวโดยอัตโนมัติ
คำสั่ง
ส่วนขยายสามารถกำหนดคำสั่งที่เฉพาะเจาะจงและเชื่อมโยงกับชุดแป้นที่กดร่วมกันได้ ลงทะเบียนคำสั่งอย่างน้อย 1 รายการในไฟล์ Manifest ภายใต้ช่อง "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"
}
}
...
}
คุณใช้คำสั่งเพื่อระบุทางลัดของเบราว์เซอร์ใหม่หรือทางเลือกได้ ส่วนขยายตัวอย่าง Tab Flipper
จะรับฟังเหตุการณ์ commands.onCommand ในสคริปต์พื้นหลังและกำหนด
ฟังก์ชันการทำงานสำหรับการผสมผสานที่ลงทะเบียนแต่ละรายการ
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});
});
});
นอกจากนี้ คำสั่งยังสร้างการเชื่อมโยงคีย์ที่ทำงานร่วมกับส่วนขยายได้โดยเฉพาะ ตัวอย่าง Hello Extensions จะมีคำสั่งในการเปิดป๊อปอัป
{
"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"
}
}
}
เนื่องจากส่วนขยายกำหนด browser_action จึงสามารถระบุ "execute_browser_action" ใน
คำสั่งเพื่อเปิดไฟล์ป๊อปอัปได้โดยไม่ต้องมีสคริปต์พื้นหลัง หากใช้
page_action คุณสามารถแทนที่ด้วย "execute_page_action" ได้ คุณใช้ทั้งคำสั่งของเบราว์เซอร์และส่วนขยายในส่วนขยายเดียวกันได้
ลบล้างหน้าเว็บ
ส่วนขยายสามารถลบล้างและแทนที่หน้าเว็บประวัติ แท็บใหม่ หรือบุ๊กมาร์กด้วย ไฟล์ HTML ที่กำหนดเองได้ ป๊อปอัปสามารถมีตรรกะและสไตล์เฉพาะได้ แต่ไม่อนุญาตให้ใช้ JavaScript แบบอินไลน์ ส่วนขยายเดียวจะลบล้างได้เพียง 1 ใน 3 หน้าที่เป็นไปได้เท่านั้น
ลงทะเบียนหน้าการลบล้างในไฟล์ Manifest ภายใต้ช่อง "chrome_url_overrides"
{
"name": "Awesome Override Extension",
...
"chrome_url_overrides" : {
"newtab": "override_page.html"
},
...
}
ควรแทนที่ฟิลด์ "newtab" ด้วย "bookmarks" หรือ "history" เมื่อลบล้างหน้าเหล่านั้น
<html>
<head>
<title>New Tab</title>
</head>
<body>
<h1>Hello World</h1>
<script src="logic.js"></script>
</body>
</html>