Die Benutzeroberfläche der Erweiterung sollte zielgerichtet und minimal sein. Genau wie die Erweiterungen selbst sollte die Benutzeroberfläche das Browsererlebnis anpassen oder verbessern, ohne davon abzulenken.
In diesem Leitfaden werden die erforderlichen und optionalen Funktionen der Benutzeroberfläche erläutert. Du erfährst, wie und wann du verschiedene UI-Elemente innerhalb einer Erweiterung implementierst.
Erweiterung auf allen Seiten aktivieren
In den meisten Situationen sollte eine browser_action verwendet werden, wenn die Funktionen einer Erweiterung funktionsfähig sind.
Browseraktion registrieren
Das Feld „"browser_action"“ ist im Manifest registriert.
{
"name": "My Awesome browser_action Extension",
...
"browser_action": {
...
}
...
}
Wenn Sie "browser_action" deklarieren, wird das Symbol farbig dargestellt, um darauf hinzuweisen, dass die Erweiterung für Nutzer verfügbar ist.
Abzeichen hinzufügen
Bei Badges wird über dem Browsersymbol ein farbiges Banner mit bis zu vier Zeichen angezeigt. Sie können nur von Erweiterungen verwendet werden, die in ihrem Manifest "browser_action" deklarieren.
Verwenden Sie Logos, um den Status der Erweiterung anzuzeigen. Im Beispiel Trinkwasserereignis wird ein Badge mit „AN“ angezeigt, das den Nutzer darüber informiert, dass er erfolgreich einen Alarm eingerichtet hat. Wenn die Erweiterung inaktiv ist, wird nichts angezeigt.
Legen Sie den Text des Logos fest, indem Sie chrome.browserAction.setBadgeText aufrufen, und die Bannerfarbe, indem Sie chrome.browserAction.setBadgeBackgroundColor aufrufen .
chrome.browserAction.setBadgeText({text: 'ON'});
chrome.browserAction.setBadgeBackgroundColor({color: '#4688F1'});
Erweiterung auf ausgewählten Seiten aktivieren
Verwenden Sie page_action, wenn die Funktionen einer Erweiterung nur unter bestimmten Bedingungen verfügbar sind.
Seitenaktion deklarieren
Das Feld „"page_action"“ ist im Manifest registriert.
{
"name": "My Awesome page_action Extension",
...
"page_action": {
...
}
...
}
Durch die Deklaration von "page_action" wird das Symbol nur dann eingefärbt, wenn die Erweiterung für Nutzer verfügbar ist. Andernfalls wird es in Graustufen angezeigt.
Regeln zur Aktivierung der Erweiterung definieren
Definieren Sie Regeln dafür, wann die Erweiterung verwendet werden kann, indem Sie chrome.declarativeContent unter dem runtime.onInstalled-Listener in einem Hintergrundskript aufrufen. Die Beispielerweiterung Seitenaktion nach URL legt eine Bedingung fest, dass die URL ein „g“ enthalten muss. Wenn die Bedingung erfüllt ist, ruft die Erweiterung declarativeContent.ShowPageAction() auf.
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() ]
}
]);
});
});
Erweiterung aktivieren oder deaktivieren
Erweiterungen, die "page_action" verwenden, können durch Aufrufen von pageAction.show und pageAction.hide dynamisch aktiviert und deaktiviert werden.
Die Beispielerweiterung Mappy scannt eine Webseite nach einer Adresse und zeigt deren Standort auf einer statischen Karte im Pop-up an. Da die Erweiterung vom Seiteninhalt abhängt, können keine Regeln deklariert werden, um vorherzusagen, welche Seiten relevant sind. Wird eine Adresse auf einer Seite gefunden, wird stattdessen pageAction.show aufgerufen, um das Symbol einzufärben und zu signalisieren, dass die Erweiterung auf diesem Tab verwendet werden kann.
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});
});
Erweiterungssymbole bereitstellen
Für Erweiterungen ist mindestens ein Symbol erforderlich. Stellen Sie Symbole im PNG-Format bereit, um die besten visuellen Ergebnisse zu erzielen. Es werden jedoch alle von WebKit unterstützten Formate akzeptiert, einschließlich BMP, GIF, ICO und JPEG.
Symbolleistensymbole festlegen
Spezifische Symbole für die Symbolleiste werden im Feld "default_icon" unter browser_action oder page_action im Manifest registriert. Es wird empfohlen, mehrere Größen für den 16-Dip-Bereich zu skalieren. Wir empfehlen mindestens die Größen 16 × 16 und 32 × 32.
{
"name": "My Awesome page_action Extension",
...
"page_action": {
"default_icon": {
"16": "extension_toolbar_icon16.png",
"32": "extension_toolbar_icon32.png"
}
}
...
}
Alle Symbole sollten quadratisch sein oder könnten verzerrt sein. Wenn keine Symbole angegeben sind, fügt Chrome der Symbolleiste ein generisches Symbol hinzu.
Zusätzliche Symbole erstellen und registrieren
Fügen Sie zusätzliche Symbole in den folgenden Größen für die Verwendung außerhalb der Symbolleiste hinzu.
| Symbolgröße | Symbolverwendung |
|---|---|
| 16x16 | Favicon auf den Seiten der Erweiterung |
| 32x32 | Bei Windows-Computern ist diese Größe häufig erforderlich. Wenn Sie diese Option angeben, wird verhindert, dass die Größenverzerrung bei der Option 48 x 48 verkleinert wird. |
| 48x48 | auf der Seite zum Verwalten von Erweiterungen |
| 128 × 128 | wird bei der Installation und im Chrome Web Store angezeigt |
Registrieren Sie Symbole im Manifest unter dem Feld "icons".
{
"name": "My Awesome Extension",
...
"icons": {
"16": "extension_icon16.png",
"32": "extension_icon32.png",
"48": "extension_icon48.png",
"128": "extension_icon128.png"
}
...
}
Zusätzliche UI-Funktionen
Pop-up
Ein Pop-up ist eine HTML-Datei, die in einem speziellen Fenster angezeigt wird, wenn der Nutzer auf das Symbol in der Symbolleiste klickt. Ein Pop-up funktioniert ähnlich wie eine Webseite. Es kann Links zu Stylesheets und Skript-Tags enthalten, lässt jedoch kein Inline-JavaScript zu.
Das Beispiel-Pop-up Trinkwasserereignis zeigt die verfügbaren Timer-Optionen. Nutzende stellen einen Alarm ein, indem sie auf eine der Schaltflächen klicken.
<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>
Das Pop-up kann im Manifest unter „Browseraktion“ oder „Seitenaktion“ registriert werden.
{
"name": "Drink Water Event",
...
"browser_action": {
"default_popup": "popup.html"
}
...
}
Pop-ups können auch dynamisch eingerichtet werden, indem browserAction.setPopup oder pageAction.setPopup aufgerufen wird.
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'});
}
});
Kurzinfo
Verwenden Sie eine Kurzinfo, um Nutzern kurze Beschreibungen oder Anleitungen zur Verfügung zu stellen, wenn Sie den Mauszeiger auf das Browsersymbol bewegen.
Kurzinfos werden im "default_title"-Feld browser_action oder page_action im Manifest registriert.
{
"name": "Tab Flipper",
...
"browser_action": {
"default_title": "Press Ctrl(Win)/Command(Mac)+Shift+Right/Left to flip tabs"
}
...
}
Kurzinfos können auch durch Aufrufen von browserAction.setTitle und pageAction.setTitle festgelegt oder aktualisiert werden.
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.browserAction.setTitle({tabId: tab.id, title: "You are on tab:" + tab.id});
});
Spezielle Sprachstrings werden durch die Internationalisierung implementiert. Erstellen Sie Verzeichnisse zur Speicherung sprachspezifischer Nachrichten im Ordner _locales. Beispiel:
_locales/en/messages.json_locales/es/messages.json
Formatiere Nachrichten in den messages.json der jeweiligen Sprache.
{
"__MSG_tooltip__": {
"message": "Hello!",
"description": "Tooltip Greeting."
}
}
{
"__MSG_tooltip__": {
"message": "Hola!",
"description": "Tooltip Greeting."
}
}
Wenn Sie die Lokalisierung aktivieren möchten, geben Sie statt der Nachricht den Namen der Nachricht in das Feld für die Kurzinfo ein.
{
"name": "Tab Flipper",
...
"browser_action": {
"default_title": "__MSG_tooltip__"
}
...
}
Omnibox
Nutzer können die Erweiterungsfunktion über die Omnibox aufrufen. Fügen Sie das Feld "omnibox" in das Manifest ein und legen Sie ein Keyword fest. Die Beispielerweiterung Omnibox auf dem Tab „Neuer Tab“ verwendet „nt“ als Keyword.
{
"name": "Omnibox New Tab Search",\
...
"omnibox": { "keyword" : "nt" },
"default_icon": {
"16": "newtab_search16.png",
"32": "newtab_search32.png"
}
...
}
Wenn der Nutzer „nt“ in die Omnibox eingibt, wird die Erweiterung aktiviert. Um dies dem Nutzer zu signalisieren, wird das bereitgestellte Symbol (16 × 16) in Graustufen dargestellt und in die Omnibox neben dem Namen der Erweiterung eingefügt.
Die Erweiterung wartet auf das Ereignis omnibox.onInputEntered. Nach ihrem Auslösen öffnet die Erweiterung einen neuen Tab mit einer Google-Suche nach dem Eintrag des Nutzers.
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 });
});
Kontextmenü
Fügen Sie neue Optionen für das Kontextmenü hinzu, indem Sie im Manifest die Berechtigung "contextMenus" gewähren.
{
"name": "Global Google Search",
...
"permissions": [
"contextMenus",
"storage"
],
"icons": {
"16": "globalGoogle16.png",
"48": "globalGoogle48.png",
"128": "globalGoogle128.png"
}
...
}
Das 16 x 16-Symbol wird neben dem neuen Menüeintrag angezeigt.
Erstellen Sie ein Kontextmenü, indem Sie im Hintergrundskript contextMenus.create aufrufen. Dies sollte unter dem Listener-Ereignis runtime.onInstalled erfolgen.
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'
};
Im Beispiel für das Kontextmenü der globalen Google Suche werden mehrere Optionen aus der Liste in locales.js erstellt . Wenn eine Erweiterung mehr als ein Kontextmenü enthält, werden diese von Google Chrome automatisch zu einem einzigen übergeordneten Menü minimiert.
Befehle
Erweiterungen können bestimmte Befehle definieren und an eine Tastenkombination binden. Registrieren Sie einen oder mehrere Befehle im Manifest im Feld "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"
}
}
...
}
Mithilfe von Befehlen können neue oder alternative Browser-Tastenkombinationen bereitgestellt werden. Die Beispielerweiterung Tab Flipper überwacht das Ereignis commands.onCommand im Hintergrundskript und definiert die Funktionen für jede registrierte Kombination.
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});
});
});
Befehle können auch eine Tastenkombination erstellen, die speziell mit der entsprechenden Erweiterung funktioniert. Das Beispiel Hello Extensions enthält einen Befehl zum Öffnen des Pop-ups.
{
"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"
}
}
}
Da die Erweiterung ein browser_action definiert, kann sie in den Befehlen "execute_browser_action" angeben, um die Pop-up-Datei ohne Hintergrundskript zu öffnen. Wenn Sie page_action verwenden, kann es durch "execute_page_action" ersetzt werden. Browser- und Erweiterungsbefehle können in derselben Erweiterung verwendet werden.
Seiten überschreiben
Eine Erweiterung kann die Webseite „Verlauf“, „Neuer Tab“ oder „Lesezeichen“ überschreiben und durch eine benutzerdefinierte HTML-Datei ersetzen. Wie ein Popup kann es eine spezielle Logik und einen speziellen Stil enthalten, lässt jedoch kein Inline-JavaScript zu. Eine einzelne Erweiterung kann nur eine der drei möglichen Seiten überschreiben.
Registrieren Sie im Manifest unter dem Feld "chrome_url_overrides" eine Überschreibungsseite.
{
"name": "Awesome Override Extension",
...
"chrome_url_overrides" : {
"newtab": "override_page.html"
},
...
}
Das Feld "newtab" muss beim Überschreiben dieser Seiten durch "bookmarks" oder "history" ersetzt werden.
<html>
<head>
<title>New Tab</title>
</head>
<body>
<h1>Hello World</h1>
<script src="logic.js"></script>
</body>
</html>