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.