History

localizeflow[bot] d01b0740e4 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

Böngésző bővítmény projekt 1. rész: Minden a böngészőkről

journey
    title A böngészőbővítmény-fejlesztési utad
    section Alapok
      Understand browsers: 3: Student
      Learn extension types: 4: Student
      Setup development: 4: Student
    section Fejlesztés
      Build interface: 4: Student
      Add functionality: 5: Student
      Handle data: 5: Student
    section Integráció
      Test in browser: 5: Student
      Debug issues: 4: Student
      Polish experience: 5: Student

Vázlatjegyzet készítője: Wassim Chegham

Előadás előtti kvíz

Bevezetés

A böngészőbővítmények mini alkalmazások, amelyek fokozzák a webes böngészési élményt. Ahogy Tim Berners-Lee eredeti interaktív webes víziója is hangsúlyozta, a bővítmények a böngésző képességeit egyszerű dokumentummegjelenítésen túl bővítik. A jelszókezelőktől, amelyek védenek fiókjaidat, a színválasztókig, amelyek segítik a tervezőket tökéletes árnyalatok kiválasztásában, a bővítmények a mindennapi böngészési kihívásokra adnak megoldást.

Mielőtt elkészítenénk az első bővítményedet, ismerjük meg, hogyan működnek a böngészők. Ahogyan Alexander Graham Bellnek is értenie kellett a hangátvitelt a telefon feltalálása előtt, a böngészők alapjainak ismerete segít abban, hogy olyan bővítményeket hozz létre, amelyek zökkenőmentesen integrálódnak a meglévő böngészőrendszerekhez.

A lecke végére megérted a böngészőarchitektúrát, és elkezded megépíteni első bővítményedet.

mindmap
  root((Böngésző felépítése))
    Core Components
      Rendering Engine
      JavaScript Engine
      Network Stack
      Storage APIs
    User Interface
      Cím sáv
      Fülekezelés
      Könyvjelzők
      Bővítmény ikonok
    Extension System
      Manifest fájlok
      Tartalom szkriptek
      Háttéroldalak
      Felugró ablakok
    Security Model
      Ugyanazon eredet politikája
      Jogosultságok API
      Tartalombiztonság
      Izolált világok
    Development Tools
      DevTools integráció
      Hibakereső konzol
      Teljesítményfigyelő
      Bővítmény vizsgáló

A webes böngészők megértése

Egy webes böngésző lényegében egy kifinomult dokumentumértelmező. Amikor beírod, hogy "google.com" a címsorba, a böngésző bonyolult műveletsorozatot hajt végre – a világ minden táján lévő szerverekről tartalmat kér le, majd azt elemzi és megjeleníti az általa látott interaktív weboldalakká.

Ez a folyamat tükrözi azt, ahogyan az első webes böngészőt, a WorldWideWeb-et Tim Berners-Lee 1990-ben megtervezte, hogy a hiperhivatkozott dokumentumok mindenki számára elérhetőek legyenek.

✅ Egy kis történelem: Az első böngészőt 'WorldWideWeb'-nek hívták, és Sir Timothy Berners-Lee készítette 1990-ben.

Néhány korai böngésző, forrás: Karen McGrane

Hogyan dolgozza fel a böngésző a webes tartalmat

A URL beírása és a weboldal megjelenése között több összehangolt lépés zajlik le pár másodperc alatt:

sequenceDiagram
    participant User
    participant Browser
    participant Extension
    participant DNS
    participant Server
    
    User->>Browser: Beírja az URL-t és megnyomja az Entert
    Browser->>Extension: beforeRequest esemény kiváltása
    Extension->>Extension: Ellenőrizze, szükséges-e az URL módosítása
    Browser->>DNS: Kiszámolja a szerver IP-címét
    DNS->>Browser: Visszaadja az IP-címet
    Browser->>Server: Kéri a weboldal tartalmát
    Server->>Browser: HTML, CSS és JavaScript küldése
    Browser->>Extension: beforeResponse esemény kiváltása
    Extension->>Extension: Szöveg módosítása, ha szükséges
    Browser->>User: Megjeleníti a teljes weboldalt
    Extension->>User: Kiterjesztés UI frissítéseinek megjelenítése

