What are extensions?
Published on • Updated on
This page provides a brief introduction to Chrome extensions and walks through the creation of a "Hello, World!" extension.
About extensions
Extensions are small software programs that customize the browsing experience. They let users tailor Chrome functionality and behavior in many ways, providing things like:
- Productivity tools
- Web page content enrichment
- Information aggregation
- Fun and games
These are just a few examples of the many things that extensions can do. See the Chrome Web Store to see thousands of different examples of published extensions.
How do extensions work?
Extensions are built on web technologies such as HTML, JavaScript, and CSS. They run in a separate, sandboxed execution environment and interact with the Chrome browser.
Extensions let you "extend" the browser by using APIs to modify browser behavior and access web content. Extensions operate by means of an end-user UI and a developer API:
The extensions user interface This provides a consistent way for users to manage their extensions.
Extensions APIs The extensions APIs allow the extension's code to access features of the browser itself: activating tabs, modifying net requests, and so on.
To create an extension, you assemble some resources -- a manifest, JavaScript and HTML files, images, and others -- that constitute the extension. For development and testing, you can load these "unpacked" into Chrome using extension developer mode. Once you are happy with your extension, you can package it and distribute it to users.
How do users get extensions?
Most Chrome users get extensions from the Chrome Web Store. Developers across the globe publish their extensions in the Chrome Web Store where they are reviewed and made available to end users.
Some organizations use enterprise policies to install extensions on their user's devices. These extensions may either be fetched from the Chrome Web Store or hosted on the organization's web servers.
You can distribute your extensions through the Chrome Developer Dashboard, publishing them to the Chrome Web Store. For more information, see the Chrome Web Store developer documentation.
A note about extensions policy
Extensions on the Chrome Web Store must adhere to the Chrome Web Store policies. Here are some things to keep in mind as you begin:
- An extension must fulfill a single purpose that is narrowly defined and easy to understand. A single extension can include multiple components and a range of functionality, as long as everything contributes towards a common purpose.
- User interfaces should be minimal and have intent. They can range from a simple icon, such as the AMP validator extension shown above, to opening a new window with a form, like the Google Similar Pages extension shown below.
Hello extensions
Take a small step into extensions with this quick Hello Extensions example. Start by creating a new directory to store the extension's files, or download them from the sample page.
Next, add a file called manifest.json and include the following code:
{
"name": "Hello Extensions",
"description": "Base Level Extension",
"version": "1.0",
"manifest_version": 3
}Every extension requires a manifest, though most extensions will not do much with just the manifest. For this quick start, the extension has a popup file and icon declared under the action field:
{
"name": "Hello Extensions",
"description": "Base Level Extension",
"version": "1.0",
"manifest_version": 3,
"action": {
"default_popup": "hello.html",
"default_icon": "hello_extensions.png"
}
}Download hello_extensions.png here and then create a file titled hello.html:
<html>
<body>
<h1>Hello Extensions</h1>
</body>
</html>The extension now displays hello.html when the icon is clicked. The next step is to include a command in the manifest.json that enables a keyboard shortcut. This step is fun, but not necessary:
{
"name": "Hello Extensions",
"description": "Base Level Extension",
"version": "1.0",
"manifest_version": 3,
"action": {
"default_popup": "hello.html",
"default_icon": "hello_extensions.png"
},
"commands": {
"_execute_action": {
"suggested_key": {
"default": "Ctrl+Shift+F",
"mac": "MacCtrl+Shift+F"
},
"description": "Opens hello.html"
}
}
}The last step is to install the extension on your local machine.
- Navigate to
chrome://extensionsin your browser. You can also access this page by clicking on the Chrome menu on the top right side of the Omnibox, hovering over More Tools and selecting Extensions. - Check the box next to Developer Mode.
- Click Load Unpacked Extension and select the directory for your "Hello Extensions" extension.
Congratulations! You can now use your popup-based extension by clicking the hello_world.png icon or by pressing Ctrl+Shift+F on your keyboard.
What next?
- Follow the Getting Started tutorial
- Explore the extension samples
- Subscribe to the chromium-extensions Google group
Last updated: Improve article