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

浏览器自动化

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.

主要功能

Background relay implementations for content script to side panel communication
Structured, type-safe messaging protocols to prevent magic string errors
Advanced error handling for invalidated contexts and connection retries
One-time and long-lived messaging patterns between all extension components
Centralized state management using chrome.storage synchronization
0 GitHub stars

使用场景

Synchronizing UI state between a popup and a side panel via a background script
Handling external requests from web pages to the extension background worker
Building data-heavy extensions that require streaming data through long-lived ports

关于

主要功能

Background relay implementations for content script to side panel communication
Structured, type-safe messaging protocols to prevent magic string errors
Advanced error handling for invalidated contexts and connection retries
One-time and long-lived messaging patterns between all extension components
Centralized state management using chrome.storage synchronization
0 GitHub stars

使用场景

Synchronizing UI state between a popup and a side panel via a background script
Handling external requests from web pages to the extension background worker
Building data-heavy extensions that require streaming data through long-lived ports