Chrome Extension Message Wrapper
What is the Chrome Extension Message Wrapper?
The Chrome Extension Message Wrapper is a package which should make developing Chrome Extensions easier, by providing a wrapper for the message passing api.
I often found myself using some really verbose switch statements on the background script, just to trigger simple functions. I also had a problem with the callback-based response style. Therefore, I wrote a simple wrapper which allows you to define an object of functions in the background script, which you can call with exactly the same arguments in the content / popup script and will return a promise with the result of the function.
You don't have to worry about calling chrome.runtime.sendMessage
again soon.
I plan to extend this package in the future.
How to install
npm i chrome-extension-message-wrapper
or...
yarn add chrome-extension-message-wrapper
How to use
To make the wrapper work, you have to call two functions.
On the background script:
; const someFunction = { return `Hey , whats up?`;}; chromeruntimeonMessage;
On the content / popup script:
; ;
Documentation
setupMessageListener
To be called on the background script.
Params:
Object
backgroundFunctions: Functions which will be accessable from the background script. ( Can be a nested object )Object
options: Configure the listener to do logging or use a custom message handler.
Returns:
Function
: Takesrequest
,sender
,sendResponse
as params. Should be passend to chrome.runtime.onMessage.addListener
Usage
;; const syncCall = { return `Hey , whats up?`;}; const asyncCall = { return axios;}; const nested = { return "Inside a nested object";}; // Every function automaticaly gets passed the request ({ request, sender }) as the last argument.const removeTab = { chrometabs;}; const backgroundFunctions = // Responds with return value syncCall // Responds with the result of the axios call asyncCall // Can be called on the content script with backgroundFunctions.nestedObject.nested() nestedObject: nested ; const options = // Enables logging when a message was called from the content / popup script verbose: true // Enables custom log messages instead of default (`Got request to call a function: ${req}`) `Custom logging of function request: ` // Function which gets called when you send a message using the chrome.runtime.sendMessage { //...code return "From Custom Handler"; }; chromeruntimeonMessage;
initBGFunctions
To be called on the content / popup script
Params
Object
chrome: Chrome instance
Returns
Promise
bgFunctions: Object of all background functions which were passed to setupMessageListener + default sendMessage().
Usage
; // Using the functions from the setupMessageListener example;
Contribute
If you find a bug or have an idea for a new feature feel free to open a new issue or create a new pull request.
I will keep track of the todos on the issue page.
License
MIT