Ez a folyamat a következőket hajtja végre:

Lefordítja az ember által olvasható URL-t szerver IP címre DNS lekérdezéssel
Létrehoz biztonságos kapcsolatot a webkiszolgálóval HTTP vagy HTTPS protokollon keresztül
Kéri az adott weboldal tartalmát a szervertől
Fogadja az HTML jelölést, CSS stílusokat és JavaScript kódot a szervertől
Megjeleníti az összes tartalmat az interaktív weboldalon, amit látsz

Böngésző alapvető funkciói

A modern böngészők sok funkciót kínálnak, amelyeket a bővítményfejlesztők kihasználhatnak:

Funkció	Cél	Lehetőségek a bővítmények számára
Megjelenítő motor	HTML, CSS és JavaScript megjelenítése	Tartalom módosítás, stílusinjekció
JavaScript motor	JavaScript kód végrehajtása	Egyedi szkriptek, API interakciók
Helyi tároló	Adatok helyi mentése	Felhasználói beállítások, gyorsítótárazott adatok
Hálózati réteg	Webes lekérések kezelése	Lekérés figyelés, adat elemzés
Biztonsági modell	Felhasználók védelme rosszindulatú tartalom ellen	Tartalomszűrés, biztonsági fejlesztések

E funkciók ismerete segít abban, hogy:

Beazonosítsd, hol adhat hozzá leginkább értéket a bővítményed
Megválaszd a megfelelő böngésző API-kat a bővítmény funkcióihoz
Tervezd azokat a bővítményeket, amelyek hatékonyan működnek a böngésző rendszereivel
Biztosítsd, hogy bővítményed megfeleljen a böngésző biztonsági legjobb gyakorlatainak

Több böngészőt támogató fejlesztési szempontok

A különböző böngészők kissé eltérő módon valósítják meg a szabványokat, hasonlóan ahhoz, ahogy különböző programozási nyelvek is eltérően kezelhetnek egy algoritmust. A Chrome, Firefox és Safari mind egyedi jellemzőkkel bír, amelyeket a fejlesztőknek figyelembe kell venniük bővítményfejlesztés során.

💡 Pro Tipp: Használd a caniuse.com oldalt, hogy ellenőrizd, mely webes technológiák támogatottak a különböző böngészőkben. Ez felbecsülhetetlen segítség a bővítmény funkcióinak tervezésekor!

Fontos szempontok a bővítményfejlesztéshez:

Teszteld bővítményedet Chrome, Firefox és Edge böngészőkön
Alkalmazkodj a különböző böngésző bővítmény API-khoz és manifest formátumokhoz
Kezeld a különböző teljesítményjellemzőket és korlátokat
Biztosíts tartalék megoldásokat azokra a böngészőspecifikus funkciókra, amelyek esetleg nem elérhetőek minden böngészőben

✅ Elemzési betekintés: Megtudhatod, hogy mely böngészőket preferálják a felhasználóid, ha a webfejlesztési projektjeidbe analytics csomagokat telepítesz. Ezek az adatok segítenek, hogy a támogatott böngészőket fontossági sorrendbe állítsd.

A böngészőbővítmények megértése

A böngészőbővítmények megoldják a gyakori webes böngészési problémákat azáltal, hogy funkciókat adnak hozzá közvetlenül a böngésző felületéhez. Nem igényelnek külön alkalmazásokat vagy bonyolult munkafolyamatokat, a bővítmények azonnali hozzáférést biztosítanak eszközökhöz és funkciókhoz.

Ez a koncepció tükrözi azt, ahogyan a korai számítástechnikai úttörők, például Douglas Engelbart elképzelték az emberi képességek technológiával való kiterjesztését – a bővítmények kiterjesztik a böngésződ alapfunkcionalitását.

