CODEWITHSUNDEEP
google-chrome-extension
Ben McCann
Ben McCann

Reputation: 19004

Create always-present sidebar with Chrome extension

How do I create an always-present sidebar in a Chrome browser extension? Do I have to inject something into each page the user views? That seems weird because it would disappear every time the user navigates to a new page. Also, I'd be worried about my code and HTML interfering with the page and I can't possibly test every page on the net to be sure it works everywhere.

It looks like there was an API for this that was just removed? Is this feature dead for good or are there any plans to bring it back?

Upvotes: 4

Views: 2806

Answers (3)

Dhanesh Mane
Dhanesh Mane

Reputation: 313

I am currently working on one of the chrome app and I was struggling to resolve this issue. Finally I found the fix. Below code fixed the issue. Hope it will help those who are facing this issue.

// Ensure the side panel remains open on installation
chrome.runtime.onInstalled.addListener(() => {
  chrome.sidePanel.setPanelBehavior({ openPanelOnActionClick: true });
});

// Initialize the extension
initialize();

Upvotes: 0

abraham
abraham

Reputation: 47863

In a ManifestV3 extension you can use sidePanel API, see the other answer with an example.

In a ManifestV2 extension in Chrome you have to inject HTML into every page. Some browsers have their own variant of this API named similarly e.g. sidebar_action API.

Upvotes: 4

hexacyanide
hexacyanide

Reputation: 91709

Almost a decade later, Extension Manifest V3 now provides the chrome.sidePanel API. It provides a persistent pane that can be used to host an extension page, completely separate from the main page.

You can find examples for this API here, or on GitHub at chrome-extensions-samples/functional-examples.

In short, to create a sidepanel, add the permission to your manifest:

{
  "manifest_version": 3,
  ...
  "permissions": [
    "sidePanel"
  ],
  "side_panel": {
    "default_path": "sidepanel.html"
  }
}

Then, add sidepanel contents:

<!-- sidebar.html -->
<!DOCTYPE html>
<html>
  <head>
    <title>My Sidepanel</title>
  </head>
  <body>
    Some sidebar HTML
  </body>
</html>

You should then be able to open the sidebar using "Show side panel" in the browser navigation and clicking the extension name.

Upvotes: 3

Related Questions