Google Chrome Extensions: UI Design

Uploaded by GoogleDevelopers on 07.12.2009

Hi I am Erik and I am a software engineer working on Google Chrome extensions.
In this video I am going to talk about the user interface for extensions.
Google Chrome's user-interface design emphasizes "content, not chrome" which means we try to
minimize the amount of screen real-estate the browser UI uses in order to allow the
user to focus more on the content of the web. For Google Chrome extensions, we wanted to
make sure we preserved Google Chrome's minimalist aesthetic.
Extensions in other browsers have a reputation for doing things like filling your browser
with toolbars, or covering every possible surface of your browser with their UI, leaving
no room for the content itself. With Google Chrome extensions, we've decided
to take the approach that an extension is only allowed a single UI surface, and that
UI surface will be minimal. We also believe that users should control
where and when extension UI is displayed, so it should be easy to hide and remove any
unwanted user interface. While developing Google Chrome extensions,
we experimented with a number of other UI surfaces, and we kept pushing them to make
them simpler and more minimal. Those that didn't feel like they fit our UI
philosophy were eventually cut. The content-not-chrome philosophy extends
to the types of extensions that we'd like to enable as well.
Rather than focusing too much on changing particulars of Google Chrome's interface,
we've designed the extension system to be about interacting with the web.
Google Chrome extensions are primarily about adding functionality to web pages, or providing
access to or integration with the content from web sites.
They're not about changing the appearance of the tabs or rearranging the menus.
The simplest bit of extensions UI is the browser action.
A browser action is a simple button that is added to the main toolbar to the right of
the omnibox. The extension can change the icon on the button,
depending on the content on the current page, even animating it.
Extensions can also simply add colored badges of text over their icons.
These badges are ideal for counters or small status indicators.
In addition to simply performing actions, browser actions can also show popup bubbles.
Pop ups are built using HTML and are sized dynamically based on the contents.
Page actions are similar to browser actions, but they're in the omnibox and they appear
and disappear based on the contents of the page.
Like browser actions, page actions can display pop ups, but they don't support badges.
The rule of thumb about when to use each is that a browser action should almost always
be valid - for example, "blog about this page" or "show the current weather forecast" -
, while page actions should only apply to some pages based on their content - for example
"map address on this page". Another approach for extension UI is to use
the content of the page itself. This can be the ultimate in the minimalist
approach, taking up no space in the browser's chrome itself.
For example, an extension might turn the results of an image search into a slide show, completely
using in-page UI. With the extension system itself, our team
wanted it to feel lightweight and unobtrusive. For example, when you install extensions,
they immediately appear and are usable. You're not prompted when extensions update
themselves, and you never need to restart the browser, even when you disable or uninstall
an extension. In the future, we will likely provide web
developers with access to more surfaces. However, we will always do this carefully
with the user's interests in mind. We welcome your suggestions in our discussion group.
If you are interested to learn more about Google Chrome extensions visit our website