Web-Dev-For-Beginners/translations/it/5-browser-extension/1-about-browsers/README.md

Progetto Estensione Browser Parte 1: Tutto sui Browser

journey
    title Your Browser Extension Development Journey
    section Foundation
      Understand browsers: 3: Student
      Learn extension types: 4: Student
      Setup development: 4: Student
    section Development
      Build interface: 4: Student
      Add functionality: 5: Student
      Handle data: 5: Student
    section Integration
      Test in browser: 5: Student
      Debug issues: 4: Student
      Polish experience: 5: Student

Schizzo di Wassim Chegham

Quiz Pre-Lezione

Quiz pre-lezione

Introduzione

Le estensioni per browser sono mini-applicazioni che migliorano la tua esperienza di navigazione web. Come la visione originale di Tim Berners-Lee di un web interattivo, le estensioni ampliano le capacità del browser oltre la semplice visualizzazione di documenti. Dai gestori di password che mantengono sicuri i tuoi account ai selettori di colori che aiutano i designer a trovare le tonalità perfette, le estensioni risolvono le sfide quotidiane della navigazione.

Prima di costruire la tua prima estensione, cerchiamo di capire come funzionano i browser. Proprio come Alexander Graham Bell ha dovuto comprendere la trasmissione del suono prima di inventare il telefono, conoscere i fondamenti dei browser ti aiuterà a creare estensioni che si integrano perfettamente con i sistemi esistenti del browser.

Alla fine di questa lezione, comprenderai l'architettura dei browser e avrai iniziato a costruire la tua prima estensione.

mindmap
  root((Browser Architecture))
    Core Components
      Rendering Engine
      JavaScript Engine
      Network Stack
      Storage APIs
    User Interface
      Address Bar
      Tab Management
      Bookmarks
      Extension Icons
    Extension System
      Manifest Files
      Content Scripts
      Background Pages
      Popup Windows
    Security Model
      Same-Origin Policy
      Permissions API
      Content Security
      Isolated Worlds
    Development Tools
      DevTools Integration
      Debug Console
      Performance Monitor
      Extension Inspector

Comprendere i Browser Web

Un browser web è essenzialmente un sofisticato interprete di documenti. Quando digiti "google.com" nella barra degli indirizzi, il browser esegue una serie complessa di operazioni: richiede contenuti dai server di tutto il mondo, quindi analizza e rende quel codice nelle pagine web interattive che vedi.

Questo processo rispecchia il modo in cui il primo browser web, WorldWideWeb, è stato progettato da Tim Berners-Lee nel 1990 per rendere i documenti ipertestuali accessibili a tutti.

✅ Un po' di storia: Il primo browser si chiamava 'WorldWideWeb' ed è stato creato da Sir Timothy Berners-Lee nel 1990.

Alcuni dei primi browser, via Karen McGrane

Come i Browser Elaborano i Contenuti Web

Il processo tra l'inserimento di un URL e la visualizzazione di una pagina web coinvolge diversi passaggi coordinati che avvengono in pochi secondi:

sequenceDiagram
    participant User
    participant Browser
    participant Extension
    participant DNS
    participant Server
    
    User->>Browser: Types URL and presses Enter
    Browser->>Extension: Trigger beforeRequest event
    Extension->>Extension: Check if URL needs modification
    Browser->>DNS: Looks up server IP address
    DNS->>Browser: Returns IP address
    Browser->>Server: Requests web page content
    Server->>Browser: Sends HTML, CSS, and JavaScript
    Browser->>Extension: Trigger beforeResponse event
    Extension->>Extension: Modify content if needed
    Browser->>User: Renders complete web page
    Extension->>User: Show extension UI updates

Ecco cosa realizza questo processo:

• Traduce l'URL leggibile dall'uomo in un indirizzo IP del server tramite la ricerca DNS
• Stabilisce una connessione sicura con il server web utilizzando i protocolli HTTP o HTTPS
• Richiede il contenuto specifico della pagina web dal server
• Riceve il markup HTML, lo stile CSS e il codice JavaScript dal server
• Rende tutto il contenuto nella pagina web interattiva che vedi

Funzionalità Principali del Browser

I browser moderni offrono numerose funzionalità che gli sviluppatori di estensioni possono sfruttare:

