Giving Your Product Superpowers With Chrome Extensions

Learn how extensions can boost your product potential

Browser extensions help products offer unique experiences. That’s why extensions like Grammarly have over 10 million users. Extensions can do all this because of their superpowers. Extensions can access and control parts of the browser using the Chrome APIs and the Devtools Protocol. This means extensions can do things regular web code can’t.

In January, 2020, Microsoft Edge released a new version based on Chromium. So, it’s easier than ever to create extensions that work in several browsers. If you’re considering adding an extension to your product strategy, I want to share some ideas to help you succeed.

Extensions have more capabilities than typical web applications. Reading and changing webpages, manipulating network requests, and screen recording are some examples. Products have found many ways to use these powers. I group them into products, co-pilots, and sidecars.

Sidecars

Some extensions link to a specific web domain. Extensions like Refined Github can use this pattern to enhance an experience. I like to call these “sidecars.” Sometimes, sidecars offer users choices they wish the site or browser offered.

If you noticed an outside developer or open source community built a sidecar for your product, don’t block it. You could lose customers. Instead, try to work with the community to improve their experience.

Co-pilots

Other extensions work everywhere to help a task or feature in a specific product. These co-pilots, like Microsoft’s OneNote Web Clipper, merge the browsing and product experience. Co-pilots can also provide more information about how people use your products.

Products

Other extensions are products. These extensions can help improve your writing, keep you organized, or stay on task. They look for patterns in your actions or the sites you view to take action on your behalf. Some extensions serve dual purposes. For example, someone with a vestibular disorder or ADHD might use an “ad blocker” to stop animation. For that reason, you should not try to block extensions or even detect their use.

Devtools are a set of browser tools geared toward developers. Devtools extensions are a subset of product extensions that enhance the toolset. As a developer, I use these tools every day to help me analyze and troubleshoot the web. If you’re not familiar with this group, Google’s Lighthouse is a great place to start.

Best Practices

Before you design and build your own extension, I recommend the following:

Architecture

Extensions can access or create many “contexts”: background, content, devtools, tabs, and popup. Each context will have different capabilities. This includes how it communicates inside and outside of the extension. You will often need to relay messages to get commands right context. Take time to map out how you will send messages and responses and the message conventions used. This will help when troubleshooting or adding new features.

You may also need to review Google’s proposed changes, called Manifest V3. As far as I can tell, Google’s not requiring this change yet, but it can’t hurt to know how it would affect your plans.

User (Trust) Experience

Because extensions have so much power, you must do everything you can to optimize for user trust. This means a combination of honesty, respect, security, reliability, and accessibility. An honest and respectful extension gets installed because it earns the user’s trust. Secure, reliable, and accessible extensions keep that trust and don’t get uninstalled.

Respect

Minimalism wins. Only request the permissions you need. As little code as possible should run without user interaction. Code that runs on every tab must be fast and non-blocking. Write lazy code that waits as long as possible before it runs. Keep an eye on how much data you store and how much memory you use. Respect low-speed network connections and low battery modes.

If you’re interested in how much CPU and memory other extensions consume, check out DebugBear’s 2020 Chrome Extension Performance Report.

Honesty

If you collect information, even simple usage analytics, explain what, how, and why. What information do you collect? How does the extension send or share it? Why is this important to the user (not to you)? You may need to include a GDPR notice. Be honest about what your extension does.

Security

Don’t skip security. If any code gets executed based on an event, ensure it came from your extension or a user interaction. Use a content security policy as an extra layer of security. All other web security techniques apply. For more information, check the OWASP Top 10 List.

Reliability

Testing, testing, testing. Writing code for a single browser reduces complexity. But writing code that works on every webpage on the internet increases complexity. Use a wide variety of “good” and “bad” webpages when testing your extension. If your extension can perform in the worst scenarios, users will know they can rely on it.

Accessibility

Think about accessibility from the beginning. Use the same principles you use to develop an accessible web page to create an extension. If your extension can’t include everyone, let your users know. For example, “sight required for some features” helps users make informed decisions. Building with accessibility in mind tells users you care.

Conclusion

As with the superpowers of comic books, “with great power comes great responsibility.” Use the least invasive features of extensions. This makes it easier to control performance, accessibility, and security. It’s also easier to tell the user exactly what your extension does. At all times, focus on user trust.