Настройка среды разработки
Настройте среду разработки для создания расширений Chrome и Edge, включая конфигурацию браузеров и основные инструменты.
«Настройка среды разработки» — бесплатный урок Browser Extensions Development (Chrome & Edge) на CoddyKit. Это урок 2 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Browser Extensions Development (Chrome & Edge), и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Browser Extensions Development (Chrome & Edge) содержит 4 уроков всего.
Части этого урока еще не переведены и отображаются на английском.
Get Ready to Build!
Before building, set up your workspace — prepping tools first makes coding smoother and lets you test your extensions efficiently.
Your Browser is Your Lab
Your browser is your lab. Chrome and Edge have built-in dev features; the first step is flipping on their special "Developer Mode."
Switch On Developer Mode
Enable Developer Mode: open chrome://extensions and toggle the switch in the top-right. That unlocks loading and testing your own extensions.
Your Extension's Home
Each extension needs its own folder for all its files. Make an empty one — say my-first-extension — where we'll drop the manifest and code.
The Essential Manifest File
The manifest.json is your extension's blueprint — it tells the browser the key details. Start with a minimal one in your folder.
Pick a Code Editor
Any editor works, but a real code editor adds highlighting, autocomplete, and debugging. VS Code is the free, popular pick — grab it if needed.
Load Your Unpacked Extension
With Developer Mode on, click Load unpacked and select your folder. Your extension should appear in the list, maybe with an icon in the toolbar.
Refresh for Updates
After editing files, the browser won't see changes until you reload — hit the refresh icon on your extension's card in chrome://extensions.
Debug with DevTools
Debug extensions with DevTools, just like web pages. Each card links to its background "service worker" or popup inspector for digging in.
Development Environment Check
You've learned the essential steps to prepare your browser and load your first extension. Let's test your understanding!
Which of the following actions is necessary to see changes in your extension after modifying its files?
Setup Complete!
Your environment is set: Developer Mode on, a folder with manifest.json, loading and reloading unpacked, and DevTools for debugging. Onward!
Часто задаваемые вопросы
Урок «Настройка среды разработки» бесплатный?
Да — полный текст урока «Настройка среды разработки» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Browser Extensions Development (Chrome & Edge), подпишись на CoddyKit PRO. Курс Browser Extensions Development (Chrome & Edge) содержит 4 уроков всего.
Чему я научусь в уроке «Настройка среды разработки»?
Настройте среду разработки для создания расширений Chrome и Edge, включая конфигурацию браузеров и основные инструменты. Ты практикуешь Browser Extensions Development (Chrome & Edge) с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Browser Extensions Development (Chrome & Edge)?
Предыдущий опыт не требуется. Browser Extensions Development (Chrome & Edge) на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 4.
Сколько времени занимает урок «Настройка среды разработки»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Browser Extensions Development (Chrome & Edge)?
Да. Каждый урок Browser Extensions Development (Chrome & Edge) включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Что такое расширения браузера
- Настройка среды разработки
- Ваше первое расширение «Hello World»
- Устройство проекта расширения