A new way to start your Chrome Extension development journey

In this post, we’re excited to share some significant improvements to the Chrome Extension getting started experience and a few ways you can be part of this dream.

# The old guide

Previously, the Chrome Extension Getting Started tutorial was a basic extension example that changed the background color of the current page when the user clicked a button in the extension popup. It also included an options page where you could pick one of four colors.

This basic example didn’t demonstrate how to add popular capabilities featured in real-world extensions. It was time for a revamp.

# A new approach

We know developers rely on our documentation to begin their Chrome extension learning journey, and our goal is to provide a path that is accessible, beginner-friendly, and relevant. Instead of trying to improve the existing tutorial example, we decided to start from scratch.

Introducing the new and improved Getting Started collection:

Extensions 101

Briefly covers some fundamental concepts of Chrome Extension development like web technologies and commonly used extension components. In addition, it includes what to be aware of when designing and distributing an extension in the Chrome Web Store.

Development Basics

Introduces the extension development workflow by creating a Hello, Extensions example. It walks through loading the extension during development, locating logs and errors, choosing a project structure, and using Typescript.

Reading Time tutorial

It’s nice to know how much time we need to finish reading an article. Reading Time teaches you how to insert an element containing the estimated reading time on every extension documentation page.

Focus Mode tutorial

Removing extra clutter from a page allows our minds to concentrate on the most relevant information. Focus Mode demonstrates how to change the style of the page and hide a few distracting elements.

Tabs Manager tutorial

While researching extension development, you can end up with many documentation tabs across multiple windows. Tabs Manager organizes your Chrome extension and Chrome Web store documentation tabs.

These tutorials not only teach you how to build real-world extensions but also share development tips and best practices. In addition, using these extensions will improve your experience while reading the extension documentation.

# What to expect

Each tutorial includes the following sections:

• The task the extension will perform.
• The lessons that will be covered.
• What you need to know before starting.
• Step-by-step instructions to build the extension.
• How to load and test the extension.

If you are up for a challenge, we included a section with a few ideas on how to customize or add other features to your extension.

# We want your help

We are excited to hear from you! If you see something wrong or unclear in these guides, please report a bug on our GitHub repository.

We think this new getting started guide is a significant improvement over the old one, but we’re not stopping here; we’ll keep working to improve and expand our documentation to serve all extension developers better.

Photo by Vardan Papikyan on Unsplash