WebExtension module: Simple message handler
- Browsers: Chrome, Firefox, Safari
- Manifest: v2 and v3
- Contexts: All contexts
Features:
- Promise-based API
- Avoids message handling boilerplate
- Suggests a simple messaging pattern
- Passes errors back to the sender
What it doesn't have:
- Type safety
- Complexity
It's very barebones and it's been in use by Refined GitHub for a long while.
You can download the standalone bundle and include it in your manifest.json.
Or use npm:
npm install webext-msgYou can check the "demo" folder for a working example.
import {handleMessages, messageRuntime, messageTab} from 'webext-msg';
// Set up the receiver, for example in background.js
handleMessages({
// The first parameter is what the value sent as {openTab: VALUE}
// The second parameter is always the message sender
openTab: async (url, sender) => {
const tab = await chrome.tabs.create({url});
return tab.id
},
throwError: async () => {
throw new Error('This is a test error');
},
});
// Send a message to the background worker or other chrome-extension:// pages
const tabId = await messageRuntime({openTab: 'https://example.com'});
console.log({tabId});
await messageRuntime({throwError: null}); // This will throw an error in the current page
// Send a message from s Chrome extension page to a tab
messageTab(tabId, {alert: 'The background sends their regards'});- Awesome-WebExtensions - A curated list of awesome resources for WebExtensions development.
- More…