Browser Extensions Development (Chrome & Edge) · Lektion

Ihre erste „Hello World“-Erweiterung

Erstellen Sie eine minimale „Hello World“-Erweiterung und behandeln Sie dabei die Manifestdatei, die grundlegende Struktur und das Laden in den Browser.

Ihre erste „Hello World“-Erweiterung ist eine kostenlose Browser Extensions Development (Chrome & Edge)-Lektion auf CoddyKit. Dies ist Lektion 3 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.

Your First Extension: Hello World

Time to build your first extension — a classic Hello World popup that greets you when you click its toolbar icon. The core Manifest V3 shape.

Core Extension Components

Every extension needs a few key files: manifest.json (the blueprint), popup.html (the popup content), and an icon. We'll build them step by step.

Manifest.json: The Blueprint

The manifest.json is the most important file — JSON metadata like name, version, and permissions, in the structure Manifest V3 expects.

Essential Manifest Fields

Start your manifest with three required fields: manifest_version 3, a name, and a version. The snippet below shows the minimal shape.

{ "manifest_version": 3,
  "name": "Hello World Extension",
  "version": "1.0"
}

Adding Description & Icons

Add a description and an icons map so users understand and recognize your extension. Provide several sizes like 16, 48, and 128 pixels.

{ "manifest_version": 3,
  "name": "Hello World Extension",
  "version": "1.0",
  "description": "A simple 'Hello World' extension for CoddyKit.",
  "icons": {
    "16": "icon16.png",
    "48": "icon48.png",
    "128": "icon128.png"
  }
}

Defining the Popup with 'action'

The action field defines the toolbar button: default_popup points to your popup HTML, and default_icon sets the toolbar image.

{ "manifest_version": 3,
  "name": "Hello World Extension",
  "version": "1.0",
  "description": "A simple 'Hello World' extension for CoddyKit.",
  "icons": { "16": "icon16.png" },
  "action": {
    "default_popup": "popup.html",
    "default_icon": { "16": "icon16.png" }
  }
}

Creating popup.html

Create popup.html — a plain HTML file holding your Hello World message. Keep it small and light, since it shows in a tiny popup window.

<!DOCTYPE html>
<html>
<head>
  <title>Hello World Popup</title>
  <style>
    body { font-family: sans-serif; padding: 15px; width: 150px; }
    h1 { font-size: 1.2em; color: #333; margin: 0; }
  </style>
</head>
<body>
  <h1>Hello, CoddyKit!</h1>
</body>
</html>

Your Extension's Folder Structure

Your folder should now hold manifest.json, popup.html, and the icons, all directly inside — a clean layout the browser can load correctly.

Loading Your Extension (Chrome)

Load it in Chrome or Edge: open chrome://extensions, flip on Developer mode, click Load unpacked, and pick your folder. It joins the list!

Test Your New Extension!

Spot your extension's icon in the toolbar and click it — a popup appears reading "Hello, CoddyKit!" from your popup.html. First extension done!

Quick Check: Manifest V3

Which field is absolutely essential to declare the manifest format version in manifest.json for a Manifest V3 extension?

Recap: Your First Extension

You built and loaded a real extension: a manifest with key fields, an action popup, a popup.html, all run via Developer mode. Keep tinkering!

Häufig gestellte Fragen

Ist die Lektion „Ihre erste „Hello World“-Erweiterung“ kostenlos?

Ja — der vollständige Text von „Ihre erste „Hello World“-Erweiterung“ 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 „Ihre erste „Hello World“-Erweiterung“?

Erstellen Sie eine minimale „Hello World“-Erweiterung und behandeln Sie dabei die Manifestdatei, die grundlegende Struktur und das Laden in den Browser. 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 3 von 4.

Wie lange dauert die Lektion „Ihre erste „Hello World“-Erweiterung“?

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)