The "messages" wrapper already exists

[noamloewenstern]

Hey!
First of all, I want to say that your work is very important for development extensions, I'm developing a chrome extension, and there's aren't a lot of tools to help develop easy, like developing a regular app... So thanks so much for the work!
Secondly, I've encountered another library which seems to have already implemented a nice wrapper for Message API (and also Storage).
Wasn't sure you've seen them:
@extend-chrome/messages
@extend-chrome/storage

Your API is a bit different than the above packages.
So, just want to point out, you can take inspiration from them and change what needs to be done better, or just use them under the hood.

Anyway, I'm very much for bettering the experience of developing chrome-extensions, in the Typescript-Era.

[aklinker1]

Thanks for sharing those with me, I wasn't aware of any of the @extend-chrome libraries! I built @webext-core myself because I was implementing the same thing over and over again for my different projects.

My messaging library only focuses on simple message passing, whereas @extend-chrome/messages seems more focused on streams. It looks like they've seen issues with async message handling in the past, which is why they're using streams. But I've never had issues with them, I only work on Chrome MV3 and Firefox/Safari MV2 extensions. Maybe Chrome's MV3 implementation improved them?

As for the storage, I like the concept of buckets for the isolation, but it appears @extend-chrome/storage only uses them to add types. I prefer my own approach for this, defining your entire storage schema in a single place (inspiration for this comes from webext-bridge by the wonderful Antfu, and idb, a very popular IndexedDB wrapper). I might add buckets in the future.

Also, these libraries and rollup-plugin-chrome-extension don't support Safari and Firefox. As an avid Firefox user myself, a web extension library needs to support all browsers before I'd consider using it. Unfortunately, this also prevents me from depending on these libraries, because they support all browsers.

That's why I called them webext-core, not using the word "chrome". Unfortunately , that will make my libraries harder to find, but oh well lol.

Thanks for sharing! I got some good ideas from looking into them

[noamloewenstern]

Looked at the webext-bridge package. Enjoyed seeing that most of your @webext-core/messaging package is based and inspired by webext-bridge package :-)

Had me wondering what was your motivation to create your own package which pretty much has the same api and functionality as webext-bridge. Is your package different? And if so, how?

[aklinker1]

TLDR: @webext-core/messaging is a lower-level API that more wholistic messaging frameworks like webext-bridge could use internally to simplify their implementations.

---

The main goal of @webext-core/messaging is improving the DX of the existing chrome messaging APIs. I wanted to keep it as close to the existing APIs as possible so it can be used as a drop-in replacement, while fixing the 3 common issues I've seen in every extension using the chrome APIs directly:

1. Type safety
2. Error handling
3. Response race conditions

webext-bridge adds a couple of more features:

1. Send messages from any JS context, through the background, to any other JS context
2. Message listeners in the same context (background to background, popup to popup, etc)
3. Window messaging - send messages web pages can interact with and respond to
4. Supports long-lived connections through streams
5. Messaging to and from frames

However, the differences between webext-bridge and the chrome messaging APIs make it hard to use as a drop-in replacement for projects using existing APIs.

My preferred architecture for an extension is to use the background script as an "API" and make requests to it from all the other contexts. That way all the heavy lifting is done in a service worker as a "backend", and we can use existing techniques for building out a frontend. webext-bridge provides more features than is needed to accomplish this, so I wrote @webext-core/messaging as the most minimal wrapper required for any extension to make messaging easier.

[noamloewenstern]

A very comprehensive explanation. Thanks!