quadrantChart
    title Böngésző Bővítmény Kategóriák
    x-axis Egyszerű --> Összetett
    y-axis Személyes Használat --> Professzionális Eszközök
    quadrant-1 Fejlesztői Eszközök
    quadrant-2 Vállalati Megoldások
    quadrant-3 Személyes Segédeszközök
    quadrant-4 Termelékenységi Alkalmazások
    
    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]

Népszerű bővítménykategóriák és előnyeik:

Hatékonyságot növelő eszközök: Feladatkezelők, jegyzetelő appok és időmérők, amelyek segítenek szervezettebbnek maradni
Biztonsági fejlesztések: Jelszókezelők, reklámblokkolók és adatvédelmi eszközök, amelyek védik az adataidat
Fejlesztői eszközök: Kódfomázók, színválasztók és hibakereső segédprogramok, amelyek gyorsítják a fejlesztést
Tartalomfejlesztés: Olvasási módok, videóletöltők és képernyőkép eszközök, amelyek javítják a webböngészési élményt

✅ Reflektáló kérdés: Mik a kedvenc böngészőbővítményeid? Milyen konkrét feladatokat látnak el, és hogyan javítják a böngészési élményt?

🔄 Pedagógiai átnézés

Böngésző architektúra megértése: Mielőtt a bővítményfejlesztésre térnénk, győződj meg róla, hogy:

✅ El tudod magyarázni, hogyan dolgozzák fel a böngészők a webes kéréseket és jelenítenek meg tartalmat
✅ Fel tudod sorolni a böngészőarchitektúra fő összetevőit
✅ Érted, hogyan integrálódnak a bővítmények a böngésző funkcióiba
✅ Felismered a felhasználókat védő biztonsági modellt

Gyors önellenőrzés: Ki tudod követni a folyamatot az URL beírásától a weboldal megjelenéséig?

DNS lekérdezés az URL IP-címmé alakításához
HTTP kérés tartalom lekérésére a szervertől
Elemzés HTML, CSS és JavaScript feldolgozásával
Megjelenítés a végső weboldal megmutatása
Bővítmények több ponton módosíthatják a tartalmat

Bővítmények telepítése és kezelése

A bővítmény telepítési folyamatának ismerete segít előre látni a felhasználói élményt, amikor a felhasználók telepítik a bővítményedet. A telepítési folyamat egységes a modern böngészőkben, kisebb felületbeli különbségekkel.

Fontos: Győződj meg róla, hogy bekapcsoltad a fejlesztői módot és engedélyezted a más áruházból származó bővítményeket, amikor saját bővítményeidet teszteled.

Bővítmény fejlesztés és telepítés lépései

Amikor saját bővítményeket fejlesztesz és tesztelsz, kövesd ezt a munkafolyamatot:

flowchart TD
    A[Kód írása] --> B[Bővítmény építése]
    B --> C{Első telepítés?}
    C -->|Igen| D[Csomagolatlan betöltése]
    C -->|Nem| E[Bővítmény újratöltése]
    D --> F[Funkcionalitás tesztelése]
    E --> F
    F --> G{Helyesen működik?}
    G -->|Nem| H[Hibakeresés]
    G -->|Igen| I[Felhasználók számára kész]
    H --> A
    I --> J[Publikálás a boltba]
    
    style A fill:#e1f5fe
    style F fill:#e8f5e8
    style I fill:#f3e5f5
    style J fill:#fff3e0

# 1. lépés: Építse meg a bővítményét
npm run build

Mit hajt végre ez a parancs:

Lefordítja a forráskódot böngésző számára kész fájlokká
Csomagolja a JavaScript modulokat optimalizált csomagokká
Előállítja a végső bővítményfájlokat a /dist mappában
Előkészíti bővítményed telepítésre és tesztelésre

2. lépés: Nyisd meg a böngésző bővítménykezelő oldalát

Nyisd meg a böngésződ bővítménykezelő oldalát
Kattints a jobb felső sarokban a „Beállítások és egyéb” (a ... ikonra)
Válaszd ki a „Bővítmények” menüpontot

3. lépés: Töltsd be a bővítményedet

