History

localizeflow[bot] ace08026dd chore(i18n): sync translations with latest source changes (chunk 1/1, 291 changes)		7 months ago
..
README.md	chore(i18n): sync translations with latest source changes (chunk 1/1, 291 changes)	7 months ago
assignment.md	chore(i18n): sync translations with latest source changes (chunk 1/1, 291 changes)	7 months ago

README.md

Unescape Escape

Projekt proširenja preglednika Dio 1: Sve o preglednicima

journey
    title Vaše putovanje razvoja proširenja preglednika
    section Osnove
      Razumjeti preglednike: 3: Student
      Naučiti vrste proširenja: 4: Student
      Postaviti razvojno okruženje: 4: Student
    section Razvoj
      Izgraditi sučelje: 4: Student
      Dodati funkcionalnost: 5: Student
      Obraditi podatke: 5: Student
    section Integracija
      Testirati u pregledniku: 5: Student
      Otkloniti probleme: 4: Student
      Usavršiti iskustvo: 5: Student

Sketchnote od Wassim Chegham

Kviz prije predavanja

Pre-lecture quiz

Uvod

Proširenja preglednika su mini-aplikacije koje poboljšavaju vaše iskustvo pregledavanja weba. Kao što je Tim Berners-Lee zamišljao interaktivni web, proširenja proširuju mogućnosti preglednika izvan jednostavnog prikaza dokumenata. Od upravitelja lozinkama koji štite vaše račune do birača boja koji pomažu dizajnerima da uhvate savršene nijanse, proširenja rješavaju svakodnevne izazove pregledavanja.

Prije nego što izradimo vaše prvo proširenje, razumimo kako preglednici rade. Baš kao što je Alexander Graham Bell trebao razumjeti prijenos zvuka prije nego što je izumio telefon, poznavanje osnovnih principa preglednika pomoći će vam da izradite proširenja koja se besprijekorno integriraju s postojećim sustavima preglednika.

Na kraju ovog poglavlja razumjet ćete arhitekturu preglednika i započeti gradnju svog prvog proširenja.

mindmap
  root((Arhitektura preglednika))
    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

Razumijevanje web preglednika

Web preglednik je u suštini sofisticirani tumač dokumenata. Kad upišete "google.com" u adresnu traku, preglednik izvodi složeni niz radnji - traži sadržaj s poslužitelja širom svijeta, zatim parsira i prikazuje taj kod u interaktivne web stranice koje vidite.

Ovaj proces odražava kako je prvi web preglednik, WorldWideWeb, dizajnirao Tim Berners-Lee 1990. godine kako bi hiperveze učinio dostupnima svima.

✅ Malo povijesti: Prvi preglednik zvao se ‘WorldWideWeb’ i stvorio ga je sir Timothy Berners-Lee 1990. godine.

Neki rani preglednici, prema Karen McGrane

Kako preglednici obrađuju web sadržaj

Proces između unošenja URL-a i prikaza web stranice uključuje nekoliko koordiniranih koraka koji se odigraju u roku od sekundi:

sequenceDiagram
    participant User
    participant Browser
    participant Extension
    participant DNS
    participant Server
    
    User->>Browser: Unosi URL i pritiska Enter
    Browser->>Extension: Pokreće beforeRequest događaj
    Extension->>Extension: Provjerava treba li mijenjati URL
    Browser->>DNS: Traži IP adresu servera
    DNS->>Browser: Vraća IP adresu
    Browser->>Server: Zahtijeva sadržaj web stranice
    Server->>Browser: Šalje HTML, CSS i JavaScript
    Browser->>Extension: Pokreće beforeResponse događaj
    Extension->>Extension: Mijenja sadržaj ako je potrebno
    Browser->>User: Prikazuje kompletnu web stranicu
    Extension->>User: Prikazuje ažuriranja ekstenzije UI

Ovo je što proces postiže:

Prevede URL čitljiv ljudima u IP adresu poslužitelja putem DNS upita
Uspostavi sigurnu vezu s web poslužiteljem koristeći HTTP ili HTTPS protokole
Zatraži specifični sadržaj web stranice s poslužitelja
Primi HTML oznake, CSS stilove i JavaScript kod s poslužitelja
Prikazuje sav sadržaj u interaktivnu web stranicu koju vidite

Osnovne značajke preglednika

Moderni preglednici pružaju brojne značajke koje programeri proširenja mogu iskoristiti:

