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

component-communication

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

1|Updated Dec 4, 2025
Search Tags:#messaging#ports#chrome-extension#state-sync#background-content#inter-component
One-click install
npx skills add https://github.com/francanete/fran-marketplace --skill component-communication
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: component-communication
Source: https://github.com/francanete/fran-marketplace/tree/main/chrome-extension-expert/skills/component-communication
Command: npx skills add https://github.com/francanete/fran-marketplace --skill component-communication

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Chrome extensions are built from isolated components (background, content scripts, popup, side panel) that must communicate reliably. This Skill provides proven patterns for cross-component messaging, including ports, request/response messages, and state synchronization.

Core Features & Use Cases

  • Inter-component messaging patterns using chrome.runtime APIs
  • Long-lived connections via ports for streaming data and state
  • Background-relay patterns to connect content scripts with UI panels
  • State synchronization using storage and centralized state management
  • Robust error handling and retry strategies for flaky connections

Quick Start

Use this Skill to implement a messaging workflow that exchanges data between a content script and background script, then updates the UI in a popup.

Frequently Asked Questions about component-communication

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

FAQPage Schema
How do I send messages between a background script and content script in a Chrome extension?▼

Chrome extension messaging between background and content scripts uses chrome.runtime messaging APIs for request-response patterns. This Skill provides proven inter-component messaging patterns to exchange data reliably across isolated extension components.

What is the best way to maintain long-lived connections for streaming data in Chrome extensions?▼

Long-lived connections for streaming data in Chrome extensions use port-based messaging instead of single request-response calls. This Skill covers port implementations that keep background and content script channels open for continuous state synchronization.

How do I synchronize extension state across popup, side panel, and content scripts?▼

Extension state synchronization across popup, side panel, and content scripts is achieved using chrome.storage APIs and centralized state management patterns. This Skill provides background-relay patterns to connect content scripts with UI panels for data sharing.

Why does my Chrome extension messaging fail when the popup closes?▼

Chrome extension messaging fails when popup closes because the connection context is destroyed. This Skill addresses flaky connections with robust error handling and retry strategies, using background-relay patterns to route updates through persistent background scripts.

Can I use chrome.runtime ports to connect a content script directly with a side panel?▼

Connecting a content script directly with a side panel using chrome.runtime ports requires a background-relay pattern since isolated components cannot always communicate directly. This Skill provides inter-component coordination patterns to bridge content scripts and UI panels.

Do I need any external dependencies to implement cross-component messaging in Chrome extensions?▼

No external dependencies are required to implement cross-component messaging in Chrome extensions. This Skill leverages standard Chrome extension APIs like runtime messaging, ports, and storage to handle inter-component communication and state synchronization.

Related Skills

Explore More Content & Communication Skills→
JoshkovuJoshkovu
1

clerk-chrome-extension-patterns

Configure Clerk authentication across Chrome extension UI, service workers, and content scripts.

Community
Advanced
microsoftmicrosoft
2.9k

azure-storage-queue-py

Create and manage Azure Queue Storage messages with Python.

Official
Intermediate
francanetefrancanete
1

side-panel-development

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

Community
Basic
keremtoker468-dotcomkeremtoker468-dotcom

tablefinder-pro

Visualize restaurant table availability with interactive 3D floor plans.

Community
Intermediate