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