Značajka	Svrha	Mogućnosti za proširenja
Rendering Engine	Prikazuje HTML, CSS i JavaScript	Modifikacija sadržaja, umetanje stilova
JavaScript Engine	Izvršava JavaScript kod	Prilagođeni skripti, interakcije s API-jem
Local Storage	Sprema podatke lokalno	Postavke korisnika, predmemorirani podaci
Network Stack	Rukuje web zahtjevima	Praćenje zahtjeva, analiza podataka
Security Model	Štiti korisnike od zlonamjernog sadržaja	Filtriranje sadržaja, sigurnosna poboljšanja

Razumijevanje ovih značajki pomaže vam da:

Prepoznate gdje vaše proširenje može dodati najviše vrijednosti
Odaberete prave API-je preglednika za funkcionalnost vašeg proširenja
Dizajnirate proširenja koja učinkovito rade s pregledničkim sustavima
Osigurate da vaše proširenje slijedi najbolje prakse sigurnosti preglednika

Razmatranja za razvoj na više preglednika

Različiti preglednici standarde provode s malim varijacijama, slično kao što različiti programski jezici mogu drugačije obraditi isti algoritam. Chrome, Firefox i Safari svaki imaju jedinstvene karakteristike koje developeri moraju uzeti u obzir tijekom izrade proširenja.

💡 Savjet: Koristite caniuse.com kako biste provjerili koje web tehnologije podržavaju različiti preglednici. Ovo je neprocjenjivo kod planiranja funkcionalnosti vašeg proširenja!

Ključne stvari za razvoj proširenja:

Testirajte svoje proširenje na preglednicima Chrome, Firefox i Edge
Prilagodite se različitim API-jima i formatima manifest datoteka
Riješite varijacije u performansama i ograničenjima
Omogućite alternative za značajke specifične za određene preglednike koje možda nisu dostupne

✅ Uvid u analitiku: Možete odrediti koje preglednike vaši korisnici preferiraju instaliranjem analitičkih paketa u vaše web razvojne projekte. Ti podaci pomažu vam prioritetizirati koje preglednike prvo podržavati.

Razumijevanje proširenja preglednika

Proširenja preglednika rješavaju uobičajene izazove pregledavanja dodavanjem funkcionalnosti izravno u sučelje preglednika. Umjesto da korisnici trebaju zasebne aplikacije ili složene procese, proširenja pružaju trenutačan pristup alatima i značajkama.

Ovaj koncept podsjeća na način kako su ranih računarskih pionira poput Douglasa Engelbarta zamišljali povećanje ljudskih sposobnosti pomoću tehnologije - proširenja nadograđuju osnovnu funkcionalnost vašeg preglednika.

quadrantChart
    title Kategorije proširenja preglednika
    x-axis Jednostavno --> Složenije
    y-axis Privatna upotreba --> Profesionalni alati
    quadrant-1 Alati za razvoj
    quadrant-2 Rješenja za poduzeća
    quadrant-3 Privatni alati
    quadrant-4 Aplikacije za produktivnost
    
    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]

Popularne kategorije proširenja i njihove prednosti:

Alati za produktivnost: Upravljanje zadacima, aplikacije za bilješke i vremensko praćenje koje pomažu u organizaciji
Sigurnosna poboljšanja: Upravitelji lozinkama, blokatori reklama i alati za privatnost koji štite vaše podatke
Alati za developere: Formatere koda, biranje boja i alati za otklanjanje pogrešaka koji ubrzavaju razvoj
Poboljšanje sadržaja: Načini čitanja, preuzimatelji videa i alati za snimanje zaslona koji poboljšavaju vaše web iskustvo

✅ Pitanje za razmišljanje: Koja su vaša omiljena proširenja preglednika? Koje specifične zadatke obavljaju i kako poboljšavaju vaše iskustvo pregledavanja?

🔄 Pedagoški pregled

Razumijevanje arhitekture preglednika: Prije prelaska na razvoj proširenja, pobrinite se da možete:

✅ Objasniti kako preglednici obrađuju web zahtjeve i prikazuju sadržaj
✅ Prepoznati glavne komponente arhitekture preglednika
✅ Razumjeti kako se proširenja integriraju s funkcionalnošću preglednika
✅ Prepoznati sigurnosni model koji štiti korisnike

Brzi samoprovjera: Možete li pratiti put od upisivanja URL-a do prikaza web stranice?

