sidePanel

Use the side panel for features that users might want to keep open and refer to while browsing different pages. It's a great alternative to popups for more complex UIs that require more space and persistence.

Examples:

• A note-taking extension.
• A bookmark manager.
• A web-clipping tool that shows a list of saved clips.
• A developer tool that displays contextual information about the current page.

{
  "name": "My Side Panel Extension",
  "version": "1.0",
  "manifest_version": 3,
  "permissions": [
    "sidePanel"
  ],
  "action": {
    "default_title": "Click to open side panel"
  },
  "side_panel": {
    "default_path": "sidepanel.html"
  }
}

Why is it not risky?

This is a very safe permission. It only allows an extension to show its user interface in the side panel of the browser.

By itself, this permission grants no access to your data. The risk of an extension depends on the other permissions it asks for to power the features inside its side panel.

This example shows how to open the side panel programmatically when the user clicks the extension's action icon. This is useful if you want the icon to perform another action by default.

// background.js

// Opt in to the built-in behavior of opening the side panel
// when the user clicks the extension's action icon. Without this
// call, clicking the action icon does NOT auto-open the panel
// (the manifest's `default_path` only registers the panel content).
chrome.sidePanel
  .setPanelBehavior({ openPanelOnActionClick: true })
  .catch((error) => console.error(error));

// Example: Set a different side panel for a specific website.
chrome.tabs.onUpdated.addListener(async (tabId, info, tab) => {
  if (!tab.url) return;
  const url = new URL(tab.url);
  if (url.origin === 'https://developer.chrome.com') {
    await chrome.sidePanel.setOptions({
      tabId,
      path: 'developer_sidepanel.html',
      enabled: true
    });
  } else {
    // Disable the side panel on other sites.
    await chrome.sidePanel.setOptions({
      tabId,
      enabled: false
    });
  }
});