Browser Extensions Development (Chrome & Edge) · Урок

Ваше первое расширение «Hello World»

Создайте минимальное расширение «Hello World», изучив файл манифеста, базовую структуру и загрузку расширения в браузер.

«Ваше первое расширение «Hello World»» — бесплатный урок Browser Extensions Development (Chrome & Edge) на CoddyKit. Это урок 3 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Browser Extensions Development (Chrome & Edge), и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Browser Extensions Development (Chrome & Edge) содержит 4 уроков всего.

Части этого урока еще не переведены и отображаются на английском.

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!

Часто задаваемые вопросы

Урок «Ваше первое расширение «Hello World»» бесплатный?

Да — полный текст урока «Ваше первое расширение «Hello World»» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Browser Extensions Development (Chrome & Edge), подпишись на CoddyKit PRO. Курс Browser Extensions Development (Chrome & Edge) содержит 4 уроков всего.

Чему я научусь в уроке «Ваше первое расширение «Hello World»»?

Создайте минимальное расширение «Hello World», изучив файл манифеста, базовую структуру и загрузку расширения в браузер. Ты практикуешь Browser Extensions Development (Chrome & Edge) с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Browser Extensions Development (Chrome & Edge)?

Предыдущий опыт не требуется. Browser Extensions Development (Chrome & Edge) на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 3 из 4.

Сколько времени занимает урок «Ваше первое расширение «Hello World»»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Browser Extensions Development (Chrome & Edge)?

Да. Каждый урок Browser Extensions Development (Chrome & Edge) включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

← Назад к Browser Extensions Development (Chrome & Edge)