Funzionalità	Scopo	Opportunità per le Estensioni
Motore di Rendering	Visualizza HTML, CSS e JavaScript	Modifica dei contenuti, iniezione di stili
Motore JavaScript	Esegue il codice JavaScript	Script personalizzati, interazioni con API
Archiviazione Locale	Salva dati localmente	Preferenze utente, dati memorizzati nella cache
Stack di Rete	Gestisce le richieste web	Monitoraggio delle richieste, analisi dei dati
Modello di Sicurezza	Protegge gli utenti da contenuti dannosi	Filtraggio dei contenuti, miglioramenti della sicurezza

Comprendere queste funzionalità ti aiuta a:

• Identificare dove la tua estensione può aggiungere il massimo valore
• Scegliere le API del browser giuste per la funzionalità della tua estensione
• Progettare estensioni che funzionano in modo efficiente con i sistemi del browser
• Garantire che la tua estensione segua le migliori pratiche di sicurezza del browser

Considerazioni sullo Sviluppo Cross-Browser

I diversi browser implementano gli standard con leggere variazioni, simili a come i diversi linguaggi di programmazione potrebbero gestire lo stesso algoritmo in modo diverso. Chrome, Firefox e Safari hanno ciascuno caratteristiche uniche che gli sviluppatori devono considerare durante lo sviluppo delle estensioni.

💡 Suggerimento Pro: Usa caniuse.com per verificare quali tecnologie web sono supportate nei diversi browser. Questo è prezioso quando pianifichi le funzionalità della tua estensione!

Considerazioni chiave per lo sviluppo di estensioni:

• Testa la tua estensione su browser come Chrome, Firefox ed Edge
• Adatta alle diverse API di estensione e formati di manifest dei browser
• Gestisci le diverse caratteristiche di prestazione e limitazioni
• Fornisci soluzioni alternative per funzionalità specifiche del browser che potrebbero non essere disponibili

✅ Insight Analitico: Puoi determinare quali browser preferiscono i tuoi utenti installando pacchetti di analisi nei tuoi progetti di sviluppo web. Questi dati ti aiutano a stabilire priorità su quali browser supportare per primi.

Comprendere le Estensioni per Browser

Le estensioni per browser risolvono le sfide comuni della navigazione web aggiungendo funzionalità direttamente all'interfaccia del browser. Piuttosto che richiedere applicazioni separate o flussi di lavoro complessi, le estensioni forniscono accesso immediato a strumenti e funzionalità.

Questo concetto rispecchia il modo in cui i primi pionieri dell'informatica come Douglas Engelbart immaginavano di aumentare le capacità umane con la tecnologia: le estensioni aumentano la funzionalità di base del browser.

quadrantChart
    title Browser Extension Categories
    x-axis Simple --> Complex
    y-axis Personal Use --> Professional Tools
    quadrant-1 Developer Tools
    quadrant-2 Enterprise Solutions
    quadrant-3 Personal Utilities
    quadrant-4 Productivity Apps
    
    Ad Blockers: [0.3, 0.2]
    Password Managers: [0.7, 0.3]
    Color Pickers: [0.4, 0.8]
    Code Formatters: [0.8, 0.9]
    Note Taking: [0.6, 0.5]
    Video Downloaders: [0.5, 0.2]
    Time Trackers: [0.7, 0.6]
    Screenshot Tools: [0.4, 0.4]

Categorie popolari di estensioni e i loro benefici:

• Strumenti di Produttività: Gestori di attività, app per prendere appunti e tracker di tempo che ti aiutano a rimanere organizzato
• Miglioramenti della Sicurezza: Gestori di password, blocchi pubblicitari e strumenti per la privacy che proteggono i tuoi dati
• Strumenti per Sviluppatori: Formattatori di codice, selettori di colori e strumenti di debug che semplificano lo sviluppo
• Miglioramento dei Contenuti: Modalità di lettura, downloader di video e strumenti per screenshot che migliorano la tua esperienza web

✅ Domanda di Riflessione: Quali sono le tue estensioni per browser preferite? Quali compiti specifici svolgono e come migliorano la tua esperienza di navigazione?

🔄 Verifica Pedagogica

Comprensione dell'Architettura del Browser: Prima di passare allo sviluppo delle estensioni, assicurati di poter:

• ✅ Spiegare come i browser elaborano le richieste web e rendono i contenuti
• ✅ Identificare i principali componenti dell'architettura del browser
• ✅ Comprendere come le estensioni si integrano con la funzionalità del browser
• ✅ Riconoscere il modello di sicurezza che protegge gli utenti

