Anatomia projektu rozszerzenia
Poznają Państwo standardowe pliki i foldery tworzące rozszerzenie przeglądarki Manifest V3 oraz dowiedzą się, do czego służy każdy z nich.
Anatomia projektu rozszerzenia to bezpłatna lekcja Browser Extensions Development (Chrome & Edge) na CoddyKit. To lekcja 4 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Browser Extensions Development (Chrome & Edge), a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Browser Extensions Development (Chrome & Edge) zawiera 4 lekcji w sumie.
Części tej lekcji nie zostały jeszcze przetłumaczone i są wyświetlane po angielsku.
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.
Często zadawane pytania
Czy lekcja „Anatomia projektu rozszerzenia” jest bezpłatna?
Tak — pełny tekst „Anatomia projektu rozszerzenia” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Browser Extensions Development (Chrome & Edge), przejdź na CoddyKit PRO. Kurs Browser Extensions Development (Chrome & Edge) zawiera 4 lekcji w sumie.
Co nauczysz się w „Anatomia projektu rozszerzenia”?
Poznają Państwo standardowe pliki i foldery tworzące rozszerzenie przeglądarki Manifest V3 oraz dowiedzą się, do czego służy każdy z nich. Ćwiczysz Browser Extensions Development (Chrome & Edge) z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć Browser Extensions Development (Chrome & Edge)?
Nie wymagamy żadnego doświadczenia. Browser Extensions Development (Chrome & Edge) w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 4 z 4.
Ile czasu zajmuje lekcja „Anatomia projektu rozszerzenia”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji Browser Extensions Development (Chrome & Edge)?
Tak. Każda lekcja Browser Extensions Development (Chrome & Edge) zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- Czym są rozszerzenia przeglądarki
- Konfiguracja środowiska programistycznego
- Pierwsze rozszerzenie „Hello World”
- Anatomia projektu rozszerzenia