DNS upit pretvara URL u IP adresu
HTTP zahtjev dohvaća sadržaj s poslužitelja
Parsiranje obrađuje HTML, CSS i JavaScript
Prikazivanje prikazuje konačnu web stranicu
Proširenja mogu modificirati sadržaj u više koraka

Instalacija i upravljanje proširenjima

Razumijevanje procesa instalacije proširenja pomaže vam predvidjeti iskustvo korisnika kad ljudi instaliraju vaše proširenje. Proces instalacije standardiziran je kod modernih preglednika, s manjim varijacijama u dizajnu sučelja.

Važno: Provjerite jeste li uključili način za developere te dozvolili instalaciju proširenja iz drugih trgovina prilikom testiranja svojih proširenja.

Proces instalacije proširenja tijekom razvoja

Kad razvijate i testirate vlastita proširenja, slijedite ovaj tijek rada:

flowchart TD
    A[Napiši kod] --> B[Sastavi proširenje]
    B --> C{Prva instalacija?}
    C -->|Da| D[Učitaj nepakovano]
    C -->|Ne| E[Ponovno učitaj proširenje]
    D --> F[Testiraj funkcionalnost]
    E --> F
    F --> G{Radi ispravno?}
    G -->|Ne| H[Riješi probleme]
    G -->|Da| I[Spremljeno za korisnike]
    H --> A
    I --> J[Objavi u trgovini]
    
    style A fill:#e1f5fe
    style F fill:#e8f5e8
    style I fill:#f3e5f5
    style J fill:#fff3e0

# Korak 1: Izgradite svoje proširenje
npm run build

Što ova naredba postiže:

Kompilira vaš izvorni kod u datoteke spremne za preglednik
Spaja JavaScript module u optimizirane pakete
Generira konačne datoteke proširenja u mapi /dist
Priprema vaše proširenje za instalaciju i testiranje

Korak 2: Otiđite na Proširenja preglednika

Otvorite stranicu za upravljanje proširenjima preglednika
Kliknite gumb "Postavke i još" (ikona ...) u gornjem desnom kutu
Odaberite "Proširenja" iz padajućeg izbornika

Korak 3: Učitajte svoje proširenje

Za nove instalacije: Izaberite load unpacked i odaberite vašu /dist mapu
Za ažuriranja: Kliknite reload pored već instaliranog proširenja
Za testiranje: Uključite "Način za developere" za dodatne mogućnosti otklanjanja pogrešaka

Instalacija proširenja za produkciju

✅ Napomena: Ove upute za razvoj posebno su za proširenja koja sami gradite. Za instalaciju objavljenih proširenja posjetite službene trgovine proširenja preglednika poput Microsoft Edge Add-ons store.

Razumijevanje razlika:

Razvojne instalacije omogućuju testiranje neobjavljenih proširenja tijekom razvoja
Trgovačke instalacije nude pregledana, objavljena proširenja s automatskim ažuriranjima
Sideloading omogućuje instalaciju proširenja izvan službenih trgovina (zahtijeva način za developere)

Izrada vašeg proširenja za ugljični otisak

Izradit ćemo proširenje preglednika koje prikazuje ugljični otisak potrošnje energije u vašoj regiji. Ovaj projekt demonstrira osnovne koncepte razvoja proširenja dok stvara koristan alat za okolišnu svijest.

Ovaj pristup slijedi načelo "učenja kroz rad" koje je djelotvorno od vremena John Deweyjevih pedagoških teorija - kombinirajući tehničke vještine s korisnim stvarnim primjenama.

Zahtjevi projekta

Prije početka razvoja skupimo potrebne resurse i ovisnosti:

Potrebni pristup API-ju:

CO2 Signal API ključ: Unesite svoju email adresu kako biste dobili besplatan API ključ
Kod regije: Pronađite kod svoje regije koristeći Electricity Map (na primjer, Boston koristi 'US-NEISO')

Razvojni alati:

Node.js i NPM: Alat za upravljanje paketima za instalaciju ovisnosti projekta
Početni kod: Preuzmite mapu start za početak razvoja

✅ Saznajte više: Poboljšajte svoje vještine upravljanja paketima kroz ovaj detaljni Learn modul

Razumijevanje strukture projekta

