Javascript

Open the side panel by default in google chrome extension

To open the side panel by default in google Chrome extension, you can use the Side Panel API introduced in Chrome extensions. You’ll need to configure your extension to register the sidebar (side panel)
and ensure it’s enabled automatically when the extension is installed or updated. Follow the steps below to achieve it:

1. Configure `manifest.json`

Include the side_panel property to define the default behavior of the sidebar.

manifest.json:

{
    manifest_version: 3,
    name: "Default Sidebar Extension",
    version: "1.0",
    description: "Opens a sidebar by default",
    permissions: ["sidePanel"],
    background: {
        service_worker: "background.js",
    },
    side_panel: {
        default_path: "sidebar.html",
    },
    action: {
        default_title: "Default Sidebar",
    },
}

2. Create the Sidebar HTML

Create the file sidebar.html that will be displayed in the sidebar.

sidebar.html:

<!DOCTYPE html>
<html>
    <head>
        <title>Sidebar</title>
    </head>
    <body>
        <h1>Welcome to the Sidebar</h1>
        <p>This is a default sidebar panel that opens automatically.</p>
    </body>
</html>

3. Automatically Enable the Sidebar

Use a background script to ensure the sidebar is enabled whenever the extension is installed or updated.

background.js:

chrome.runtime.onInstalled.addListener(() => {
 chrome.sidePanel.setOptions({
  path: "sidebar.html",
  enabled: true
 }, () => {
  console.log("Sidebar is enabled by default.");
 });
});

S M Zahed Kamal