Benutzeroberfläche entwerfen

Die Benutzeroberfläche der Erweiterung sollte zweckmäßig und minimalistisch sein. Genau wie Erweiterungen selbst sollte die Benutzeroberfläche die Browsernutzung anpassen oder verbessern, ohne davon abzulenken.

In diesem Leitfaden werden erforderliche und optionale Funktionen der Benutzeroberfläche beschrieben. Daraus können Sie ableiten, wie und wann Sie verschiedene UI-Elemente in einer Erweiterung implementieren sollten.

Erweiterung auf allen Seiten aktivieren

Verwenden Sie browser_action, wenn die Funktionen einer Erweiterung in den meisten Situationen funktionieren.

Browseraktion registrieren

Das Feld „"browser_action"“ ist im Manifest registriert.

{
  "name": "My Awesome browser_action Extension",
  ...
  "browser_action": {
    ...
  }
  ...
}

Wenn Sie "browser_action" deklarieren, bleibt das Symbol farbig und zeigt an, dass die Erweiterung für Nutzer verfügbar ist.

Abzeichen hinzufügen

Bei Badges wird ein farbiges Banner mit bis zu vier Zeichen über dem Browsersymbol angezeigt. Sie können nur von Erweiterungen verwendet werden, die "browser_action" in ihrem Manifest deklarieren.

Verwenden Sie Badges, um den Status der Erweiterung anzugeben. Im Beispiel für das Drink Water Event wird ein Badge mit „ON“ angezeigt, um dem Nutzer zu zeigen, dass er erfolgreich einen Alarm eingestellt hat. Wenn die Erweiterung inaktiv ist, wird nichts angezeigt.

Legen Sie den Text des Logos mit chrome.browserAction.setBadgeText und die Bannerfarbe mit chrome.browserAction.setBadgeBackgroundColor fest .

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 Umständen verfügbar sind.

Seitenaktion deklarieren

Das Feld „"page_action"“ ist im Manifest registriert.

{
  "name": "My Awesome page_action Extension",
  ...
  "page_action": {
    ...
  }
  ...
}

Wenn Sie "page_action" deklarieren, wird das Symbol nur dann farbig dargestellt, wenn die Erweiterung für Nutzer verfügbar ist. Andernfalls wird es in Graustufen angezeigt.

Regeln für die Aktivierung der Erweiterung definieren

Definieren Sie Regeln dafür, wann die Erweiterung verwendet werden kann, indem Sie chrome.declarativeContent im Listener runtime.onInstalled in einem Hintergrundskript aufrufen. In der Beispielerweiterung Page action by URL (Seitenaktion nach URL) wird eine Bedingung festgelegt, 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 dynamisch aktiviert und deaktiviert werden, indem pageAction.show und pageAction.hide aufgerufen werden.

Die Beispielerweiterung Mappy scannt eine Webseite nach einer Adresse und zeigt den Standort auf einer statischen Karte im Pop-up an. Da die Erweiterung vom Seiteninhalt abhängig ist, können keine Regeln deklariert werden, um vorherzusagen, welche Seiten relevant sein werden. Stattdessen wird pageAction.show aufgerufen, wenn auf einer Seite eine Adresse gefunden wird, um das Symbol zu fä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. Für optimale visuelle Ergebnisse sollten Sie Symbole im PNG-Format bereitstellen. Es werden jedoch alle von WebKit unterstützten Formate akzeptiert, einschließlich BMP, GIF, ICO und JPEG.

Symbolleistensymbole festlegen

Symbole für die Symbolleiste werden im Manifest im Feld "default_icon" unter browser_action oder page_action registriert. Es wird empfohlen, mehrere Größen anzugeben, um die 16 DIP-Einheiten zu berücksichtigen. 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, da sie sonst verzerrt dargestellt werden. Wenn keine Symbole angegeben werden, fügt Chrome ein generisches Symbol in die Symbolleiste ein.

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.

Registrieren Sie Symbole im Manifest im 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 sehr ähnlich wie eine Webseite. Es kann Links zu Stylesheets und Script-Tags enthalten, aber kein Inline-JavaScript.

Im Beispiel-Pop-up Trinkwasser-Erinnerung werden die verfügbaren Timer-Optionen angezeigt. Nutzer stellen einen Wecker, 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 „browser_action“ oder „page_action“ registriert werden.

{
  "name": "Drink Water Event",
  ...
  "browser_action": {
    "default_popup": "popup.html"
  }
  ...
}

Pop-ups können auch dynamisch festgelegt werden, indem Sie browserAction.setPopup oder pageAction.setPopup aufrufen.

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 einen Kurzinfo-Text, um Nutzern kurze Beschreibungen oder Anleitungen zu geben, wenn sie den Mauszeiger auf das Browsersymbol bewegen.

Die Kurzinfos werden im Feld "default_title" 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"
  }
...
}

