WebExtensions Support for Tab Groups

Exciting news: with yesterday’s release of Firefox 138, tab groups are now available to all users! Tab groups have been a long standing feature request for users, so it’s wonderful to see this go out to everyone.

New browser features are great, but what’s even better is when they’re backed by WebExtensions APIs that allow our amazing developer community to deeply integrate with those features. So, without further ado, let’s get into the new capabilities available in this release.

What’s new in 138

Firefox 138 includes initial support for tab group management in WebExtensions APIs. More specifically, we’ve updated the Tabs API with a few new tricks that allow extension developers to create tab groups, modify a group’s membership, and ungroup tabs:

• tabs.group() creates a new tab group that contains the specified tab(s) (MDN, bug 1959714)
• tabs.ungroup() remove the specified tab(s) from their associated tab groups (MDN, bug 1959714)
• tabs.query() can now be used to query for tabs with a given groupId (MDN, bug 1959715)
• Tab objects now have a groupId property that identifies which group it’s in (if any) (MDN, bug 1959713)
• The tabs.onUpdated event now emits updates for tab group membership changes (MDN, bug 1959716)

Best practices

As we learn more about how users interact with Tab Groups and how extensions integrate Tab Groups into their features, we’ll build out and expand on suggestions to help Add-on developers create better interactions for users. Here’s some suggestions we have so far.

Moving tabs

Be aware that changing a tab’s position in the tab strip may change its group membership, and that your users may not expect that moving tabs using your add-on will move tabs in or out of their tab groups. Use the groupId property on Tab instances to ensure that the tab is or is not grouped as expected.

Reorganizing tabs

Take tab groups into consideration when organizing tabs. For example, Firefox Multi-Account Containers has a “sort tabs by container” feature that reorganizes tabs so that tabs in the same container are grouped together. Since moving a tab can change its group membership, this could have unexpected consequences for users. To avoid this destructive operation, the add-on was updated to skip over grouped tabs.

To avoid destructive changes to a user’s tab groups, we recommend reorganizing ungrouped tabs or tabs inside a window’s tab groups as opposed to organizing all tabs within a window.

What’s coming

In addition to the features added in 138, we are also looking to further expand tab group support with the introduction of the Tab Groups API in Firefox 139. This will address a few gaps in our tab group supporting including the ability to:

• set a tab group’s title, color, and collapsed state (tabGroups.update())
• move an entire tab group (tabGroups.move())
• get info about a single tab group (tabGroups.get())
• get info about all tab groups (tabGroups.query())
• subscribe to specific tab group events (onUpdated, onMoved, onCreated, onRemoved)

We’ve already landed the initial implementation of this API in Firefox 139 Beta, but we’d love to get feedback on the API design and capabilities from our development community. If you’re feeling adventurous, you can start experimenting with these new capabilities and sharing feedback with us today. We encourage you to share your experiences and thoughts with us on Discourse.

If everything proceeds smoothly during the next beta cycle, we anticipate that the Tab Groups API will be available with the release of Firefox 139. We look forward to seeing what you build!