Groovy Overlay Extension

🌍 Leer en Español

📌 Project Description

This project is a Chrome extension designed to work together with a Node/ExpressJS server. Its main function is to extract the currently playing song's information from the StreamElements Media Request and send it to your local server in real-time, so it can be displayed in a custom overlay.

🤔 Why this project?

StreamElements has a feature that allows viewers to request songs during live streams. While they offer their own overlay to display this information, I found its configuration somewhat cumbersome and with very limited customization options. For this reason, I decided to develop my own alternative. While the server handles displaying the information in OBS with total creative freedom, this extension acts as the necessary bridge to read the data directly from the StreamElements Media Request and automatically send it to the server.

⚙️ Key Points of the Extension

The project works as a very lightweight browser extension with the following main features:

1. Data Capture: It constantly reads the StreamElements "Media Request" player to get the song title and the user who requested it.
2. Real-time Synchronization: Upon detecting a song change, it immediately sends this data via an HTTP request (API) to your server.
3. Security: It communicates using a configurable API_KEY to ensure that only your extension can update your overlay.

Below is the structure and purpose of the main project files:

📁 Project Structure

• manifest.json Main configuration file for the extension. It defines the necessary permissions, the content_scripts injected into StreamElements, and the service worker that runs in the background.

• config.js Contains the configuration variables for the extension, such as the local server URL and the API key (API_KEY) to secure the communication.

• core/api.js Acts as the background service worker. It listens for internal extension messages when a song changes and handles sending the POST request with the updated data to the server.

• core/RecordPlayer.js Provides the core logic to monitor the player's state and emit song change events to the extension.

• platforms/StreamElements.js Specific script injected into the StreamElements page. It is responsible for parsing the page to extract the current song title and the username of the person who requested it.