chomex
Chrome Extension Messaging Routing Kit.
- Router to handle
onMessage
with routes expression - Client to Promisify
sendMessage
- Model to access to
localStorage
likeActiveRecord
- Types to define data schema of
Model
Installation
npm install chomex
Why?
.onMessage
like a server routing
👎 Dispatching message inside addListener
function makes my code messy and unreeadable.
chromeruntimeonMessage;
👍 chomex.Router
makes it more claen and readable.
const router = ;router;chromeruntimeonMessage;
Happy 🤗
.sendMessage
like a fetch client
👎 Handling the response of sendMessage
by callback makes my code messy and unreadable.
chromeruntime;
👍 chomex.Client
makes it clean and readable by handling response with Promise
.
const client = chromeruntime;const response = await client;;
Happy 🤗
Examples
NOTE: These examples are using async/await on top-level. I believe you are familiar with asyc/await.
background.js
as a server
; // Define your model static schema = name: TypesstringisRequired age: Typesnumber const router = ; // Define your routesrouter; router; // Of course, you can separate files// in which controller functions are defined.;router; // Don't forget to add listener to chrome modules.chromeruntimeonMessage;
content_script.js
as a client
; const client = chromeruntime; // it sends message to "/users/get" route.const user = name: 'otiai10' age: 30;const response = await client;console; const data: user = await client;console;
Router
for other listeners
Customize You can also customize resolver for routing.
It's helpful when you want to make routings for EventListener modules on chrome
, such as chrome.notifications.onClicked
, chrome.webRequest.onBeforeRequest
or so.
// Resolver rule, which resolve given "id" to routing name.const resolve = { const prefix = id0; return name: prefix;}; const router = resolve;// You see, this controller is invoked when// a notification with ID "quest.xxxx" is clicked.router; chromenotificationsonClicked;
For more information
Reference Projects
Projects using chomex