User interface components

This is a catalog of user interface elements available in extensions. Each entry contains:

  • An image of the element (if applicable).
  • A description of what it's for.
  • Related interface elements (if applicable).
  • Links to implementation instructions and code samples.

These elements are different ways of invoking extension features. You're not required to implement all of them. In fact, some use cases might not use any of them. For example, a link shorter could act on the displayed URL using a keyboard shortcut and put the shortened link into the clipboard programmatically.

Actions

An action is what happens when a user clicks the action icon for your extension. An action can either invoke an extension feature using the Action API or open a popup that lets users invoke multiple extension features. Tell users what the action does using a tooltip.

Both a pinned extension and an unpinned extension.
Figure 1: Pinned (left) and unpinned (right) extensions.

To learn to build an action, see Implement an action, or examine the action samples.

Action icons

An extension requires at least one icon to represent it. Users click the icon to invoke an action, whether that action invokes an extension feature using the Action API or opens a popup.

The icon for the Google dictionary extension.
Figure 2: Icon for the Google dictionary extension (in red).

You can also add a label, here called a 'badge', to the icon to communicate such things as extension state or that actions are required by the user.

To learn to build an action, see Implement an action, or examine the action samples.

Badges

Badges are bits of formatted text placed on top of the action icon to indicate such things as extension state or that actions are required by the user. You can set the text of the badge by calling chrome.action.setBadgeText() and the banner color by calling chrome.action.setBadgeBackgroundColor().

An extension icon without a badge and with a badge.
Figure 3: An extension icon without a badge (left) and with a badge (right).

To learn to build an action, see Implement an action, or the Drink water sample.

Commands

Commands are key combinations that invoke an extension feature. Define key combinations in the manifest.json file and respond to them using the Commands API. To learn to implement a command, see the API reference, or the chrome.commands sample.

Context menu

A context menu appears for the alternate click (frequently called the right click) of a mouse. Define context menus using the Context Menus API.

A nested context menu.
Figure 4: A context menu and a nested sub menu.

To learn to implement a context menu, see the context menu samples.

Omnibox

You can interact with users using the Chrome omnibox. When a user enters extension-defined keywords in the omnibox, your extension controls what the user sees in the omnibox. Define keywords in the manifest.json and respond to them using the Omnibox API.

The browser's omnibox.
Figure 5: The browser's omnibox.

To learn to override the omnibox, see Trigger actions from the omnibox, or the quick API reference sample.

Override pages

An extension can override one of these built-in Chrome pages:

  • History
  • New tab
  • Bookmarks
An example of a custom history page.
Figure 6: An example of a custom history page.

To learn to override Chrome pages, see Override Chrome pages, or the override sample.

Popups

A popup is an action that displays a window letting users invoke multiple extension features. Popups can be opened if the user clicks the action icon, via a keyboard shortcut or by calling chrome.action.openPopup().

An example of a popup.
Figure 7: An example of a popup.

To learn to build a popup, see, Add a popup. You can also download a step through one of the action samples.

Side panels

A side panel lets users invoke extension features alongside web pages (see the image). A side panel can attach to a single tab or to a whole window. A side panel is controlled using the Side Panel API.

Dictionary extension defining the word
Figure 8: Dictionary extension defining the word "Extensions".

To learn to build a side panel, see the side panel use cases, or examine the side panel samples.

Tooltips

A tooltip is a way to show, when a user hovers a mouse of your action icon, what your extension's action does. By default, the tooltip displays the name of the extension.

An example tooltip for an action icon.
Figure 9: An example tooltip for an action icon.

To learn to add a tooltip, use the "default_title" member of the manifest files "action" key.

DevTools

You can add custom panels (what tabs are called in DevTools) to DevTools using the DevTools Panels API. Other DevTools APIs let you monitor windows and network traffic. You can also customize the DevTools recorder panel. Chrome DevTools' own Lighthouse panel started life as a DevTools extension.

Notifications

Post messages to a user's system tray using either the extensions Notifications API or the web platforms Notifications API.

An extension notification on mac.
Figure 10: An extension notification on mac.

To learn to use notifications, see Notify users.

Themes

A theme is a special kind of extension that changes the way the browser looks. Themes are packaged like regular extensions, but they don't contain JavaScript or HTML code.

An example theme.
Figure 11: An example theme.

To learn to build a theme, see What are themes?.

Other ways of interacting with users

This section describes other ways that your extension can interact with users. Although not strictly needed for a basic extension, they can be important parts of your extension. For many users, some of these features are absolutely essential to using the extension.

Accessibility

For many users, accessibility literally is the user interface, and its features can often be useful to those who don't need accessibility as a primary means of interacting with your extension. Learn the basics of making your extension accessible.

Internationalization

Speak to users in their own language. Learn to internationalize the interface.