Sie können auch Tooltips festlegen oder aktualisieren, indem Sie browserAction.setTitle und pageAction.setTitle aufrufen.

chrome.browserAction.onClicked.addListener(function(tab) {
  chrome.browserAction.setTitle({tabId: tab.id, title: "You are on tab:" + tab.id});
});

Spezialisierte Gebietsschema-Strings werden mit Internationalisierung implementiert. Erstellen Sie Verzeichnisse für sprachspezifische Nachrichten in einem Ordner namens _locales, z. B. so:

• _locales/en/messages.json
• _locales/es/messages.json

Nachrichten formatieren – das erfolgt in der messages.json der jeweiligen Sprache.

{
  "__MSG_tooltip__": {
      "message": "Hello!",
      "description": "Tooltip Greeting."
  }
}

{
  "__MSG_tooltip__": {
      "message": "Hola!",
      "description": "Tooltip Greeting."
  }
}

Geben Sie im Kurzinfofeld den Namen der Meldung anstelle der Meldung selbst an, um die Lokalisierung zu ermöglichen.

{
"name": "Tab Flipper",
  ...
  "browser_action": {
    "default_title": "__MSG_tooltip__"
  }
...
}

Omnibox

Nutzer können Erweiterungsfunktionen über die Omnibox aufrufen. Fügen Sie das Feld "omnibox" in das Manifest ein und weisen Sie ein Keyword zu. In der Beispielerweiterung Omnibox New Tab Search wird „nt“ als Keyword verwendet.

{
  "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 16 × 16-Symbol in Graustufen dargestellt und in der Omnibox neben dem Namen der Erweiterung angezeigt.

Die Erweiterung wartet auf das Ereignis omnibox.onInputEntered. Nachdem die Erweiterung ausgelöst wurde, wird ein neuer Tab mit einer Google-Suche nach der Eingabe des Nutzers geöffnet.

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 Kontextmenüoptionen hinzu, indem Sie die Berechtigung "contextMenus" im Manifest erteilen.

{
  "name": "Global Google Search",
  ...
  "permissions": [
    "contextMenus",
    "storage"
  ],
  "icons": {
    "16": "globalGoogle16.png",
    "48": "globalGoogle48.png",
    "128": "globalGoogle128.png"
  }
  ...
}

Das 16 × 16 Pixel große Symbol wird neben dem neuen Menüeintrag angezeigt.

Erstellen Sie ein Kontextmenü, indem Sie contextMenus.create im Hintergrundskript aufrufen. Dies sollte im 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 globale Kontextmenü der Google Suche werden mehrere Optionen aus der Liste in locales.js erstellt . Wenn eine Erweiterung mehr als ein Kontextmenü enthält, werden diese in Google Chrome automatisch in einem einzelnen übergeordneten Menü zusammengefasst.

Befehle

Erweiterungen können bestimmte Befehle definieren und sie an eine Tastenkombination binden. Registrieren Sie im Manifest unter dem Feld "commands" einen oder mehrere Befehle.

{
  "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"
    }
  }
  ...
}

Mit Befehlen können neue oder alternative Browser-Shortcuts bereitgestellt werden. Die Beispielerweiterung Tab Flipper (Tab-Wechsler) wartet im Hintergrundskript auf das commands.onCommand-Ereignis und definiert die Funktionalität 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});
  });
});

Mit Befehlen kann auch eine Tastenkombination erstellt werden, die speziell mit der Erweiterung funktioniert. Im Beispiel Hello Extensions wird ein Befehl zum Öffnen des Pop-ups angegeben.

{
  "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 "execute_browser_action" in den Befehlen zum Öffnen der Pop-up-Datei angeben, ohne ein Hintergrundskript einzufügen. Wenn Sie page_action verwenden, kann es durch "execute_page_action" ersetzt werden. Sowohl Browser- als auch Erweiterungsbefehle können in derselben Erweiterung verwendet werden.

Seiten überschreiben

Eine Erweiterung kann die Webseiten „Verlauf“, „Neuer Tab“ oder „Lesezeichen“ überschreiben und durch eine benutzerdefinierte HTML-Datei ersetzen. Wie bei einem Pop-up kann es spezielle Logik und Formatierung enthalten, Inline-JavaScript ist jedoch nicht zulässig. Eine einzelne Erweiterung kann nur eine der drei möglichen Seiten überschreiben.

Registrieren Sie eine Überschreibungsseite im Manifest im Feld "chrome_url_overrides".

{
  "name": "Awesome Override Extension",
  ...

  "chrome_url_overrides" : {
    "newtab": "override_page.html"
  },
  ...
}

Das Feld "newtab" sollte durch "bookmarks" oder "history" ersetzt werden, wenn diese Seiten überschrieben werden.

<html>
  <head>
  <title>New Tab</title>
  </head>
  <body>
    <h1>Hello World</h1>
  <script src="logic.js"></script>
  </body>
</html>