Új telepítéshez: Válaszd a csomagolatlan betöltése lehetőséget, majd válaszd ki a /dist mappát
Frissítéshez: Kattints a újratöltés gombra a már telepített kiegészítő mellett
Teszteléshez: Kapcsold be a „Fejlesztői mód”-ot, hogy hozzáférj további hibakeresési funkciókhoz

Bővítmény telepítése éles környezetben

✅ Megjegyzés: Ezek a fejlesztői utasítások kizárólag az általad készített bővítményekre vonatkoznak. A közzétett bővítmények telepítéséhez látogass el az olyan hivatalos bővítményáruházakba, mint a Microsoft Edge bővítmény áruház.

A különbségek megértése:

Fejlesztői telepítések lehetővé teszik, hogy a fejlesztés alatt álló, még nem közzétett bővítményeket teszteld
Áruházi telepítések jóváhagyott, publikált bővítményeket biztosítanak automatikus frissítésekkel
Oldalról való telepítés lehetővé teszi bővítmények telepítését az áruházakon kívülről (fejlesztői mód szükséges)

Szénlábnyom bővítmény készítése

Egy böngészőbővítményt készítünk, amely megmutatja az adott régió energiafelhasználásának szénlábnyomát. Ez a projekt alapvető bővítményfejlesztési fogalmakat szemléltet, miközben egy gyakorlati környezeti tudatosságot segítő eszközt hoz létre.

Ez az „elsajátítás a gyakorlatban” elv szerint halad, amely John Dewey neveléselméleti elvei óta bizonyítottan hatékony – a technikai készségek és a valódi életből vett hasznos alkalmazások kombinációját alkalmazza.

Projekt követelmények

A fejlesztés megkezdése előtt gyűjtsük össze a szükséges erőforrásokat és függőségeket:

Szükséges API hozzáférés:

CO2 Signal API kulcs: Add meg az email címed a ingyenes API kulcsért
Régiókód: Keresd meg a régiókódod az Electricity Map segítségével (például Bostonhoz az 'US-NEISO' tartozik)

Fejlesztői eszközök:

Node.js és NPM: Csomagkezelő eszköz a projektfüggőségek telepítéséhez
Kezdőkód: Töltsd le a start mappát a fejlesztés megkezdéséhez

✅ Tanulj többet: Fejleszd csomagkezelési készségeidet ezzel a átfogó Learn modullal

A projekt struktúrájának megértése

A projekt struktúrájának ismerete segít a fejlesztési munka hatékony szervezésében. Ahogy az alexandriai könyvtárat rendezték az egyszerű tudáskeresés érdekében, úgy egy jól strukturált kódbázis is gyorsítja a fejlesztést:

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

Mit tesz lehetővé az egyes fájl:

manifest.json: Meghatározza a bővítmény metaadatait, engedélyeit és belépési pontjait
index.html: Létrehozza a felhasználói felületet, amely akkor jelenik meg, amikor a felhasználó a bővítményre kattint
background.js: Kezeli a háttérfeladatokat és a böngésző eseményfigyelőit
main.js: Tartalmazza az építési folyamat után létrejövő végső JavaScript kódot
src/index.js: Tartalmazza a fő fejlesztői kódot, amelyből a main.js készül

💡 Szervezési tipp: Tárold biztonságos jegyzetben az API kulcsodat és a régiókódodat, hogy könnyen elérhető legyen a fejlesztés során. Ezekre az értékekre szükséged lesz a bővítmény funkcióinak teszteléséhez.

✅ Biztonsági megjegyzés: Soha ne töltsd fel API kulcsaidat vagy érzékeny hitelesítő adatokat a kódtáradba. A következő lépésekben megmutatjuk, hogyan kezeld ezeket biztonságosan.

A bővítmény felületének létrehozása

Most építsük meg a felhasználói felület komponenseit. A bővítmény két képernyős megközelítést használ: egy konfigurációs képernyőt az alapbeállításokhoz és egy eredményképernyőt az adatok megjelenítéséhez.

Ez a fokozatos információfeltárás elve, amit az interfésztervezés már a számítástechnika korai napjaiban is alkalmaztak – az információkat logikus sorrendben mutatja, hogy ne terhelje túl a felhasználókat.

