Chrome Plugin

💰 Business Value

Chrome Extension (Manifest V3) automatisiert den Klick auf den „Ändern"-Button im YouTube Studio Thumbnail-Editor. Spart Zeit bei der Video-Bearbeitung.

⚙️ Funktionsweise

Die Kern-Mechanik der Extension im Überblick.

💻 Technische Umsetzung

Manifest V3 Chrome Extension mit Content-Script, Popup und Background Service Worker.

🔧 Snippet 1: Manifest & Extension-Struktur

Definiert Berechtigungen, Content-Scripts und Background Worker nach Manifest V3.

{
  "manifest_version": 3,
  "name": "YouTube Studio Thumbnail Helper",
  "version": "1.0.0",
  "description": "Automatisiert Klicks im Thumbnail-Menü",
  "permissions": ["activeTab", "scripting"],
  "host_permissions": [
    "https://studio.youtube.com/*",
    "https://www.youtube.com/*"
  ],
  "content_scripts": [{
    "matches": ["https://studio.youtube.com/*"],
    "js": ["content.js"],
    "css": ["styles.css"],
    "run_at": "document_idle"
  }],
  "background": {
    "service_worker": "background.js"
  },
  "action": {
    "default_popup": "popup.html"
  }
}

🔧 Snippet 2: Content-Script — Button-Injection & DOM-Observer

Kern-Logik: Erkennt den Thumbnail-Editor, fügt Helper-Buttons ein und reagiert auf SPA-Navigation.

function addHelperButton() {
  if (isButtonAdded) return;

  const editor = document.querySelector('ytcp-thumbnail-editor');
  if (!editor) return;

  // Container für unsere Buttons erstellen
  const container = document.createElement('div');
  container.className = 'yt-thumbnail-helper-buttons';

  // Helper-Button für Ein-Klick-Aktion
  const btn = createHelperButton('🖼️ Thumbnail ändern',
    async () => {
      const changeBtn = editor
        .querySelector('[aria-label="Ändern"]');
      if (changeBtn) changeBtn.click();
    });

  container.appendChild(btn);
  editor.parentElement.appendChild(container);
  isButtonAdded = true;
}

// DOM-Änderungen in Single-Page-App überwachen
const observer = new MutationObserver((mutations) => {
  if (!isButtonAdded &&
      window.location.pathname.includes('/video/')) {
    setTimeout(() => addHelperButton(), 500);
  }
});
observer.observe(document.body, {
  childList: true, subtree: true
});

// YouTube-eigene Navigation-Events
window.addEventListener('yt-navigate-finish', () => {
  isButtonAdded = false;
  setTimeout(() => addHelperButton(), 1000);
});

🔧 Snippet 3: Batch-Verarbeitung & Popup-Status

Batch-Mode für mehrere Videos und Popup zur Status-Anzeige.

// Batch-Verarbeitung mit localStorage-Persistenz
async function checkAndContinueBatch() {
  const batchData = JSON.parse(
    localStorage.getItem('ytBatchProcessing') || 'null');
  if (!batchData) return;

  const { currentIndex, videos } = batchData;
  console.log(`🔄 Batch: Video ${currentIndex+1}/${videos.length}`);

  await waitForPageReady();
  await processNextVideoInBatch();
}

// Popup.js — Status-Anzeige
document.addEventListener('DOMContentLoaded', () => {
  chrome.tabs.query(
    { active: true, currentWindow: true },
    (tabs) => {
      const tab = tabs[0];
      const status = document.getElementById('status');

      if (tab.url?.includes('studio.youtube.com')) {
        status.className = 'status success';
        status.textContent = '✓ YouTube Studio erkannt';
      } else {
        status.className = 'status error';
        status.textContent = '⚠ Bitte YouTube Studio öffnen';
      }
    });
});

🚀 Gebaut mit Vibecoding

🎯 Strategische Erkenntnisse

Jedes Projekt liefert wertvolle Einsichten — technisch wie strategisch. Diese Learnings fließen direkt in Folgeprojekte ein.