Chrome API Exploration: Tabs API

Introduction

The Chrome Tabs API is a powerful tool for developers who want to interact with Chrome's tab system. In this blog post, we'll explore the key features of the Tabs API and provide practical examples to help you master tab management in your Chrome extensions.

What is the Tabs API?

The Tabs API provides a way to interact with the browser's tabs, meaning developers can create, modify, rearrange,and remove tabs programmatically. In addition to managing tabs, this API can also detect the language of the current tab, take screenshots, and more. This API is essential for building powerful and flexible Chrome extensions that can manage multiple tabs and windows.

You can view the full API reference here.

Relevant Permissions

By default, there are no permissions required to use the Tabs API. However, depending on the functionality you want to add to your extension, you may need to request additional permissions for more sensitive data in tabs.

The following permissions can be added to your manifest.json file to gain more access to the Tabs API.

tabs permission

This permission is used to call the tabs.query() function and return more sensitive information on the tabs.Tab object. This includes: url, title, favIconUrl, and pendingUrl.

Host permissions

Adding host permissions to your manifest.json file allows your extension to read and query against a matching tab for the sensitive information listed above in the tabs permission.

activeTab permission

The activeTab permission allows your extension to have temporary host permissions for the currently active tab. The primary benefit of this permission is, unlike the host permissions, this permission does not trigge any warnings, but is limited to the active tab only.

Essential functions

The Tabs API comes with a variety of functions that allow for tab management that can be found in the API reference. Here are some of the most notable and highly used ones:

• tabs.query(): This function allows for querying against the browser's tabs and returning a list of tabs.Tab objects that match the query.
• tabs.create(): This function allows for creating a new tab with the given URL.
• tabs.remove(): This function allows for removing a tab(s) with the given ID(s).
• tabs.update(): This function allows for updating a tab with the given ID.
• tabs.duplicate(): This function allows for duplicating a tab with the given ID.
• tabs.reload(): This function allows for reloading a tab with the given ID.
• tabs.get(): This function allows for getting details about a tab with the given ID.

You can find all the properties on the tabs.Tab object here.

Essential events

The Tabs API also comes with a variety of events that allow for listening to changes in the browser's tabs. Here are some of the most notable and highly used ones:

• tabs.onCreated: This event is triggered when a new tab is created.
• tabs.onRemoved: This event is triggered when a tab is closed.
• tabs.onUpdated: This event is triggered when a tab is updated.
• tabs.onMoved: This event is triggered when a tab is moved within the window (only one move event is fired).
• tabs.onDetached: This event is triggered when a tab is detached from the window.

Examples

Opening a new tab with a specified URL

chrome.tabs.create({
  url: "https://www.google.com",
}, function (newTab) {
  console.log("New tab created with ID: ", newTab.id);
});

Closing the current tab

chrome.tabs.query({ 
  currentWindow: true, active: true 
}, function(tabs) {
  chrome.tabs.remove(tabs[0].id);
});

Opening an extension page after the extension is installed

chrome.runtime.onInstalled.addListener(({ reason }) => {
  if (reason === 'install') {
    chrome.tabs.create({
      url: chrome.runtime.getURL("some-onboarding-page.html")
    });
  }
});

Relevant ExtensionKit resources

ExtensionKit makes use of the Tabs API in a number of different templates and example extensions, including:

• Messaging starter (basic) - a message is sent between an extension popup and the current active tab
• New tab starter (React) - a new tab page is created when the user clicks the extension icon
• Popup full page & new tab starter (Vue) - a new tab page is created when the user clicks a button within the extension popup
• And many more!