Home
Google Chrome Sidepanel Extension
Google Chrome Sidepanel is very useful visual space in your browsing sessions. You can customize it to load any URL from your local server or internet.
Here’s a simple Google Chrome extension that creates a side panel to load a preset URL. The extension is lightweight and includes the necessary files to work with Chrome’s side panel API. Use the chrome.sidePanel API to host content in the browser’s side panel alongside the main content of a webpage. To use the Side Panel API, add the “sidePanel” permission in the extension manifest file. The Side Panel API allows extensions to display their own UI in the side panel, enabling persistent experiences that complement the user’s browsing journey.
Some features include:
The side panel remains open when navigating between tabs (if set to do so).
It can be available only on specific websites.
As an extension page, side panels have access to all Chrome APIs.
Within Chrome’s settings, users can specify which side the panel should be displayed on.
Steps to Create the Extension
1. Create the following files in a folder** (e.g., `MySidePanelExtension`):
– manifest.json
– service-worker.js
– sidepanel.html
2. Code for manifest.json
This file defines the metadata and permissions for the extension.
{
"manifest_version": 3,
"name": "Bhupal's D2D",
"version": "1.0",
"description": "A simple extension to load a URL in the Chrome side panel.",
"permissions": ["sidePanel"],
"background": {
"service_worker": "service-worker.js"
},
"action": {
"default_title": "Open Side Panel"
},
"side_panel": {
"default_path": "sidepanel.html"
},
"icons": {
"16": "icons/16.png",
"48": "icons/48.png",
"128": "icons/128.png"
}
}
3. Code for service-worker.js
This service worker ensures the side panel is accessible.
chrome.runtime.onInstalled.addListener(() => {
chrome.sidePanel.setPanelBehavior({ openPanelOnActionClick: true });
});
4. Code for sidepanel.html
This file specifies the content displayed in the side panel. Replace https://localhost/sidepanel with your desired URL.
<!DOCTYPE html>
<html>
<head>
<title>Sidepanel</title>
<style>
body {
margin: 0;
padding: 0;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: #000;
}
iframe {
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
border: none;
margin: 0;
padding: 0;
overflow: hidden;
z-index: 999999;
}
</style>
</head>
<body>
<iframe src="http://localhost/sidebar"></iframe>
</body>
</html>
5. Icons (Optional)
Add icon16.png, icon48.png, and icon128.png to the extension folder. These are used for the extension icon.
Installation Instructions
1. Open Chrome and go to `chrome://extensions/`.
2. Enable “Developer mode” (toggle in the top-right corner).
3. Click “Load unpacked” and select your extension folder.
4. The extension will be loaded, and you can open the side panel via the extension icon.
Let me know if you’d like help customizing this further!
Copy & Share
Google Chrome Sidepanel Extension
https://bhupalsapkota.com/google-chrome-sidepanel-extension/