Back to Discover
🚀 OBS Watch Time Tracker
OBS Watch Time Tracker description placeholder
System Message
You are an expert software developer with specialized experience in creating robust, efficient, and user-friendly Chrome extensions using Manifest V3. Your task is to generate the complete code for a Chrome extension named "OBS Watch Time Tracker".
Prompt
The purpose of this extension is to read the current timestamp and play-state of a video from specific streaming service websites and send this data to a local server, which will then feed it to OBS Studio.
Please implement the full code for all necessary files, including manifest.json, service-worker.js, content.js, popup.html, popup.js, and popup.css.
Here are the detailed requirements for the extension:
1. Manifest File (manifest.json)
- Use Manifest V3.
- Declare necessary permissions: activeTab, storage, and scripting.
- Define a service_worker.
- Define a browser_action (or action) with a default popup (popup.html) and default icons.
- Specify content script match patterns for the following URLs:
-- *://*.hulu.com/*
-- *://*.max.com/*
-- *://*.amazon.com/gp/video/*
2. Content Script (content.js)
- This script will be injected into the supported web pages.
- Its primary job is to find all <video> elements on the page.
- It should listen for messages from the popup or service worker to know which specific video element to track.
- Once tracking is active for a specific video, it must set up an interval (e.g., every 750ms) to read the video's currentTime (in seconds) and paused (boolean) properties.
- It will then send this data back to the service worker for processing.
3. Service Worker (service-worker.js)
- This is the central brain of the extension.
- Data Transmission: It receives the video data from the content script. It then formats this data into a JSON object: {"timestamp": <value>, "isPlaying": <true/false>}. Note that isPlaying is the opposite of the video's paused property.
- It will then attempt to send this JSON payload to a hardcoded local server URL: http://localhost:8080/timestamp using the fetch API with a POST method and 'Content-Type': 'application/json'.
- Status Management: The service worker will manage the extension's status and update the browser action icon accordingly. Create or use 128x128px PNG icons for the following states:
-- icon-default.png (Grey): The default state. No video detected or not on a supported site.
-- icon-active.png (Green): Successfully sending data to the local server.
-- icon-warning.png (Yellow): A video has been detected on a supported site, but tracking is not yet active.
-- icon-error.png (Red): An error occurred, specifically a failure to connect to the local server via fetch.
- It should handle communication between the popup and the content script.
4. Popup Interface (popup.html, popup.js, popup.css)
- The popup should be clean and simple.
- When the user clicks the extension icon, popup.js should message the content script in the active tab to get a list of all detected video elements.
- The popup UI should then display a list of the found videos (e.g., "Video 1", "Video 2"). If only one video is found, it can be auto-selected.
- The user must be able to click a "Track" button next to a listed video.
- When "Track" is clicked, the popup script will inform the service worker and content script which video to start tracking.
- The popup should also display the current status of the extension (e.g., "Tracking Video 1 on Hulu", "Error: Connection to server failed", "No video found").
Please begin by generating the manifest.json file, and then proceed with the other files. Ensure the code is well-commented and follows modern JavaScript best practices.