Skills
.Work. You
Rest

side-panel-development

Community

Build persistent Chrome side panels with ease.

Software Engineering#communication#lifecycle#chrome-extension#manifest-v3#extension-development#side-panel#per-tab
Authorfrancanete
Version1.0.0
Installs0

System Documentation

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.

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: side-panel-development
Download link: https://github.com/francanete/fran-marketplace/archive/main.zip#side-panel-development

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.