Bővítmény nézetek áttekintése

Beállítási nézet – Első alkalommal használók konfigurációja:

Eredmény nézet – Szénlábnyom adat megjelenítése:

A konfigurációs űrlap építése

Az űrlap begyűjti a felhasználó konfigurációs adatait az első használatkor. A beállítások a böngésző tárolójában megmaradnak a későbbi használatra.

A /dist/index.html fájlban add hozzá ezt az űrlapszerkezetet:

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

Ez az űrlap a következőket teszi lehetővé:

Létrehoz egy szemantikus űrlapszerkezetet megfelelő feliratokkal és bemeneti kapcsolódásokkal
Lehetővé teszi a böngésző automatikus kitöltési funkcióját a jobb felhasználói élményért
Követeli, hogy mindkét mező ki legyen töltve a required attribútum használatával
Rendszerezi a mezőket leíró osztálynevekkel a könnyebb stílusozás és JavaScript célozhatóság érdekében
Egyértelmű utasításokat ad azoknak a felhasználóknak, akik először állítják be a bővítményt

Az eredmények megjelenítése

Ezután hozd létre az eredményt megjelenítő területet, amely megmutatja a szénlábnyom adatokat. Add hozzá ezt az HTML-t az űrlap alá:

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

Ez az elrendezés a következőket biztosítja:

loading: Betöltési üzenetet jelenít meg, amíg érkeznek az API-adatok
errors: Hibajelzéseket mutat, ha az API hívás sikertelen vagy érvénytelen az adat
data: Nyers adatokat tartalmaz a fejlesztéshez és hibakereséshez
result-container: Formázott szénlábnyom információkat mutat a felhasználóknak
clear-btn: Lehetővé teszi a régió megváltoztatását és a bővítmény újbóli konfigurálását

Az építési folyamat beállítása

Telepítsük most a projekt függőségeit és teszteljük az építési folyamatot:

npm install

Ez a telepítési folyamat a következőket végzi:

Letölti a Webpacket és más fejlesztői függőségeket a package.json-ból
Beállítja az építő eszközláncot a modern JavaScript fordítására
Elkészíti a fejlesztői környezetet bővítményépítéshez és teszteléshez
Lehetővé teszi a kód csomagolását, optimalizálását és több böngészős kompatibilitást

💡 Építési folyamat betekintés: A Webpack összecsomagolja a forráskódot a /src/index.js-ből a /dist/main.js fájlba. Ez optimalizálja a kódot a kiadásra és biztosítja a böngészőkompatibilitást.

Elért eredményeid tesztelése

Mostantól tudod tesztelni a bővítményedet:

Futtasd a build parancsot a kódod fordításához
Töltsd be a kiterjesztést a böngésződbe fejlesztői módban
Ellenőrizd, hogy az űrlap helyesen jelenik-e meg és professzionálisnak tűnik-e
Győződj meg róla, hogy az összes űrlapelem megfelelően van igazítva és működik

Amit elértél:

Felépítetted az alapvető HTML struktúrát a kiterjesztésedhez
Létrehoztad a konfigurációs és eredményfelületeket helyes szemantikai jelölésekkel
Beállítottad a modern fejlesztői munkafolyamatot iparági szabvány eszközökkel
Előkészítetted az alapokat az interaktív JavaScript funkciók hozzáadásához

🔄 Didaktikai ellenőrzés

Kiterjesztés fejlesztésének előrehaladása: Ellenőrizd a megértésed, mielőtt továbbmész:

✅ Ki tudod fejteni az egyes fájlok célját a projekt struktúrában?
✅ Érted, hogyan alakítja át a build folyamat a forráskódodat?
✅ Miért választjuk szét a konfigurációt és az eredményeket külön UI szekciókra?
✅ Hogyan támogatja az űrlapszerkezet mind a használhatóságot, mind a hozzáférhetőséget?

Fejlesztési munkafolyamat megértése: Most már képesnek kell lenned a következőkre:

