Chrome Plugin: Nützliche Browser-Funktionen direkt am Start

JavaScript-Extension mit Content-Script, Popup & Background-Service

Chrome Extension API JavaScript Manifest V3 Content Script

🚀 Ihre eigene Browser-Extension. Maßgeschneidert. Heute.

📞 02406 803 7603 ✉️ info@computerkumpel.de

✨ Hauptfunktionen

📝
Content Script
Direkte Interaktion mit Webseiten-Inhalten für erweiterte Funktionen.
🎨
Popup Interface
Benutzerfreundliche Oberfläche über das Chrome-Toolbar-Icon erreichbar.
⚙️
Background Service
Event-Handler für Browser-Aktionen und persistente Hintergrundaufgaben.
🔧
API Integration
Zugriff auf Chrome APIs für Tabs, Bookmarks, Storage und mehr.

🚀 Installation

# Als Entwicklerversion laden
1. Chrome öffnen → chrome://extensions/
2. "Entwicklermodus" aktivieren
3. "Entpackte Erweiterung laden" klicken
4. Ordner mit manifest.json auswählen

🛠️ Tech Stack

JavaScript Chrome Extension API Manifest V3 HTML/CSS

📋 Projekt-Info

🔮 Roadmap

⚡ Ihre individuelle Browser-Extension — in Tagen, nicht Wochen.

📞 02406 803 7603 ✉️ info@computerkumpel.de

💻 Quellcode-Einblicke

Echte Code-Snippets aus der Chrome Extension — Manifest, Content Script, Background Service und Popup.

JSON Manifest V3 — Extension-Konfiguration 

{
  "manifest_version": 3,
  "name": "YouTube Studio Thumbnail Helper",
  "version": "1.0.0",
  "description": "Klickt automatisch auf den Ändern-Button 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"
  }
}

JavaScript Content Script — DOM-Manipulation & MutationObserver 

// Content Script: Warte auf vollständigen Seiten-Load
window.addEventListener('load', () => {
  addHelperButton();
});

// MutationObserver für dynamische DOM-Änderungen
const observer = new MutationObserver(() => {
  const isVideoPage = window.location.pathname.includes('/video/');
  if (isVideoPage) {
    setTimeout(() => addHelperButton(), 500);
  }
});

observer.observe(document.body, { childList: true, subtree: true });

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

// URL-Änderungen tracken (SPA-Navigation)
let lastUrl = location.href;
new MutationObserver(() => {
  const url = location.href;
  if (url !== lastUrl) {
    lastUrl = url;
    isButtonAdded = false;
    setTimeout(() => addHelperButton(), 1000);
  }
}).observe(document, { subtree: true, childList: true });

JavaScript Background Service Worker — Event Handling 

// Background Service Worker für Chrome Extension
chrome.runtime.onInstalled.addListener(() => {
  console.log('YouTube Studio Thumbnail Helper installiert');
});

JavaScript Popup Script — Status-Erkennung 

// Popup Script: Prüft ob YouTube Studio geöffnet ist
document.addEventListener('DOMContentLoaded', () => {
  const statusDiv = document.getElementById('status');
  
  chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
    const currentTab = tabs[0];
    
    if (currentTab.url && currentTab.url.includes('studio.youtube.com')) {
      statusDiv.className = 'status success';
      statusDiv.textContent = '✓ YouTube Studio erkannt';
    } else {
      statusDiv.className = 'status error';
      statusDiv.textContent = '⚠ Bitte öffnen Sie YouTube Studio';
    }
  });
});

Bereit für Ihre eigene Browser-Extension?

Ob Content-Script, Popup-Tool oder komplexe Automation — wir bauen Ihre Extension passgenau. Unverbindlich und pragmatisch.

📞 02406 803 7603 ✉️ info@computerkumpel.de