Chrome extensions finally have WebSockets

Yes, friends, you've read that right, Chrome extensions with manifest v3 finally got WebSocket connections to work after almost 2 years since extensions with manifest v2 were not accepted anymore on the Chrome Web Store.

A short history of Chrome extensions

The Chrome Extension Manifest Versions refer to the different versions of the manifest file used in developing Google Chrome extensions. The manifest file is the main component of a Chrome extension, as it defines the extension's properties, permissions, and functionality. Over the years, Chrome has introduced several manifest versions to accommodate new features and security enhancements. Here's a brief description of the first two Chrome extension manifest versions:

1. Manifest Version 1:

   • Introduced in the early days of Chrome extensions.

   • Supported basic functionality and features.

   • Limited capabilities and permissions.

2. Manifest Version 2:

   • Released in 2012 to improve security and performance.

   • Introduced stricter content security policies.

   • Enforced more structured organization of extension code.

   • Required the use of background pages or event pages for background processing.

Road to Manifest V3

From 2012, Chrome extension developers had access to background pages which were the main script inside an extension. These pages would run on browser/extension load and would end when the browser was closed or the extension was disabled. The cool part of the background pages was that they could be made persistent, allowing WebSocket clients to be defined and remain active throughout the extension lifecycle which opened the possibility for cool features like real-time extension notifications, help chats, and more.

So what happened in January 2022? Well, Google decided it's time to move forward and accept only extensions with Manifest V3 as part of a shift in Chrome's user security and privacy philosophy, but the problem is that Manifest V3 is way more restrictive and with this restrictiveness, the extensions file structure has changed. The major hit came when background pages were replaced with service workers and the persistent functionality was removed.

For whoever is not familiar with service workers, the extension service workers are files that have functionalities that are loaded when needed and unloaded after a time of inactivity. Although Google mentioned that the extension service workers would go inactive after 30 seconds of being unused, the reality was that they would go inactive at random times, somewhere between 5 seconds and 30 seconds, even if a WebSocket connection was still active which meant that keeping a WebSocket Client active became impossible. So it started a long time of waiting and complaining about this issue, especially since Chrome announced that everyone needs to migrate their Manifest V2 extensions to Manifest V3 before January 2023 (a deadline that was changed most likely due to the pandemic and a new deadline was not announced yet).

WebSockets are back baby

After a long wait, the Chrome Extension team managed to fix the issues with the extension service workers and announced that the fix was released in Chrome v116. What developers need to do to keep a service worker with a WebSocket connection is exchange messages within the 30-second service worker activity window. The easiest way to accomplish this is a functionality that is already well-known to JavaScript developers accustomed to WebSocket connections: the heartbeat (or ping-pong messaging). All we need to do is make sure that every few seconds we initiate a new message, either from the server or the client, the extension documentation recommends a 20-second interval.

How do I make sure I target the correct users?

I get it, Google Chrome v116 is pretty new at the time I'm writing this blog post (I'm writing on Chrome v117), so we need to make sure that if we add a WebSocket connection in the extension, we get only the right people to use our extension. For this, we can take advantage of a property from the manifest file called minimum_chrome_version :

{
  ...
  "minimum_chrome_version": "116",
  ...
}

Here you go, we now have access to WebSocket connections, if you are an extension developer and feel time-pressured about moving to Manifest V3, now you can cross one more functionality off your list. Let me know how it works for you.

Happy Coding!