Módosítani az HTML-t és CSS-t a kiterjesztésed felületén
Futtatni a build parancsot a változtatások fordításához
Újratölteni a kiterjesztést a böngésződben a frissítések teszteléséhez
Hibakeresni a problémákat a böngésző fejlesztői eszközeivel

Befejezted a böngészőkiterjesztés fejlesztésének első szakaszát. Ahogy a Wright fivéreknek előbb meg kellett érteniük az aerodinamikát a repülés előtt, úgy ezeknek az alapfogalmaknak a megértése is felkészít arra, hogy a következő leckében összetettebb interaktív funkciókat építs be.

GitHub Copilot Agent kihívás 🚀

Használd az Agent módot a következő feladat megoldásához:

Leírás: Fejleszd tovább a böngészőkiterjesztést azzal, hogy form-validációt és felhasználói visszajelzést adsz hozzá, hogy jobb legyen a felhasználói élmény az API kulcsok és régiókódok bevitele során.

Parancs: Készíts JavaScript ellenőrző függvényeket, amelyek megvizsgálják, hogy az API kulcs mező legalább 20 karakter hosszú-e, és hogy a régiókód megfelelő formátumot követ-e (például 'US-NEISO'). Adj vizuális visszacsatolást úgy, hogy a beviteli mezők szegélyszínét zöldre állítod, ha érvényesek, és pirosra, ha hibásak. Továbbá adj egy váltó funkciót az API kulcs láthatóságának ki- és bekapcsolására biztonsági okokból.

Tudj meg többet az agent mode funkcióról itt.

🚀 Kihívás

Nézz meg egy böngészőkiterjesztés áruházat, és telepíts egyet a böngésződbe. Érdekes módokon megvizsgálhatod a fájljaikat. Mit fedezel fel?

Előadás utáni kvíz

Áttekintés és önálló tanulás

Ebben a leckében egy keveset tanultál a web böngészők történetéről; használd ki ezt az alkalmat, hogy többet megtudj arról, miként képzelték el a World Wide Web feltalálói használatát, és olvass tovább a történetéről. Néhány hasznos oldal:

A böngészők története

A web története

Interjú Tim Berners-Lee-vel

⚡ Amit a következő 5 percben megtehetsz

