Browser Extensions Development (Chrome & Edge) · Lektion

Aufbau eines Extension-Projekts

Lernen Sie die Standarddateien und -ordner kennen, aus denen eine Manifest-V3-Browser-Extension besteht, und erfahren Sie, welche Aufgabe die einzelnen Elemente erfüllen.

Aufbau eines Extension-Projekts ist eine kostenlose Browser Extensions Development (Chrome & Edge)-Lektion auf CoddyKit. Dies ist Lektion 4 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Browser Extensions Development (Chrome & Edge)-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Browser Extensions Development (Chrome & Edge)-Kurs umfasst insgesamt 4 Lektionen.

Teile dieser Lektion wurden noch nicht übersetzt und werden auf Englisch angezeigt.

Extensions Are Just Web Files

An extension is just a bundle of HTML, CSS, JavaScript, and a config file, which the browser loads in a special, extra-capable context.

The manifest.json Heart

Every extension needs a manifest.json at its root — it declares name, version, permissions, and scripts. Without it, the browser ignores the folder.

{
  "manifest_version": 3,
  "name": "My Extension",
  "version": "1.0.0"
}

A Typical Folder Structure

Layout is flexible, but a clean folder structure stays maintainable: manifest at root, plus popup, background, content, and icons folders.

The Background Service Worker

In Manifest V3, background logic runs as a service worker. It handles events even with no UI open, but unloads when idle to save memory.

{
  "background": {
    "service_worker": "background.js"
  }
}

The Popup Action

The action defines the toolbar button and the popup it opens — itself just a tiny HTML page. The config below shows both fields.

{
  "action": {
    "default_popup": "popup/popup.html",
    "default_title": "Open My Extension"
  }
}

Content Scripts

Content scripts run inside web pages so your extension can read and modify the DOM. You scope them with URL match patterns.

{
  "content_scripts": [{
    "matches": ["https://*.example.com/*"],
    "js": ["content/main.js"]
  }]
}

Icons in Multiple Sizes

Provide your icon in several sizes — browsers show it in different places at different resolutions, so it stays crisp everywhere.

{
  "icons": {
    "16": "icons/icon16.png",
    "48": "icons/icon48.png",
    "128": "icons/icon128.png"
  }
}

Declaring Permissions

The permissions array lists the browser APIs you need, like storage or tabs. Request only what you actually use.

{
  "permissions": ["storage", "activeTab"]
}

Web-Accessible Resources

If a web page must load a file packaged in your extension, list it under web_accessible_resources — otherwise the browser blocks access.

{
  "web_accessible_resources": [{
    "resources": ["images/logo.png"],
    "matches": ["https://*.example.com/*"]
  }]
}

How Pieces Communicate

Popup, content scripts, and service worker live in separate contexts, so they talk via the messaging API, not shared variables.

chrome.runtime.sendMessage({ type: 'PING' })

Keeping It Organized

As it grows, group related files into folders and keep manifest.json lean. A predictable layout makes debugging and store review easier.

Quick Check

Check what you remember about extension structure.

Recap

You toured the building blocks: manifest.json declares all, a service worker runs background, the action drives the popup, content scripts touch pages.

Häufig gestellte Fragen

Ist die Lektion „Aufbau eines Extension-Projekts“ kostenlos?

Ja — der vollständige Text von „Aufbau eines Extension-Projekts“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Browser Extensions Development (Chrome & Edge)-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Browser Extensions Development (Chrome & Edge)-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Aufbau eines Extension-Projekts“?

Lernen Sie die Standarddateien und -ordner kennen, aus denen eine Manifest-V3-Browser-Extension besteht, und erfahren Sie, welche Aufgabe die einzelnen Elemente erfüllen. Du übst Browser Extensions Development (Chrome & Edge) mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um Browser Extensions Development (Chrome & Edge) zu starten?

Keine Vorkenntnisse erforderlich. Browser Extensions Development (Chrome & Edge) auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 4 von 4.

Wie lange dauert die Lektion „Aufbau eines Extension-Projekts“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser Browser Extensions Development (Chrome & Edge)-Lektion Code schreiben und ausführen?

Ja. Jede Browser Extensions Development (Chrome & Edge)-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

← Zurück zu Browser Extensions Development (Chrome & Edge)