Razumijevanje strukture projekta pomaže učinkovito organizirati razvojni rad. Kao što je knjižnica Aleksandrije bila organizirana za lakši pristup znanju, dobro strukturirana baza koda čini razvoj efikasnijim:

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

Što svaka datoteka radi:

manifest.json: Definira metapodatke proširenja, dopuštenja i početne točke
index.html: Kreira korisničko sučelje koje se prikazuje kad korisnici kliknu na proširenje
background.js: Rukuje pozadinskim zadacima i slušateljima događaja preglednika
main.js: Sadrži konačni objedinjeni JavaScript nakon procesa izgradnje
src/index.js: Sadrži vaš glavni razvojni kod koji se kompajlira u main.js

💡 Savjet za organizaciju: Spremite svoj API ključ i kod regije u sigurnu bilješku radi lakšeg pristupa tijekom razvoja. Trebat će vam te vrijednosti za testiranje funkcionalnosti vašeg proširenja.

✅ Sigurnosna napomena: Nikada ne spremite API ključeve ili osjetljive pristupne podatke u svoj repozitorij koda. Pokazat ćemo vam kako ih sigurno rukovati u sljedećim koracima.

Izrada sučelja proširenja

Sada ćemo izgraditi komponente korisničkog sučelja. Proširenje koristi pristup s dva zaslona: zaslon konfiguracije za početno postavljanje i zaslon rezultata za prikaz podataka.

Ovo slijedi princip progresivnog otkrivanja koji se koristi u dizajnu sučelja još od ranih računarskih dana - otkrivajući informacije i opcije logičnim redoslijedom kako se korisnici ne bi preopteretili.

Pregled prikaza proširenja

Zaslon postavljanja - konfiguracija za prvi put korisnika:

Zaslon rezultata - prikaz podataka o ugljičnom otisku:

Izrada obrasca za konfiguraciju

Obrazac za postavljanje prikuplja konfiguracijske podatke korisnika prilikom prvog korištenja. Nakon konfiguracije, ove informacije ostaju spremljene u pregledničku pohranu za buduće sesije.

U datoteci /dist/index.html dodajte ovu strukturu obrasca:

<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>

Što ovaj obrazac omogućuje:

Kreira semantičku strukturu obrasca s odgovarajućim oznakama i povezivanjem unosa
Omogućuje automatsko dovršavanje preglednika za bolje korisničko iskustvo
Zahtijeva ispunjavanje oba polja prije slanja putem atributa required
Organizira ulaze s opisnim imenima klasa radi lakšeg stiliziranja i ciljanog JavaScript pristupa
Pruža jasne upute korisnicima koji prvi put postavljaju proširenje

Izrada prikaza rezultata

Zatim kreirajte područje rezultata koje će prikazivati podatke o ugljičnom otisku. Dodajte ovaj HTML ispod obrasca:

<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>

Što ova struktura pruža:

loading: Prikazuje poruku učitavanja dok se podaci s API-ja dohvaćaju
errors: Prikazuje poruke o pogreškama ako pozivi API-ja zakažu ili su podaci nevažeći
data: Drži sirove podatke radi otklanjanja pogrešaka tijekom razvoja
result-container: Prikazuje oblikovane informacije o ugljičnom otisku korisnicima
clear-btn: Dopusti korisnicima promjenu regije i ponovnu konfiguraciju proširenja

Postavljanje procesa izgradnje

Sada instalirajmo ovisnosti projekta i testirajmo proces izgradnje:

npm install

Što ovaj proces instalacije postiže:

Preuzima Webpack i druge razvojne ovisnosti navedene u package.json
Konfigurira alat za izgradnju za kompilaciju modernog JavaScript koda
Priprema razvojno okruženje za izradu i testiranje proširenja
Omogućuje objedinjavanje, optimizaciju i značajke međupregledničke kompatibilnosti

💡 Uvid u proces izgradnje: Webpack spaja vaš izvorni kod iz /src/index.js u /dist/main.js. Ovaj proces optimizira kod za produkciju i osigurava kompatibilnost s preglednicima.

Testiranje vašeg napretka

U ovom trenutku možete testirati svoje proširenje:

Pokreni naredbu za izgradnju kako bi kompajlirao svoj kod
Učitaj dodatak u svoj preglednik koristeći način za razvojne programere
Provjeri prikazuje li se obrazac ispravno i izgleda profesionalno
Provjeri jesu li svi elementi obrasca ispravno poravnati i funkcionalni

