skills.rest
francanete
francaneteCOMMUNITY
Explore all skills by this author →
Website𝕏@francanetecomGitHub

side-panel-development

Implement Chrome MV3 side panels with chrome.sidePanel API and lifecycle management.

1|Updated Dec 4, 2025
Search Tags:#communication#lifecycle#chrome-extension#manifest-v3#extension-development#side-panel#per-tab
One-click install
npx skills add https://github.com/francanete/fran-marketplace --skill side-panel-development
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: side-panel-development
Source: https://github.com/francanete/fran-marketplace/tree/main/chrome-extension-expert/skills/side-panel-development
Command: npx skills add https://github.com/francanete/fran-marketplace --skill side-panel-development

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Developers often need a persistent UI alongside web pages to manage ongoing tasks and reference materials while browsing. This Skill provides patterns for implementing Chrome extension side panels, including manifest configuration, chrome.sidePanel API usage, lifecycle management, per-tab vs global behavior, and robust communication between panels, background scripts, and content scripts.

Core Features & Use Cases

  • Persistent side panels that stay open as you navigate, enabling ongoing tasks.
  • Support for per-tab and global configurations to tailor content per context.
  • Clear guidance on manifest and API usage, panel lifecycle, state persistence, and cross-component messaging.

Quick Start

Set up a minimal MV3 Chrome Extension, add side_panel configuration to the manifest, create a simple sidepanel.html, and wire a basic background script to demonstrate opening the panel for a tab.

Frequently Asked Questions about side-panel-development

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create a Chrome extension side panel that stays open while navigating?▼

To create a persistent Chrome extension side panel, configure the MV3 manifest with side_panel permission and use chrome.sidePanel API to manage panel visibility and lifecycle across page navigations.

What is the difference between per-tab and global side panels in Chrome extensions?▼

Per-tab side panels display context-specific content tailored to individual tabs, while global panels maintain window-wide consistent behavior. The chrome.sidePanel API manages both configurations through structured manifest settings.

How do I set up communication between a side panel, background script, and content script?▼

Cross-component communication between side panels, background scripts, and content scripts requires structured messaging patterns. Implement message passing through the chrome.runtime API to synchronize state and trigger lifecycle events across components.

Do I need Manifest V3 to use the chrome.sidePanel API?▼

Yes, Manifest V3 is required to use the chrome.sidePanel API. You must declare the side_panel permission and configure the manifest properly to enable persistent side panel functionality in your extension.

What is the best way to manage side panel lifecycle and state persistence in a Chrome extension?▼

The best way to manage side panel lifecycle and state persistence is by implementing structured HTML/CSS/JS guidance with background scripts to handle panel events and maintain state across navigation and tab changes.

Related Skills

Explore More Software Engineering Skills→
involvexinvolvex

chrome-extension-architect

Design Chrome Manifest V3 extension architectures with least-privilege permissions.

Community
Advanced
francanetefrancanete
1

component-communication

Coordinate messaging between Chrome extension components using runtime APIs and ports.

Community
Intermediate
soo-kate-yeonsoo-kate-yeon

moai-platform-chrome-extension

Develop Chrome extensions with Manifest V3 service workers and content scripts.

Community
Advanced
dogeareddogeared

connect-chrome

Launch a real Chrome session with the Side Panel extension for observable browser actions.

Community
Advanced