UX Best Practices That Will Make Your Browser Extension Successful
Follow these steps to increase your retention, rank up on the web store, and improve your user experience
Browser extensions have vastly different UX flows compared to apps and websites. Much of the conventional wisdom around user experience doesn't apply. A browser extension has multiple views and can also exist within the context of other third-party views it has limited control over. This presents a lot of UX challenges, but with these best practices, you can be on your way to conquering them!
Onboarding and Offboarding
When your users first install your extension, you need to get them to use it immediately and guide them through the process.
🚀 Many popular extensions like Toucan and Bardeen create a new tab page to sign up and authenticate their users upon installation.
Once the user signs up, several things are a must.
Pinning the Extension
Guide the user to pin your extension on their browser. This increases usage and retention as your extension won't be hidden away from them.
Guiding the User
Extensions have UX flows that many users might not be familiar with. If you're an extension that automates Linkedin, open up Linkedin for them and create a step-by-step guide from within Linkedin to show them the power of your extension. The best browser extensions show; they don't tell.
Consider The Update
When you update your extension, there are several things you need to keep in mind.
- Old content scripts don't die on update
- New content scripts don't get added to old tabs on update
- Your old background service worker dies, and its context gets invalidated on the update
- Clientside storage doesn't get removed on each update
Understanding these is crucial to ensuring that your users have a smooth and successful updating experience. The last thing you want is for your update to go poorly and receive negative reviews on the web store.
❗ Plasmo offers a staging web store you can use to test updates without a review process to your beta testers. If you'd like to check it out, visit Plasmo Itero.
Updating Content Scripts
When a user has 20 tabs open with your old content script, the content script doesn't die on an update, and the changes it made don't go away. It's up to you to deactivate the old content script and undo the changes it made.
On top of this, your updated content script doesn't automatically get injected into those 20 tabs. You'll need to inject the new one manually.
If you've updated your client-side storage schema, you'll need to perform a migration to make sure that the old schema that the user had is migrated to the new version. Otherwise, you'll have a lot of frustrated users who lost their old data.
Selectively Request Permissions
When your user first looks to install your extension, they'll be presented with a list of permissions that your extension needs to function. Some sound quite scary, and they might put some users off.
Rather than having the browser show a list of scary permissions, use the
chrome.permissions API to selectively request permissions after your user has already gone through the install flow and wants to use a feature that requires that permission.
This makes the permission a lot less scary because the permission will now be tied directly to an action the user wants to perform, and you can control the messaging around why the permission is required. Context alleviates most people's concerns.
Suppose your extension has a view that users can open up, consider adding hotkeys for easy access. These are easy to set up and can increase your usage numbers as your extension can now be a few keys away.
Reduce the Gap
The reason extensions are so powerful is that they tightly integrate into software. Use this to your extension's advantage. When building your extension, stay as close to the software you're extending as possible.
For example, if you're extending Gmail, directly add a button to the Gmail UI rather than having an action in your popup.
Thanks for reading! Plasmo is a company with a mission to improve extension development. We're firm believers in the power of extensions and want to share our knowledge.
We have an open-source framework for building browser extensions and a platform for productionizing your extension to take it to the next level. Check them out if you're building a browser extension.
Thanks for reading! We're Plasmo, a company on a mission to improve browser extension development for everyone. If you're a company looking to level up your browser extension, reach out, or sign up for Itero to get started.