Auto-Valutazione Rapida: Riesci a tracciare il percorso dall'inserimento di un URL alla visualizzazione di una pagina web?

1. Ricerca DNS converte l'URL in un indirizzo IP
2. Richiesta HTTP recupera il contenuto dal server
3. Parsing elabora HTML, CSS e JavaScript
4. Rendering visualizza la pagina web finale
5. Estensioni possono modificare il contenuto in più passaggi

Installazione e Gestione delle Estensioni

Comprendere il processo di installazione delle estensioni ti aiuta a prevedere l'esperienza utente quando le persone installano la tua estensione. Il processo di installazione è standardizzato nei browser moderni, con lievi variazioni nel design dell'interfaccia.

Importante: Assicurati di attivare la modalità sviluppatore e consentire estensioni da altri store quando testi le tue estensioni.

Processo di Installazione delle Estensioni in Sviluppo

Quando sviluppi e testi le tue estensioni, segui questo flusso di lavoro:

flowchart TD
    A[Write Code] --> B[Build Extension]
    B --> C{First Install?}
    C -->|Yes| D[Load Unpacked]
    C -->|No| E[Reload Extension]
    D --> F[Test Functionality]
    E --> F
    F --> G{Working Correctly?}
    G -->|No| H[Debug Issues]
    G -->|Yes| I[Ready for Users]
    H --> A
    I --> J[Publish to Store]
    
    style A fill:#e1f5fe
    style F fill:#e8f5e8
    style I fill:#f3e5f5
    style J fill:#fff3e0

# Step 1: Build your extension
npm run build

Cosa realizza questo comando:

• Compila il tuo codice sorgente in file pronti per il browser
• Raggruppa i moduli JavaScript in pacchetti ottimizzati
• Genera i file finali dell'estensione nella cartella /dist
• Prepara la tua estensione per l'installazione e il test

Passaggio 2: Naviga alle Estensioni del Browser

