Welcome What's new in Chrome extensions API reference Samples
Welcome What's new in Chrome extensions API reference Samples

Extensions 101

Explore basic concepts of Chrome extension development.

Published on

Overview

Chrome extensions enhance the browsing experience by adding features and functionality to the Chrome browser. This page introduces Chrome extension development and provides links to step-by-step beginner tutorials.

Web technologies

Extensions are written with the same web technologies used to create web applications:

  • HTML is used as a content markup language.
  • CSS is used for styling.
  • JavaScript is used for scripting and logic.

Before moving forward, we recommend that you become familiar with these technologies.

Chrome extension APIs

Extensions can use all the JavaScript APIs that the browser provides. What makes extensions more powerful than a web app is their access to Chrome APIs. The following are just a few examples of what extensions can do:

  • Change the functionality or behavior of a website.
  • Allow users to collect and organize information across websites.
  • Add features to Chrome DevTools.

See Extension development overview for a complete list of API capabilities.

Extension files

Extensions contain different files, depending on the functionality provided. The following are some of the most frequently used files:

The manifest
The extension's manifest is the only required file that must have a specific file name: manifest.json . It also has to be located in the extension's root directory. The manifest records important metadata, defines resources, declares permissions, and identifies which files to run in the background and on the page.
The service worker
The extension service worker handles and listens for browser events. There are many types of events, such as navigating to a new page, removing a bookmark, or closing a tab. It can use all the Chrome APIs, but it cannot interact directly with the content of web pages; that’s the job of content scripts.
Content scripts
Content scripts execute Javascript in the context of a web page. They can also read and modify the DOM of the pages they're injected into. Content Scripts can only use a subset of the Chrome APIs but can indirectly access the rest by exchanging messages with the extension service worker.
The popup and other pages
An extension can include various HTML files, such as a popup, an options page, and other HTML pages. All these pages have access to Chrome APIs.

Visit Extensions Architecture and Designing the user interface to dive deeper.

πŸ’‘ Do all extensions have a popup?

Many extensions use a popup to customize the user experience, however this is not required. For example, the reading time and focus mode extension tutorials do not include a popup.

Developing your extension

Even though web applications and extensions share many of the same technologies, the extension development experience is different. Check out Development Basics to create a "Hello, Extensions" example and familiarize yourself with the extension development workflow.

Designing your extension features

When you start designing your extension and choosing which features to support, make sure it fulfills a single purpose that is narrowly defined and easy to understand. This will allow your extension to be distributed through the Chrome Web Store.

πŸ’‘ What exactly does "single purpose" mean?

"Single purpose" can refer to one of two aspects of an extension:

  1. An extension can have a single purpose limited to a narrow focus area or subject matter. For example, "news headlines", "weather", "comparison shopping".

  2. Or, an extension can have a single purpose limited to a narrow browser function. For example, "new tab page", "tab management", or "search provider".

Regardless of the extension's purpose, the experience provided by the extension must respect the user's other settings and preferences.

See Extension quality guidelines for additional details.

Distributing your extension

You can set up a developer account with the Chrome Web Store to host and distribute your extension. Bare in mind that extensions must adhere to the developer program policies.

See Publish in the Chrome Web Store to learn how to distribute your extension.

πŸš€ Ready to start building?

Choose any of the following tutorials to begin your extension learning journey.

ExtensionWhat you will learn
Reading timeTo insert an element on every page automatically.
Focus ModeTo run code on the current page after clicking on the extension action.
Tabs ManagerTo create a popup that manages browser tabs.

As a bonus, these tutorials were designed to improve your experience when reading the Chrome extension and Chrome Web store documentation:

  • Reading time adds the expected reading time to each documentation articles.
  • Focus mode changes the style of the page to help you concentrate on the documentation content.
  • Tabs manager allows you to organize your extension documentation tabs.

Updated on β€’ Improve article

We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.