How to make a Web App and a Chrome Extension communicate using Manifest V3

Chrome's Manifest V3 has introduced a refined approach to communication between web apps and Chrome extensions. This update brings forward the use of chrome.runtime.sendMessage, replacing the traditional postMessage. Notably, Manifest V2 is no longer available. In this guide, we'll explore the straightforward process of adapting to this change and facilitating seamless communication between your web app and Chrome extension.

Quick Setup Steps

1. TypeScript Support:
   If you're using TypeScript, install @types/chrome for proper type support of Chrome APIs. This ensures smooth development and fewer errors.

2. Manifest Configuration:
   In your extension's manifest file, include your web app's URL in the externally_connectable field. This establishes a secure channel for communication.

Sending Messages from Web App to Extension

// In your web app's script

const extensionId = 'your_extension_id'; // Replace with actual extension ID

const message = {
  data: 'Hello from the web app!'
};

chrome.runtime.sendMessage(extensionId, message, callback});

Listening to Messages in Your Extension

// In your extension's background script

chrome.runtime.onMessageExternal.addListener(
  (message, sender, sendResponse) => {
    console.log('Received message:', message.data);
  }
);

Embrace Efficient Communication

By adopting chrome.runtime.sendMessage and following these simple steps, you ensure effective communication between your web app and Chrome extension. Say goodbye to the old ways and welcome the new era of streamlined messaging. Happy coding! 🚀