Anatomia di un progetto di estensione
Esaminate i file e le cartelle standard che compongono un’estensione per browser Manifest V3 e scoprite la funzione di ciascuno.
Anatomia di un progetto di estensione è una lezione Browser Extensions Development (Chrome & Edge) gratuita su CoddyKit. Questa è la lezione 4 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Browser Extensions Development (Chrome & Edge), e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Browser Extensions Development (Chrome & Edge) include 4 lezioni in totale.
Parti di questa lezione non sono ancora state tradotte e vengono mostrate in inglese.
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.
Impara JavaScript con un tutor IA — gratis
Scrivi ed esegui vero codice nel tuo browser, ricevi aiuto istantaneo da un tutor IA disponibile 24/7, e riprendi da dove hai lasciato sul web o nell'app.
- Corsi
- 12
- Lezioni
- 48
Domande Frequenti
La lezione «Anatomia di un progetto di estensione» è gratuita?
Sì — il testo completo di «Anatomia di un progetto di estensione» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Browser Extensions Development (Chrome & Edge), passa a CoddyKit PRO. Il corso Browser Extensions Development (Chrome & Edge) include 4 lezioni in totale.
Cosa imparerò in «Anatomia di un progetto di estensione»?
Esaminate i file e le cartelle standard che compongono un’estensione per browser Manifest V3 e scoprite la funzione di ciascuno. Eserciti Browser Extensions Development (Chrome & Edge) con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare Browser Extensions Development (Chrome & Edge)?
Non è richiesta alcuna esperienza precedente. Browser Extensions Development (Chrome & Edge) su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 4 di 4.
Quanto tempo richiede la lezione «Anatomia di un progetto di estensione»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione Browser Extensions Development (Chrome & Edge)?
Sì. Ogni lezione Browser Extensions Development (Chrome & Edge) include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- Cosa sono le estensioni del browser?
- Configurazione dell’ambiente di sviluppo
- La prima estensione "Hello World"
- Anatomia di un progetto di estensione