UX Best Practices That Will Make Your Browser Extension Successful

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.

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.

1. Old content scripts don't die on update
2. New content scripts don't get added to old tabs on update
3. Your old background service worker dies, and its context gets invalidated on the update
4. 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.

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.

Client-side Storage

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.

Hotkeys

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.

Back to Blog