How can I use @rails/actioncable in a Chrome Extension service worker without a window object?

Chrome extensions’ background scripts (especially in Manifest V3 where they run as service workers) don’t provide a browser-like window object. Action Cable’s client implementation expects a window (and other DOM APIs) to be available, so trying to use it directly in a background script will fail.

There isn’t a well‐supported plugin that “simulates” window for this purpose. Instead, you have a couple of alternatives:

1. Move the Action Cable Connection to a Context with a Window
   Run your Action Cable consumer in a content script or a browser action/popup where the window object is available. Then, communicate with your background script via message passing (using chrome.runtime.sendMessage or chrome.runtime.onMessage).

2. Use a Worker-Friendly WebSocket Client
   If you need the connection directly in the background (e.g. for persistent processing), consider using a plain WebSocket client that works in service workers. This way, you can implement your own handling (subscriptions, channels, etc.) without relying on Action Cable’s consumer which expects the full browser environment.

Example: Moving the Consumer to a Content Script

Create a content script (e.g. content.js):

JAVASCRIPTCopied
// content.js
import { createConsumer } from '@rails/actioncable';

const URL = 'http://localhost:3010/cable';
const consumer = createConsumer(URL);

consumer.subscriptions.create({ channel: 'some channel', id: 'some id' }, {
  connected: () => {
    console.log('Websocket connected');

    // Optionally forward a message to the background script:
    chrome.runtime.sendMessage({ type: 'WS_CONNECTED' });
  },
  disconnected: () => {
    console.log('Websocket disconnected');
  },
  received: (data) => {
    console.log('Received data:', data);
    
    // Forward the received data to background if needed:
    chrome.runtime.sendMessage({ type: 'WS_MESSAGE', payload: data });
  },
});

Then, in your manifest you’d register the content script:

JSONCopied
{
  "name": "My Extension",
  "version": "1.0",
  "manifest_version": 3,
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content.js"],
      "run_at": "document_start"
    }
  ],
  "permissions": ["runtime"]
}

This way, the Action Cable code runs in a windowed context (the webpage) and you can communicate with your background service worker as needed.

Summary

There isn’t a simple “polyfill” for window in the background service worker environment, and trying to simulate it is not a clean solution. It’s generally best to either:

• Relocate your consumer to a context where window exists (like a content script or popup), or
• Use a worker-friendly WebSocket library if you must handle real-time events in the background.

Choose the approach that best fits your extension’s architecture and user experience.