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

Устройство проекта расширения

Познакомьтесь со стандартными файлами и папками, из которых состоит расширение браузера Manifest V3, и узнайте назначение каждого из них.

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

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

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.

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

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

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

Чему я научусь в уроке «Устройство проекта расширения»?

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

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

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

Сколько времени занимает урок «Устройство проекта расширения»?

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

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

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

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

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