De gebruikersinterface van een extensie moet doelgericht en minimalistisch zijn. Net als de extensies zelf, moet de interface de browse-ervaring aanpassen of verbeteren zonder deze te verstoren.
Deze handleiding behandelt de vereiste en optionele gebruikersinterfacefuncties. Gebruik hem om te begrijpen hoe en wanneer u verschillende UI-elementen binnen een extensie moet implementeren.
Activeer de extensie op alle pagina's.
Gebruik een browser_action wanneer de functies van een extensie in de meeste situaties functioneel zijn.
Registreer browseractie
Het veld "browser_action" wordt geregistreerd in het manifest.
{
"name": "My Awesome browser_action Extension",
...
"browser_action": {
...
}
...
}
Door "browser_action" te declareren, blijft het pictogram gekleurd, wat aangeeft dat de extensie beschikbaar is voor gebruikers.
Voeg een badge toe
Badges tonen een gekleurde banner met maximaal vier tekens boven het browserpictogram. Ze kunnen alleen worden gebruikt door extensies die "browser_action" in hun manifest hebben opgenomen.
Gebruik badges om de status van de extensie aan te geven. In het voorbeeld 'Drink Water Event' wordt een badge met 'AAN' weergegeven om de gebruiker te laten zien dat er succesvol een alarm is ingesteld. Er wordt niets weergegeven wanneer de extensie inactief is.
Stel de tekst van de badge in door chrome.browserAction.setBadgeText aan te roepen en de bannerkleur door chrome.browserAction.setBadgeBackgroundColor aan te roepen.
chrome.browserAction.setBadgeText({text: 'ON'});
chrome.browserAction.setBadgeBackgroundColor({color: '#4688F1'});
Activeer de extensie op geselecteerde pagina's.
Gebruik page_action wanneer de functies van een extensie alleen onder bepaalde omstandigheden beschikbaar zijn.
Declareer pagina-actie
Het veld "page_action" is geregistreerd in het manifest.
{
"name": "My Awesome page_action Extension",
...
"page_action": {
...
}
...
}
Door "page_action" te declareren, wordt het pictogram alleen gekleurd wanneer de extensie beschikbaar is voor gebruikers; anders wordt het in grijstinten weergegeven.
Definieer regels voor het activeren van de extensie.
Definieer regels voor wanneer de extensie bruikbaar is door chrome.declarativeContent aan te roepen onder de runtime.onInstalled -listener in een achtergrondscript . De voorbeeldextensie 'Page action by URL' stelt als voorwaarde dat de URL een 'g' moet bevatten. Als aan de voorwaarde wordt voldaan, roept de extensie declarativeContent.ShowPageAction() aan.
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() ]
}
]);
});
});
De extensie in- of uitschakelen
Extensies die "page_action" gebruiken, kunnen dynamisch worden geactiveerd en gedeactiveerd door pageAction.show en pageAction.hide aan te roepen.
De Mappy -voorbeeldextensie scant een webpagina op een adres en toont de locatie ervan op een statische kaart in een pop-upvenster . Omdat de extensie afhankelijk is van de pagina-inhoud, kan deze geen regels definiëren om te voorspellen welke pagina's relevant zijn. In plaats daarvan roept de extensie, als er een adres op een pagina wordt gevonden, de pageAction.show aan om het pictogram te kleuren en aan te geven dat de extensie op dat tabblad bruikbaar is.
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});
});
Geef de extensiepictogrammen weer.
Voor extensies is minimaal één pictogram vereist. Lever pictogrammen aan in PNG-formaat voor het beste visuele resultaat, hoewel elk door WebKit ondersteund formaat, zoals BMP, GIF, ICO en JPEG, wordt geaccepteerd.
Wijs pictogrammen toe aan de werkbalk.
Icons specific to the toolbar are registered in the "default_icon" field under browser_action or page_action in the manifest. Including multiple sizes is encouraged to scale for the 16-dip space. At minimum, 16x16 and 32x32 sizes are recommended.
{
"name": "My Awesome page_action Extension",
...
"page_action": {
"default_icon": {
"16": "extension_toolbar_icon16.png",
"32": "extension_toolbar_icon32.png"
}
}
...
}
Alle pictogrammen moeten vierkant zijn, anders kunnen ze vervormd raken. Als er geen pictogrammen worden opgegeven, voegt Chrome een standaardpictogram toe aan de werkbalk.
Maak en registreer extra pictogrammen
Voeg extra pictogrammen in de volgende formaten toe voor gebruik buiten de werkbalk.
| Pictogramgrootte | Pictogramgebruik |
|---|---|
| 16x16 | favicon op de pagina's van de extensie |
| 32x32 | Windows-computers vereisen vaak dit formaat. Door deze optie aan te bieden, wordt voorkomen dat de afmetingen vervormen bij het verkleinen van de 48x48-optie. |
| 48x48 | wordt weergegeven op de pagina voor extensiebeheer |
| 128x128 | Dit wordt weergegeven tijdens de installatie en in de Chrome Webstore. |
Registreer pictogrammen in het manifest onder het veld "icons" .
{
"name": "My Awesome Extension",
...
"icons": {
"16": "extension_icon16.png",
"32": "extension_icon32.png",
"48": "extension_icon48.png",
"128": "extension_icon128.png"
}
...
}
Extra UI-functies
Pop-up
Een pop-up is een HTML-bestand dat in een speciaal venster wordt weergegeven wanneer de gebruiker op het pictogram in de werkbalk klikt. Een pop-up werkt vrijwel hetzelfde als een webpagina; het kan links naar stylesheets en scripttags bevatten, maar staat geen inline JavaScript toe.
In het voorbeeldvenster 'Drink water' worden de beschikbare timeropties weergegeven. Gebruikers kunnen een alarm instellen door op een van de knoppen te klikken.
<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>
De pop-up kan worden geregistreerd in het manifest, onder browseractie of pagina-actie.
{
"name": "Drink Water Event",
...
"browser_action": {
"default_popup": "popup.html"
}
...
}
Pop-ups kunnen ook dynamisch worden ingesteld door browserAction.setPopup of pageAction.setPopup aan te roepen.
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'});
}
});
Tooltip
Gebruik een tooltip om gebruikers korte beschrijvingen of instructies te geven wanneer ze met de muis over het browserpictogram bewegen.
Tooltips worden geregistreerd in het veld "default_title" in browser_action of page_action in het manifest.
{
"name": "Tab Flipper",
...
"browser_action": {
"default_title": "Press Ctrl(Win)/Command(Mac)+Shift+Right/Left to flip tabs"
}
...
}
Tooltips kunnen ook worden ingesteld of bijgewerkt door browserAction.setTitle en pageAction.setTitle aan te roepen.
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.browserAction.setTitle({tabId: tab.id, title: "You are on tab:" + tab.id});
});
Gespecialiseerde landspecifieke strings worden geïmplementeerd met Internationalization . Maak mappen aan om taalspecifieke berichten in op te slaan, bijvoorbeeld in een map genaamd _locales , zoals dit:
-
_locales/en/messages.json -
_locales/es/messages.json
Formatteer de berichten in messages.json bestand van elke taal.
{
"__MSG_tooltip__": {
"message": "Hello!",
"description": "Tooltip Greeting."
}
}
{
"__MSG_tooltip__": {
"message": "Hola!",
"description": "Tooltip Greeting."
}
}
Voeg de naam van het bericht toe aan het tooltipveld in plaats van het bericht zelf om lokalisatie mogelijk te maken.
{
"name": "Tab Flipper",
...
"browser_action": {
"default_title": "__MSG_tooltip__"
}
...
}
Omnibox
Users can invoke extension functionality through the omnibox . Include the "omnibox" field in the manifest and designate a keyword. The Omnibox New Tab Search sample extension uses "nt" as the keyword.
{
"name": "Omnibox New Tab Search",\
...
"omnibox": { "keyword" : "nt" },
"default_icon": {
"16": "newtab_search16.png",
"32": "newtab_search32.png"
}
...
}
Wanneer de gebruiker "nt" in de adresbalk typt, wordt de extensie geactiveerd. Om dit aan de gebruiker kenbaar te maken, wordt het meegeleverde 16x16-pictogram grijs weergegeven en in de adresbalk naast de extensienaam geplaatst.
De extensie luistert naar de omnibox.onInputEntered -gebeurtenis. Zodra deze wordt geactiveerd, opent de extensie een nieuw tabblad met een Google-zoekopdracht voor de invoer van de gebruiker.
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 });
});
Contextmenu
Voeg nieuwe contextmenu- opties toe door de machtiging "contextMenus" in het manifest te verlenen.
{
"name": "Global Google Search",
...
"permissions": [
"contextMenus",
"storage"
],
"icons": {
"16": "globalGoogle16.png",
"48": "globalGoogle48.png",
"128": "globalGoogle128.png"
}
...
}
Het 16x16-pictogram wordt naast de nieuwe menuoptie weergegeven.
Maak een contextmenu aan door in het achtergrondscript de contextMenus.create aan te roepen. Dit moet gebeuren binnen de runtime.onInstalled -listenergebeurtenis.
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'
};
Het contextmenu van Global Google Search maakt in locales.js meerdere opties aan op basis van de lijst. Wanneer een extensie meer dan één contextmenu bevat, voegt Google Chrome deze automatisch samen tot één overkoepelend menu.
Commando's
Extensies kunnen specifieke commando's definiëren en deze koppelen aan een toetsencombinatie. Registreer een of meer commando's in het manifest onder het veld "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"
}
}
...
}
Commando's kunnen worden gebruikt om nieuwe of alternatieve browsersnelkoppelingen te bieden. De voorbeeldextensie Tab Flipper luistert naar de gebeurtenis commands.onCommand in het achtergrondscript en definieert functionaliteit voor elke geregistreerde combinatie.
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});
});
});
Commando's kunnen ook een toetsencombinatie creëren die specifiek werkt met de bijbehorende extensie. Het Hello Extensions -voorbeeld geeft een commando om de pop-up te openen.
{
"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"
}
}
}
Omdat de extensie een ` browser_action definieert, kan deze "execute_browser_action" in de commando's specificeren om het pop-upbestand te openen zonder een achtergrondscript mee te sturen. Bij gebruik van page_action kan dit worden vervangen door "execute_page_action" . Zowel browser- als extensiecommando's kunnen in dezelfde extensie worden gebruikt.
Override-pagina's
Een extensie kan de webpagina's Geschiedenis, Nieuw tabblad of Bladwijzers overschrijven en vervangen door een aangepast HTML-bestand. Net als een pop-up kan het specifieke logica en stijl bevatten, maar het staat geen inline JavaScript toe. Een enkele extensie kan slechts één van de drie mogelijke pagina's overschrijven.
Registreer een overschrijvingspagina in het manifest onder het veld "chrome_url_overrides" .
{
"name": "Awesome Override Extension",
...
"chrome_url_overrides" : {
"newtab": "override_page.html"
},
...
}
Het veld "newtab" moet worden vervangen door "bookmarks" of "history" wanneer deze pagina's worden overschreven.
<html>
<head>
<title>New Tab</title>
</head>
<body>
<h1>Hello World</h1>
<script src="logic.js"></script>
</body>
</html>