Nyisd meg a Chrome/Edge bővítmények oldalát (chrome://extensions), és fedezd fel, mit telepítettél
Nézd meg a böngésződ DevTools Hálózat (Network) lapját egy weboldal betöltése közben
Próbáld meg megtekinteni az oldal forrását (Ctrl+U), hogy lásd a HTML szerkezetet
Vizsgálj meg bármilyen weboldal elemet, és módosítsd a CSS-ét a DevTools-ban

🎯 Amit ezen az órán elérhetsz

Töltsd ki az előadás utáni kvízt, és értsd meg a böngésző alapjait
Készíts egy alap manifest.json fájlt egy böngészőkiterjesztéshez
Építs egy egyszerű „Hello World” kiterjesztést, amely felugró ablakot jelenít meg
Teszteld a kiterjesztésed betöltését fejlesztői módban
Fedezd fel a célböngésződ böngészőkiterjesztés dokumentációját

📅 Heti kiterjesztés fejlesztési utad

Készíts funkcionális böngészőkiterjesztést valódi hasznossággal
Tanulj tartalom szkriptekről, háttér szkriptekről és felugró ablak interakciókról
Ismerd meg a böngésző API-kat, mint a tárhely, fülek és üzenetküldés
Tervezd meg a kiterjesztésed felhasználóbarát felületeit
Teszteld a kiterjesztésed különböző weboldalakon és helyzetekben
Tedd közzé a kiterjesztést a böngésző kiterjesztés áruházában

🌟 Havi böngésző fejlesztési céljaid

Építs több kiterjesztést különböző felhasználói problémák megoldására
Tanuld meg az előrehaladott böngésző API-kat és biztonsági legjobb gyakorlatokat
Szerezz tapasztalatot nyílt forráskódú böngészőkiterjesztés projekteken való hozzájárulásban
Mesteri szinten sajátítsd el a cross-browser kompatibilitást és progresszív fejlesztést
Készíts kiterjesztés fejlesztői eszközöket és sablonokat mások számára
Válj böngészőkiterjesztés szakértővé, aki segíti más fejlesztők munkáját

🎯 A böngészőkiterjesztés Mesterré válásának idővonala

timeline
    title Böngészőbővítmény fejlesztési előrehaladás
    
    section Alapok (15 perc)
        Böngésző megértése: Alapvető architektúra
                           : Renderelési folyamat
                           : Bővítmény integrációs pontok
        
    section Beállítás (20 perc)
        Fejlesztői környezet: Projekt struktúra
                             : Build eszközök konfigurációja
                             : Böngésző fejlesztői mód
                             : Bővítmény betöltési folyamat
        
    section Felület tervezés (25 perc)
        Felhasználói élmény: HTML struktúra
                          : CSS stílus
                          : Űrlap ellenőrzés
                          : Reszponzív tervezés
        
    section Alapvető funkciók (35 perc)
        JavaScript integráció: Eseménykezelés
                             : API interakciók
                             : Adattárolás
                             : Hibakezelés
        
    section Böngésző API-k (45 perc)
        Platform integráció: Jogosultság rendszer
                            : Tároló API-k
                            : Fülszerkesztés
                            : Kontextusmenük
        
    section Fejlett funkciók (1 hét)
        Professzionális bővítmények: Háttér szkriptek
                                  : Tartalom szkriptek
                                  : Több böngészős kompatibilitás
                                  : Teljesítményoptimalizálás
        
    section Kiadás (2 hét)
        Terjesztés: Áruházba beküldés
                  : Áttekintési folyamat
                  : Felhasználói visszajelzés
                  : Frissítéskezelés
        
    section Szakértői szint (1 hónap)
        Bővítmény ökoszisztéma: Fejlett API-k
                              : Biztonsági legjobb gyakorlatok
                              : Vállalati funkciók
                              : Keretrendszer integráció

🛠️ Kiterjesztés fejlesztői eszköztárad összefoglalása

A lecke elvégzése után így állsz:

Böngésző architektúra ismeret: Megérted a renderelő motorokat, biztonsági modelleket és kiterjesztés integrációt
Fejlesztői környezet: Modern eszköztár Webpackkal, NPM-bel és hibakeresési lehetőségekkel
UI/UX alapok: Szemantikus HTML struktúra progresszív felfedési mintákkal
Biztonsági tudatosság: Ismered a böngésző engedélyeket és a biztonságos fejlesztési gyakorlatokat
Cross-browser fogalmak: Elmélet a kompatibilitásról és tesztelési megközelítésekről
API integráció: Alapok külső adatforrások használatához
Professzionális munkafolyamat: Iparági szabvány fejlesztési és tesztelési protokollok

Való életbeli alkalmazások: Ezek a képességek közvetlenül alkalmazhatók:

Webfejlesztés: Egylapos alkalmazások és progresszív web appok
Asztali alkalmazások: Electron és web-alapú asztali szoftverek
Mobil fejlesztés: Hibrid appok és web alapú mobil megoldások
Vállalati eszközök: Belső hatékonyság növelő alkalmazások és munkafolyamat automatizálás
Nyílt forráskód: Közreműködés böngészőkiterjesztés projekteken és web szabványokban

Következő szint: Készen állsz az interaktív funkciók hozzáadására, böngésző API-k használatára, és olyan kiterjesztések készítésére, amelyek valódi problémákat oldanak meg!

Feladat

Stílusold át a kiterjesztésedet

Nyilatkozat: Ez a dokumentum az AI fordító szolgáltatás Co-op Translator segítségével készült. Bár pontosságra törekszünk, kérjük, vegye figyelembe, hogy az automatikus fordítások tartalmazhatnak hibákat vagy pontatlanságokat. Az eredeti, anyanyelvi dokumentum tekintendő hiteles forrásnak. Kritikus információk esetén szakmai emberi fordítást javaslunk. Nem vállalunk felelősséget az ebből eredő félreértésekért vagy téves értelmezésekért.

README.md Unescape Escape