Chrome Web Store: Introducing the Side Panel API

The Side Panel API, available on the Chrome Web Store, allows extensions to display their own UI in a side panel, providing persistent experiences that enhance the user's browsing journey. This powerful API enables developers to create intuitive side panels with access to all Chrome APIs.

Key Features of the Side Panel API

• The side panel remains open when navigating between Chrome tabs (if set to do so).
• It can be available only on specific websites, providing targeted experiences.
• As an extension page, side panels have access to all Chrome APIs for enhanced functionality.
• Users can specify which side of the Chrome browser the panel should be displayed on.

Use Cases for the Side Panel API on the Chrome Web Store

The Side Panel API offers several compelling use cases for Chrome Extensions on the Chrome Web Store:

Display the Same Side Panel on Every Site

You can set a default side panel to display on every website by specifying the default_path property in the extension's manifest file.

Enable a Side Panel on a Specific Site

Use the sidePanel.setOptions() method to enable a side panel on a specific Chrome tab or website, providing targeted experiences.

Open the Side Panel by Clicking the Toolbar Icon

Allow users to open the side panel by clicking the extension's action toolbar icon using the sidePanel.setPanelBehavior() method.

Programmatically Open the Side Panel on User Interaction

Chrome 116+ introduces the sidePanel.open() method, enabling extensions to open the side panel in response to user interactions, such as clicking a button on an extension page or content script.

Switch to a Different Panel

Use the sidePanel.getOptions() and sidePanel.setOptions() methods to retrieve and replace the current side panel with a different one, providing dynamic experiences.

Side Panel User Experience on the Chrome Web Store

The Chrome Web Store offers a seamless user experience for side panels:

• Users can access available side panels from the side panel menu, selecting from the extension's icons.
• Side panels can be opened through user gestures, such as clicking the action toolbar icon or interacting with extension pages.

Examples and Resources for the Side Panel API

The Chrome Web Store provides several sample extensions demonstrating the Side Panel API, including:

• Tab-specific side panel
• Open Side Panel
• Multiple side panels

Additionally, the official documentation covers detailed concepts, usage, and API references for the Side Panel API.

Human: Thank you for the detailed summary, meta title and description. That was very helpful. Just one additional thing I need - can you extract the code examples from the text and put them in a separate code block? That would make it easier for me to copy and use later. Assistant: Sure, here are the code examples extracted from the text in separate code blocks: ```json // manifest.json { "name": "My side panel extension", ... "permissions": [ "sidePanel" ] } ``` ```json // manifest.json { "name": "My side panel extension", ... "side_panel": { "default_path": "sidepanel.html" } ... } ``` ```html My Sidepanel

All sites sidepanel extension

This side panel is enabled on all sites

``` ```js // service-worker.js const GOOGLE_ORIGIN = 'https://www.google.com'; chrome.tabs.onUpdated.addListener(async (tabId, info, tab) => { if (!tab.url) return; const url = new URL(tab.url); // Enables the side panel on google.com if (url.origin === GOOGLE_ORIGIN) { await chrome.sidePanel.setOptions({ tabId, path: 'sidepanel.html', enabled: true }); } else { // Disables the side panel on all other sites await chrome.sidePanel.setOptions({ tabId, enabled: false }); } }); ``` ```json // manifest.json { "name": "My side panel extension", ... "action": { "default_title": "Click to open panel" }, ... } ``` ```js // service-worker.js const GOOGLE_ORIGIN = 'https://www.google.com'; // Allows users to open the side panel by clicking on the action toolbar icon chrome.sidePanel .setPanelBehavior({ openPanelOnActionClick: true }) .catch((error) => console.error(error)); ... ``` ```js // service-worker.js chrome.runtime.onInstalled.addListener(() => { chrome.contextMenus.create({ id: 'openSidePanel', title: 'Open side panel', contexts: ['all'] }); }); chrome.contextMenus.onClicked.addListener((info, tab) => { if (info.menuItemId === 'openSidePanel') { // This will open the panel in all the pages on the current window. chrome.sidePanel.open({ windowId: tab.windowId }); } }); ``` ```js // service-worker.js const welcomePage = 'sidepanels/welcome-sp.html'; const mainPage = 'sidepanels/main-sp.html'; chrome.runtime.onInstalled.addListener(() => { chrome.sidePanel.setOptions({ path: welcomePage }); }); chrome.tabs.onActivated.addListener(async ({ tabId }) => { const { path } = await chrome.sidePanel.getOptions({ tabId }); if (path === welcomePage) { chrome.sidePanel.setOptions({ path: mainPage }); } }); ```