chromite - Chrome Extension Messaging Routing Kit

• Use Router to simplify your onMessage event listener routing
• Use Client as a shorthand for sendMessage
• Use Logger for decorating console.log with intuitive interface

to write your Chrome Extension in the way of Web Application Development.

Why?

Message Passing plays a crucial role in the development of Chrome extensions. Therefore, as Chrome extensions become more feature-rich, the variety of messages being sent and received between the background and other contexts increases. Managing all of this within a single onMessage.addListener and dispatching to different handlers can make the code quite messy.

Which is like this:

1// This is what we do usually... 😰
2chrome.runtime.onMessage.addListener(async (message, sender, sendResponse) => {
3  switch (message.action) {
4    case '/users/list':
5      const users = await Users.getAll()
6      sendResponse({ users });
7      break;
8    case '/users/get':
9      const user = await Users.get(message.userId);
10      sendResponse({ user });
11      break;
12    case '/users/update':
13      const user = Users.get(message.userId)
14      // more your code here...
15      break;
16    default:
17      sendResponse({ message: "Not Found..." });
18  }
19  return true;
20});

This is very similar to what we write when we build a web application and routing HTTP request. Then, if we organize the code in that manner, we can create a Chrome extension source code that is more comprehensible and maintainable.

Router

Specifically, it would look like this:

1const router = new Router();
2
3router.on("/users/list", ListUsersController);
4router.on("/users/{id}", GetUserController);
5router.on("/users/{id}/update", UpdateUserController);
6router.onNotFound(NotFoundController);
7
8chrome.runtime.onMessage.addListener(router.listener());
9// Simple! 🤗

then one of your controllers will look like this:

1async function ListUsersController(message, sender) {
2    const users = await Users.getAll();
3    return { users }; // You don't even need sendResponse
4}
5
6async function GetUserController(this: {id: string}, message, sender) {
7    // You can retrieve path parameter from `this` arg
8    const user = await Users.get(this.id);
9    return { user };
10}

this will make our life easier.

Then simply you can send message to this listener like this:

1const users = await chrome.runtime.sendMessage({action: '/users/list'});
2// Nothing different to whant we do usually.

Client

In case you need some shorthand to send message, which might be a HTTP client in web application, there is Client you can use and you can avoid using action field in your message.

1const client = new Client(chrome.runtime);
2
3// path (=action) only
4const users = await client.send('/users/list');
5
6// path with request body
7const updated = await client.send(`/users/${id}/update`, {name: "otiai20"});

ActiveRecord?

Now you might want something like ActiveRecord to access and OR-mapping chrome.storage. There is a separated package: jstorm - JavaScript ORM for chrome.storage and LocalStorage.

https://github.com/otiai10/jstorm

Small example:

1// This uses window.sessionStorage
2import { Model } from "jstorm/browser/session";
3
4class User extends Model {
5  public name: string;
6  public age:  number;
7}
8
9(async () => {
10  const otiai10 = User.new({name:"otiai10"});
11  (otiai10._id) // null, yes
12  await otiai10.save();
13  (otiai10._id) // NOT null, because saved
14
15  const found = await User.find(otiai10._id);
16  (found._id == otiai10._id) // true
17
18  otiai10.delete();
19})();
20

Logger

Last but not least, logging is also important for us. Even though we know we can customize console.log by %c decorator, it would be messy if we do that all the time. Logger is just a memorandum for that decoration, or we can just use like following:

1import {Logger, LogLevel} from "chromite";
2
3const logger = new Logger("your_project", LogLevel.ERROR);
4
5logger.warn("hello", 100, {name: "otiai10"});
6// prints nothing because level is set to "ERROR"
7
8// This prints these messages with colored prefix "[ERROR]"
9logger.error("hey", {code: 500, msg: ["some", "problem"]});

Issues

• https://github.com/otiai10/chromite/issues/new