1. Apri la pagina di gestione delle estensioni del tuo browser
2. Clicca sul pulsante "Impostazioni e altro" (l'icona ...) in alto a destra
3. Seleziona "Estensioni" dal menu a tendina

Passaggio 3: Carica la tua Estensione

• Per nuove installazioni: Scegli carica non impacchettato e seleziona la tua cartella /dist
• Per aggiornamenti: Clicca su ricarica accanto alla tua estensione già installata
• Per test: Abilita la "Modalità sviluppatore" per accedere a funzionalità di debug aggiuntive

Installazione delle Estensioni in Produzione

✅ Nota: Queste istruzioni di sviluppo sono specifiche per le estensioni che costruisci tu stesso. Per installare estensioni pubblicate, visita gli store ufficiali delle estensioni del browser come il Microsoft Edge Add-ons store.

Comprendere la differenza:

• Installazioni di sviluppo ti permettono di testare estensioni non pubblicate durante lo sviluppo
• Installazioni dallo store forniscono estensioni pubblicate e verificate con aggiornamenti automatici
• Sideloading consente l'installazione di estensioni da fuori gli store ufficiali (richiede la modalità sviluppatore)

Creare la tua Estensione per l'Impronta di Carbonio

Creeremo un'estensione per browser che mostra l'impronta di carbonio dell'uso energetico della tua regione. Questo progetto dimostra concetti essenziali dello sviluppo di estensioni mentre crea uno strumento pratico per la consapevolezza ambientale.

Questo approccio segue il principio del "imparare facendo" che si è dimostrato efficace sin dalle teorie educative di John Dewey - combinando competenze tecniche con applicazioni significative nel mondo reale.

Requisiti del Progetto

Prima di iniziare lo sviluppo, raccogliamo le risorse e le dipendenze necessarie:

Accesso API Richiesto:

• Chiave API CO2 Signal: Inserisci il tuo indirizzo email per ricevere la tua chiave API gratuita
• Codice Regione: Trova il codice della tua regione usando la Electricity Map (ad esempio, Boston usa 'US-NEISO')

Strumenti di Sviluppo:

• Node.js e NPM: Strumento di gestione dei pacchetti per installare le dipendenze del progetto
• Codice iniziale: Scarica la cartella start per iniziare lo sviluppo

✅ Scopri di più: Migliora le tue competenze di gestione dei pacchetti con questo modulo di apprendimento completo

Comprendere la Struttura del Progetto

Comprendere la struttura del progetto aiuta a organizzare il lavoro di sviluppo in modo efficiente. Come la Biblioteca di Alessandria era organizzata per un facile recupero delle conoscenze, una base di codice ben strutturata rende lo sviluppo più efficiente:

project-root/
├── dist/                    # Built extension files
│   ├── manifest.json        # Extension configuration
│   ├── index.html           # User interface markup
│   ├── background.js        # Background script functionality
│   └── main.js              # Compiled JavaScript bundle
├── src/                     # Source development files
│   └── index.js             # Your main JavaScript code
├── package.json             # Project dependencies and scripts
└── webpack.config.js        # Build configuration

Analisi di ciò che realizza ogni file:

• manifest.json: Definisce i metadati dell'estensione, i permessi e i punti di ingresso
• index.html: Crea l'interfaccia utente che appare quando gli utenti cliccano sulla tua estensione
• background.js: Gestisce attività in background e listener di eventi del browser
• main.js: Contiene il JavaScript finale raggruppato dopo il processo di build
• src/index.js: Contiene il tuo codice di sviluppo principale che viene compilato in main.js

💡 Suggerimento di Organizzazione: Conserva la tua chiave API e il codice della regione in una nota sicura per un facile riferimento durante lo sviluppo. Avrai bisogno di questi valori per testare la funzionalità della tua estensione.

✅ Nota di Sicurezza: Non commettere mai chiavi API o credenziali sensibili nel tuo repository di codice. Ti mostreremo come gestirle in modo sicuro nei prossimi passaggi.

Creare l'Interfaccia dell'Estensione

Ora costruiremo i componenti dell'interfaccia utente. L'estensione utilizza un approccio a due schermate: una schermata di configurazione per la configurazione iniziale e una schermata dei risultati per la visualizzazione dei dati.

Questo segue il principio della divulgazione progressiva utilizzato nel design delle interfacce sin dai primi giorni dell'informatica - rivelando informazioni e opzioni in una sequenza logica per evitare di sopraffare gli utenti.

Panoramica delle Visualizzazioni dell'Estensione

Vista di Configurazione - Configurazione iniziale dell'utente:

Vista dei Risultati - Visualizzazione dei dati sull'impronta di carbonio:

Creare il Modulo di Configurazione

Il modulo di configurazione raccoglie i dati di configurazione dell'utente durante l'uso iniziale. Una volta configurato, queste informazioni persistono nell'archiviazione del browser per sessioni future.

Nel file /dist/index.html, aggiungi questa struttura del modulo:

<form class="form-data" autocomplete="on">
    <div>
        <h2>New? Add your Information</h2>
    </div>
    <div>
        <label for="region">Region Name</label>
        <input type="text" id="region" required class="region-name" />
    </div>
    <div>
        <label for="api">Your API Key from tmrow</label>
        <input type="text" id="api" required class="api-key" />
    </div>
    <button class="search-btn">Submit</button>
</form>

Ecco cosa realizza questo modulo:

• Crea una struttura semantica del modulo con etichette e associazioni di input corrette
• Abilita la funzionalità di completamento automatico del browser per migliorare l'esperienza utente
• Richiede che entrambi i campi siano compilati prima dell'invio utilizzando l'attributo required
• Organizza gli input con nomi di classe descrittivi per uno stile facile e targeting JavaScript
• Fornisce istruzioni chiare per gli utenti che configurano l'estensione per la prima volta

Creare la Visualizzazione dei Risultati

Successivamente, crea l'area dei risultati che mostrerà i dati sull'impronta di carbonio. Aggiungi questo HTML sotto il modulo:

<div class="result">
    <div class="loading">loading...</div>
    <div class="errors"></div>
    <div class="data"></div>
    <div class="result-container">
        <p><strong>Region: </strong><span class="my-region"></span></p>
        <p><strong>Carbon Usage: </strong><span class="carbon-usage"></span></p>
        <p><strong>Fossil Fuel Percentage: </strong><span class="fossil-fuel"></span></p>
    </div>
    <button class="clear-btn">Change region</button>
</div>

Analisi di ciò che fornisce questa struttura:

• loading: Mostra un messaggio di caricamento mentre i dati API vengono recuperati
• errors: Mostra messaggi di errore se le chiamate API falliscono o i dati sono invalidi
• data: Contiene dati grezzi per il debug durante lo sviluppo
• result-container: Presenta informazioni formattate sull'impronta di carbonio agli utenti
• clear-btn: Permette agli utenti di cambiare la loro regione e riconfigurare l'estensione

Configurare il Processo di Build

Ora installiamo le dipendenze del progetto e testiamo il processo di build:

npm install

Cosa realizza questo processo di installazione:

• Scarica Webpack e altre dipendenze di sviluppo specificate in package.json
• Configura la toolchain di build per compilare JavaScript moderno
• Prepara l'ambiente di sviluppo per la costruzione e il test dell'estensione
• Abilita il raggruppamento del codice, l'ottimizzazione e le funzionalità di compatibilità cross-browser

💡 Insight sul Processo di Build: Webpack raggruppa il tuo codice sorgente da /src/index.js in /dist/main.js. Questo processo ottimizza il tuo codice per la produzione e garantisce la compatibilità con i browser.

Testare i Progressi

A questo punto, puoi testare la tua estensione:

1. Esegui il comando di build per compilare il tuo codice
2. Carica l'estensione nel tuo browser utilizzando la modalità sviluppatore
3. Verifica che il modulo venga visualizzato correttamente e abbia un aspetto professionale
4. Controlla che tutti gli elementi del modulo siano correttamente allineati e funzionanti

Cosa hai realizzato:

• Creato la struttura HTML di base per la tua estensione
• Sviluppato interfacce di configurazione e risultati con un markup semantico appropriato
• Impostato un flusso di lavoro di sviluppo moderno utilizzando strumenti standard del settore
• Preparato la base per aggiungere funzionalità interattive in JavaScript

🔄 Verifica Pedagogica

Progresso nello sviluppo dell'estensione: Verifica la tua comprensione prima di procedere:

• ✅ Sai spiegare lo scopo di ogni file nella struttura del progetto?
• ✅ Comprendi come il processo di build trasforma il tuo codice sorgente?
• ✅ Perché separiamo configurazione e risultati in sezioni UI diverse?
• ✅ Come la struttura del modulo supporta sia l'usabilità che l'accessibilità?

Comprensione del flusso di lavoro di sviluppo: Ora dovresti essere in grado di:

1. Modificare HTML e CSS per l'interfaccia della tua estensione
2. Eseguire il comando di build per compilare le modifiche
3. Ricaricare l'estensione nel browser per testare gli aggiornamenti
4. Debuggare problemi utilizzando gli strumenti per sviluppatori del browser

Hai completato la prima fase dello sviluppo di estensioni per browser. Proprio come i fratelli Wright hanno dovuto comprendere l'aerodinamica prima di volare, capire questi concetti fondamentali ti prepara a costruire funzionalità interattive più complesse nella prossima lezione.

Sfida GitHub Copilot Agent 🚀

Usa la modalità Agent per completare la seguente sfida:

Descrizione: Migliora l'estensione del browser aggiungendo funzionalità di validazione del modulo e feedback per l'utente, migliorando l'esperienza durante l'inserimento di chiavi API e codici regione.

Prompt: Crea funzioni di validazione in JavaScript che controllino se il campo della chiave API contiene almeno 20 caratteri e se il codice regione segue il formato corretto (ad esempio 'US-NEISO'). Aggiungi un feedback visivo cambiando il colore dei bordi degli input: verde per input validi e rosso per input non validi. Aggiungi anche una funzione di toggle per mostrare/nascondere la chiave API per motivi di sicurezza.

Scopri di più sulla modalità agent qui.

🚀 Sfida

Dai un'occhiata a uno store di estensioni per browser e installane una nel tuo browser. Puoi esaminare i suoi file in modi interessanti. Cosa scopri?

Quiz post-lezione

Quiz post-lezione

Revisione e studio autonomo

In questa lezione hai imparato un po' sulla storia del browser web; approfitta di questa opportunità per approfondire come gli inventori del World Wide Web ne hanno immaginato l'uso leggendo di più sulla sua storia. Alcuni siti utili includono:

La storia dei browser web

Storia del Web

Un'intervista con Tim Berners-Lee

⚡ Cosa puoi fare nei prossimi 5 minuti

• Apri la pagina delle estensioni di Chrome/Edge (chrome://extensions) ed esplora ciò che hai installato
• Guarda la scheda Network degli strumenti per sviluppatori del browser mentre carichi una pagina web
• Prova a visualizzare il sorgente della pagina (Ctrl+U) per vedere la struttura HTML
• Ispeziona un elemento di una pagina web e modifica il suo CSS negli strumenti per sviluppatori

🎯 Cosa puoi realizzare in quest'ora

• Completa il quiz post-lezione e comprendi i fondamenti dei browser
• Crea un file manifest.json di base per un'estensione del browser
• Costruisci una semplice estensione "Hello World" che mostra un popup
• Testa il caricamento della tua estensione in modalità sviluppatore
• Esplora la documentazione delle estensioni del browser per il tuo browser di destinazione

📅 Il tuo viaggio settimanale nello sviluppo di estensioni

• Completa un'estensione per browser funzionale con una reale utilità
• Scopri script di contenuto, script di background e interazioni con popup
• Padroneggia le API del browser come storage, tabs e messaging
• Progetta interfacce user-friendly per la tua estensione
• Testa la tua estensione su diversi siti web e scenari
• Pubblica la tua estensione nello store delle estensioni del browser

🌟 Il tuo mese di sviluppo per browser

• Crea più estensioni che risolvano diversi problemi degli utenti
• Impara API avanzate del browser e le migliori pratiche di sicurezza
• Contribuisci a progetti open source di estensioni per browser
• Padroneggia la compatibilità cross-browser e il miglioramento progressivo
• Crea strumenti e modelli di sviluppo per estensioni per altri sviluppatori
• Diventa un esperto di estensioni per browser che aiuta altri sviluppatori

🎯 La tua timeline di padronanza delle estensioni per browser

timeline
    title Browser Extension Development Progression
    
    section Foundation (15 minutes)
        Browser Understanding: Core architecture
                              : Rendering process
                              : Extension integration points
        
    section Setup (20 minutes)
        Development Environment: Project structure
                               : Build tools configuration
                               : Browser developer mode
                               : Extension loading process
        
    section Interface Design (25 minutes)
        User Experience: HTML structure
                       : CSS styling
                       : Form validation
                       : Responsive design
        
    section Core Functionality (35 minutes)
        JavaScript Integration: Event handling
                              : API interactions
                              : Data storage
                              : Error handling
        
    section Browser APIs (45 minutes)
        Platform Integration: Permissions system
                            : Storage APIs
                            : Tab management
                            : Context menus
        
    section Advanced Features (1 week)
        Professional Extensions: Background scripts
                               : Content scripts
                               : Cross-browser compatibility
                               : Performance optimization
        
    section Publishing (2 weeks)
        Distribution: Store submission
                   : Review process
                   : User feedback
                   : Update management
        
    section Expert Level (1 month)
        Extension Ecosystem: Advanced APIs
                           : Security best practices
                           : Enterprise features
                           : Framework integration

🛠️ Riepilogo del tuo toolkit per lo sviluppo di estensioni

Dopo aver completato questa lezione, ora hai:

• Conoscenza dell'architettura del browser: Comprensione dei motori di rendering, modelli di sicurezza e integrazione delle estensioni
• Ambiente di sviluppo: Toolchain moderna con Webpack, NPM e capacità di debug
• Fondamenti di UI/UX: Struttura HTML semantica con pattern di divulgazione progressiva
• Consapevolezza della sicurezza: Comprensione delle autorizzazioni del browser e delle pratiche di sviluppo sicuro
• Concetti cross-browser: Conoscenza delle considerazioni sulla compatibilità e degli approcci di test
• Integrazione API: Base per lavorare con fonti di dati esterne
• Flusso di lavoro professionale: Procedure di sviluppo e test standard del settore

Applicazioni reali: Queste competenze si applicano direttamente a:

• Sviluppo web: Applicazioni a pagina singola e app web progressive
• Applicazioni desktop: Software desktop basato sul web ed Electron
• Sviluppo mobile: App ibride e soluzioni mobili basate sul web
• Strumenti aziendali: Applicazioni di produttività interna e automazione dei flussi di lavoro
• Open Source: Contributi a progetti di estensioni per browser e standard web

Livello successivo: Sei pronto per aggiungere funzionalità interattive, lavorare con le API del browser e creare estensioni che risolvano problemi reali degli utenti!

Compito

Restyling della tua estensione

---

Disclaimer:
Questo documento è stato tradotto utilizzando il servizio di traduzione AI Co-op Translator. Sebbene ci impegniamo per garantire l'accuratezza, si prega di notare che le traduzioni automatiche possono contenere errori o imprecisioni. Il documento originale nella sua lingua nativa dovrebbe essere considerato la fonte autorevole. Per informazioni critiche, si raccomanda una traduzione professionale umana. Non siamo responsabili per eventuali incomprensioni o interpretazioni errate derivanti dall'uso di questa traduzione.