[GreaseMonkey] YouTube Screenshot Capture with OCR (Code to Text on clipboard)

YouTube Screenshot Capture with OCR.js

// ==UserScript==
// @name         YouTube Screenshot Capture with OCR
// @namespace    http://unitycoder.com/
// @version      1.0
// @description  Capture screenshot from YouTube video player and extract text using Tesseract.js
// @author       You
// @match        https://www.youtube.com/*
// @grant        none
// @require      https://cdn.jsdelivr.net/npm/tesseract.js@4.0.2/dist/tesseract.min.js
// ==/UserScript==

(function() {
    'use strict';

    // Wait until the YouTube player is ready
    function addScreenshotButton() {
        const video = document.querySelector('video');
        if (!video) {
            setTimeout(addScreenshotButton, 1000);
            return;
        }

        // Create a button to capture screenshot
        const btn = document.createElement('button');
        btn.innerText = 'Capture & OCR';
        btn.style.position = 'fixed';
        btn.style.top = '80px';
        btn.style.right = '20px';
        btn.style.zIndex = '9999';
        btn.style.padding = '10px';
        btn.style.backgroundColor = 'red';
        btn.style.color = 'white';
        btn.style.border = 'none';
        btn.style.cursor = 'pointer';
        document.body.appendChild(btn);

        // Create a canvas for drawing the video frame
        const canvas = document.createElement('canvas');
        canvas.style.display = 'none';
        document.body.appendChild(canvas);

        // Event listener for the screenshot button
        btn.addEventListener('click', function() {
            const ctx = canvas.getContext('2d');

            // Set canvas size to match the video size
            canvas.width = video.videoWidth;
            canvas.height = video.videoHeight;

            // Draw the current video frame onto the canvas
            ctx.drawImage(video, 0, 0, canvas.width, canvas.height);

            // Convert the canvas to an image data URL
            const imgDataURL = canvas.toDataURL('image/png');

            // Perform OCR using Tesseract.js
            Tesseract.recognize(
                imgDataURL,
                'eng',
                {
                    logger: info => console.log(info) // Show progress in the console
                }
            ).then(({ data: { text } }) => {
                console.log('Extracted Text:', text);

                // Copy the extracted text to clipboard using the Clipboard API
                copyToClipboard(text);

                alert('Text extracted and copied to clipboard:\n' + text);
            }).catch(err => {
                console.error('Error during OCR:', err);
                alert('Failed to extract text.');
            });
        });
    }

    // Helper function to copy text to clipboard
    function copyToClipboard(text) {
        const textArea = document.createElement('textarea');
        textArea.value = text;
        document.body.appendChild(textArea);
        textArea.select();
        document.execCommand('copy');
        document.body.removeChild(textArea);
    }

    addScreenshotButton();
})();