What is the benefit of using Ports over one-time messages?

Ports (chrome.runtime.connect) are ideal for long-lived connections, such as streaming data or maintaining a conversation state where the overhead of repeatedly opening new channels is inefficient.

Can content scripts talk directly to the side panel?

No, Chrome's architecture requires a background script to act as a relay. This skill provides the specific 'Background Relay' pattern code to facilitate this communication.

How do I handle asynchronous responses in message listeners?

This skill implements the pattern of returning 'true' from the onMessage listener, which is the critical requirement to keep the messaging channel open for asynchronous sendResponse calls.

Does this skill help with 'Extension context invalidated' errors?

Yes, it includes specialized error handling logic to check if the extension context is still valid before attempting to send messages, preventing runtime crashes during updates or reloads.

Chrome Extension Messaging Patterns

Name: Chrome Extension Messaging Patterns
Author: francanete

byfrancanete

0•

ブラウザ自動化

Implements robust inter-component communication patterns for Chrome Extensions, including message passing, ports, and state synchronization.

This skill provides a comprehensive framework for managing complex data flows between isolated Chrome Extension components. It covers communication between background service workers, content scripts, popups, and the side panel, offering standardized patterns for both one-time messages and long-lived port connections. By providing implementation-ready code for state synchronization and relaying messages, it helps developers avoid common pitfalls like context invalidation and unhandled asynchronous responses.

主な機能

01Background relay implementations for content script to side panel communication

02Structured, type-safe messaging protocols to prevent magic string errors

03Advanced error handling for invalidated contexts and connection retries

04One-time and long-lived messaging patterns between all extension components

05Centralized state management using chrome.storage synchronization

060 GitHub stars

ユースケース

01Synchronizing UI state between a popup and a side panel via a background script

02Handling external requests from web pages to the extension background worker

03Building data-heavy extensions that require streaming data through long-lived ports

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add francanete/fran-marketplace component-communication

For use in Claude.ai and ChatGPT

Download Skill