Što si postigao:

Izgradio temeljnu HTML strukturu za svoj dodatak
Kreirao sučelja za konfiguraciju i rezultate s pravilnom semantičkom oznakom
Postavio moderan razvojni tijek koristeći industrijski standardne alate
Pripremio temelj za dodavanje interaktivnih JavaScript funkcionalnosti

🔄 Pedagoška provjera

Napredak u razvoju dodatka: Provjeri svoje razumijevanje prije nastavka:

✅ Možeš li objasniti svrhu svake datoteke u strukturi projekta?
✅ Razumiješ li kako proces izgradnje transformira tvoj izvorni kod?
✅ Zašto odvajamo konfiguraciju i rezultate u različite dijelove sučelja?
✅ Kako struktura obrasca podržava i upotrebljivost i pristupačnost?

Razumijevanje razvojog tijeka: Sada bi trebao moći:

Izmijeniti HTML i CSS za sučelje svog dodatka
Pokrenuti naredbu za izgradnju kako bi kompajlirao svoje izmjene
Ponovno učitati dodatak u pregledniku kako bi testirao ažuriranja
Otkloniti pogreške koristeći alate za razvojne programere u pregledniku

Završio si prvu fazu razvoja dodataka za preglednike. Kao što su braća Wright prvo trebala razumjeti aerodinamiku prije nego što su ostvarili let, razumijevanje ovih temeljnih pojmova priprema te za izgradnju složenijih interaktivnih značajki u sljedećoj lekciji.

Izazov GitHub Copilot Agenta 🚀

Iskoristi Agent način za dovršetak sljedećeg izazova:

Opis: Poboljšaj dodatak za preglednik dodavanjem validacije obrasca i značajki za povratnu informaciju korisniku radi poboljšanja korisničkog iskustva pri unosu API ključeva i kodova regija.

Zadatak: Kreiraj funkcije za validaciju u JavaScriptu koje provjeravaju sadrži li polje API ključa barem 20 znakova i slijedi li kod regije ispravan format (npr. 'US-NEISO'). Dodaj vizualnu povratnu informaciju promjenom boje okvira unosa u zeleno za valjane unose i crveno za nevaljane. Također dodaj značajku preklapanja za prikaz/sakrivanje API ključa radi sigurnosti.

Više o agent modu pročitaj ovdje.

🚀 Izazov

Pogledaj trgovinu dodataka za preglednik i instaliraj jedan u svoj preglednik. Možeš proučiti njegove datoteke na zanimljive načine. Što otkrivaš?

Kviz nakon lekcije

Pregled i samostalno učenje

U ovoj si lekciji naučio malo o povijesti web preglednika; iskoristi priliku da saznaš kako su izumitelji World Wide Weba zamišljali njegovu uporabu čitajući više o njegovoj povijesti. Korisne stranice uključuju:

Povijest web preglednika

Povijest weba

Intervju s Timom Berners-Leejem

⚡ Što možeš napraviti u sljedećih 5 minuta

