Improving in-page notifications in the 1Password browser extension

The 1Password browser extension is entering its eighth year of service, and quite a bit has changed over that time as we’ve built new capabilities and improvements. One crucial piece of the browser extension is its in-page notification system. With the ability to display a notification on a web page, it allows you to perform many important tasks.

Over the last eight years, we’ve expanded the capabilities of this small but mighty piece of the user experience to inform you any time you:

• Save a new login credential to 1Password that you created while browsing the web

• Used a passkey to sign into a website that supports the WebAuthn protocol

• Been offered a suggestion to sign in with a third party provider, such as Google

• Watchtower detected a breach with one of your vault items

• Were guided through remediation because Device Trust detected a problem with your device

With this growing list of tasks, and the in-page notification system becoming a new way for us to surface information, we knew it was time to invest in some key improvements and set us up for the future.

One major limitation we needed to tackle was that the current system was only able to display one notification at any given time. This limitation was causing friction for our users, especially because if a second notification were to appear before you addressed the first one, the first notification would simply disappear from the web page. Additionally, for some of our notifications, if you navigated to a new web page without taking action, notifications would be instantly lost.

This was one key area that we knew we could improve on, so earlier this year we set out to overhaul (and improve) the in-page notification system.

Supporting multiple in-page notifications

The main goal we set out to achieve was supporting multiple in-page notifications. If you receive a few notifications in quick succession, they should all remain visible and actionable, in a collapsed stack.

When you are ready to interact with any of these notifications, you can do so by clicking the “View all” button (or by pressing the down arrow on your keyboard) to expand the stack.

When you would like to collapse the stack, simply click the “Collapse all” button (or press the up arrow on your keyboard):

Using this new feature, we are now able to keep track of all in-page notifications, ordered by priority.

Notifications are intelligently configurable to follow you as you navigate across different web pages (while others are contextual to the current web page), and they will automatically disappear when they’re no longer needed. 

For those interested in the technical details of how we did this, we moved responsibility to the service worker (within the browser extension) and made it the source of truth for notification states, as opposed to the user interface.

For security reasons, this potentially sensitive information stays local to your device. It remains stored in memory in the browser extension using the Manifest V3 API, chrome.storage.session.

We also have full awareness of what notifications are being shown on each tab, and we will not display a duplicate notification, unless explicitly told to do so.

When you load a web page, if there are any notifications to display for the current tab, an embedded iframe is injected into the web page, inside of a closed shadow root to an internal extension page. The user interface (embedded in the iframe) will call out to the service worker to retrieve those notifications and render them using our design language, Knox.

Supporting fullscreen in-page notifications

Fullscreen Notifications is a feature that we currently use for passkey and Device Trust notifications:

If you need to interact with a notification before you’re allowed to interact with a web page, such as with our passkey and device trust flows, any of our in-page notifications can now be configured for fullscreen mode.

For fullscreen notifications to work seamlessly with a stack of multiple notifications, we had to rebuild “fullscreen mode” from the ground up.

For example, if a stack of notifications is present on a web page when a fullscreen notification is shown, the remaining non-fullscreen notifications are hidden until you handle the fullscreen notification. Once you’ve taken care of the fullscreen notification, the non-fullscreen notifications are shown.

Migrating in-page notifications

Many of the types of notifications we mentioned above were built in bespoke ways over the last eight years. This approach left us with a set of notifications that were all different in slight but impactful ways. This was the final goal for our new system: to reduce that duplication and make it easier to maintain the existing notifications, and an extensible way to build new ones. When we had finished building out support for multiple notifications, we began to migrate each of our notifications over to the new in-page notification system.

This has been a team effort, and over the last few months we have been busy migrating over each of the existing notifications. In addition to supporting the new system, we also continue to support the legacy system, due to the gradual rollout of this feature. Once we’ve rolled this out to all of you, we will take the final step of removing the old code and bidding it a fond farewell.

What’s next for in-page notifications

Support for multiple in-page notifications has now rolled out to our nightly and beta channels, with stable beginning to roll out this week! We will continue to make refinements to improve in-page notifications in the browser extension going forward.

Thank you for reading! If you have not already, please do try out the new in-page notifications.