Otvori stranicu za dodatke Chrome/Edge preglednika (chrome://extensions) i istraži što si instalirao
Pogledaj karticu Mreža u alatima za razvojne programere dok učitavaš web stranicu
Pokušaj pogledati izvor stranice (Ctrl+U) da vidiš HTML strukturu
Istraži bilo koji element web stranice i izmijeni njegov CSS u alatima za razvojne programere

🎯 Što možeš postići u ovom satu

Završiti kviz nakon lekcije i razumjeti osnove preglednika
Kreirati osnovnu datoteku manifest.json za dodatak preglednika
Izgraditi jednostavni dodatak "Hello World" koji prikazuje skočni prozor
Testirati učitavanje dodatka u načinu za razvojne programere
Istražiti dokumentaciju dodataka za ciljanu vrstu preglednika

📅 Tvoj tjedni put razvoja dodatka

Dovršiti funkcionalni dodatak za preglednik s pravom korisnom funkcionalnošću
Naučiti o sadržajnim skriptama, pozadinskim skriptama i interakcijama skočnih prozora
Ovladati API-jima preglednika kao što su spremište, kartice i slanje poruka
Dizajnirati korisnički pristupačna sučelja za svoj dodatak
Testirati dodatak na različitim web stranicama i u različitim scenarijima
Objaviti dodatak u trgovini dodataka za preglednike

🌟 Tvoj mjesečni razvoj pregledničkih dodataka

Izgraditi više dodataka koji rješavaju različite korisničke probleme
Naučiti napredne API-je preglednika i najbolje prakse za sigurnost
Doprinijeti otvorenim izvorima projekata dodataka za preglednike
Ovladati kompatibilnošću među preglednicima i progresivnim poboljšanjem
Kreirati alate i predloške za razvoj dodataka za druge
Postati stručnjak za pregledničke dodatke koji pomaže drugim programerima

🎯 Tvoj vremenski plan za usavršavanje u razvoju dodataka

timeline
    title Napredak u razvoju proširenja za preglednik
    
    section Osnove (15 minuta)
        Razumijevanje preglednika: Osnovna arhitektura
                              : Proces prikaza
                              : Točke integracije proširenja
        
    section Postavljanje (20 minuta)
        Razvojno okruženje: Struktura projekta
                         : Konfiguracija alata za izgradnju
                         : Način rada za programere preglednika
                         : Proces učitavanja proširenja
        
    section Dizajn sučelja (25 minuta)
        Korisničko iskustvo: HTML struktura
                         : CSS stilizacija
                         : Validacija obrazaca
                         : Responsivni dizajn
        
    section Osnovna funkcionalnost (35 minuta)
        Integracija JavaScripta: Obrada događaja
                              : API interakcije
                              : Pohrana podataka
                              : Obrada pogrešaka
        
    section Browser API-ji (45 minuta)
        Integracija platforme: Sustav dozvola
                            : Storage API-ji
                            : Upravljanje karticama
                            : Kontekstni izbornici
        
    section Napredne značajke (1 tjedan)
        Profesionalna proširenja: Skripte u pozadini
                               : Skripte sadržaja
                               : Kompatibilnost između preglednika
                               : Optimizacija performansi
        
    section Objavljivanje (2 tjedna)
        Distribucija: Slanje u trgovinu
                   : Proces recenzije
                   : Povratne informacije korisnika
                   : Upravljanje ažuriranjima
        
    section Razina stručnjaka (1 mjesec)
        Ekosustav proširenja: Napredni API-ji
                           : Najbolje sigurnosne prakse
                           : Značajke u poduzeću
                           : Integracija okvira

🛠️ Sažetak skupa alata za razvoj dodataka

Nakon završetka ove lekcije, sada imaš:

Znanje o arhitekturi preglednika: Razumijevanje renderiranja, sigurnosnih modela i integracije dodataka
Razvojno okruženje: Moderan alatni lanac s Webpackom, NPM-om i mogućnostima debugiranja
Temelj UI/UX-a: Semantička HTML struktura s obrascima progresivnog otkrivanja
Sigurnosnu osviještenost: Razumijevanje dozvola preglednika i sigurnih razvojnih praksi
Koncepte kompatibilnosti među preglednicima: Znanje o razmatranjima kompatibilnosti i pristupima testiranju
Integraciju API-ja: Temelj za rad s vanjskim izvorima podataka
Profesionalni tijek rada: Industrijski standardni postupci razvoja i testiranja

Primjena u stvarnom svijetu: Ove vještine direktno se primjenjuju na:

Web razvoj: Jednostanične aplikacije i progresivne web aplikacije
Desktop aplikacije: Electron i softver temeljen na webu za stolna računala
Mobilni razvoj: Hibridne aplikacije i mobilna web rješenja
Alate za poduzeća: Interni alati za produktivnost i automatizaciju tijeka rada
Open Source: Doprinose projektima dodataka za preglednike i web standardima

Sljedeća razina: Spreman si za dodavanje interaktivnih funkcionalnosti, rad s API-jima preglednika i kreiranje dodataka koji rješavaju stvarne korisničke probleme!

Zadatak

Prilagodi svoj dodatak

Odricanje od odgovornosti: Ovaj je dokument preveden pomoću AI prevodilačke usluge Co-op Translator. Iako nastojimo postići točnost, imajte na umu da automatizirani prijevodi mogu sadržavati pogreške ili netočnosti. Izvorni dokument na izvornom jeziku treba se smatrati službenim i autoritativnim izvorom. Za važne informacije preporučujemo profesionalni prijevod od strane ljudskog prevoditelja. Nismo odgovorni za bilo kakve nesporazume ili pogrešne interpretacije koje proizlaze iz korištenja ovog prijevoda.

README.md Unescape Escape