1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "00aa85715e1efd4930c17a23e3012e69",
"translation_date": "2026-01-08T09:26:45+00:00",
"source_file": "5-browser-extension/1-about-browsers/README.md",
"language_code": "et"
}
-->
# Brauserilaienduse projekt 1. osa: Kõik brauseritest
```mermaid
journey
title Teie brauserilaienduse arendusreis
section Alused
Mõistke brausereid: 3: Student
Õppige laienduste tüüpe: 4: Student
Arenduse seadistamine: 4: Student
section Arendus
Ehitage liides: 4: Student
Lisage funktsionaalsus: 5: Student
Töötle andmeid: 5: Student
section Integratsioon
Testige brauseris: 5: Student
Veatõrje: 4: Student
Viimistlege kogemust: 5: Student
```
> Sketchnote autorilt [Wassim Chegham](https://dev.to/wassimchegham/ever-wondered-what-happens-when-you-type-in-a-url-in-an-address-bar-in-a-browser-3dob)
## Esimene viktoriin enne loengut
[Esimene viktoriin enne loengut](https://ff-quizzes.netlify.app/web/quiz/23)
### Sissejuhatus
Brauserilaiendused on mini-rakendused, mis parandavad sinu veebibrausimise kogemust. Nagu Tim Berners-Lee originaalne visioon interaktiivsest veebist, laiendavad laiendused brauseri võimekust lihtsast dokumentide vaatamisest kaugemale. Alates paroolihalduritest, mis hoiavad sinu kontod turvaliselt, kuni värvipüüdjateni, mis aitavad disaineritel leida täiuslikke toone – laiendused lahendavad igapäevaseid sirvimisväljakutseid.
Enne kui ehitame sinu esimest laiendust, saame aru, kuidas brauserid töötavad. Nii nagu Alexander Graham Bell pidi enne telefoni leiutamist mõistma heli edastamist, aitab brauserite põhitõdede teadmine sul luua laiendusi, mis integreeruvad sujuvalt olemasolevate brauserisüsteemidega.
Selle õppetunni lõpuks mõistad brauseri arhitektuuri ja oled hakanud ehitama oma esimest laiendust.
```mermaid
mindmap
root((Brauseri Arhitektuur))
Core Components
Rendering Engine
JavaScript Engine
Network Stack
Storage APIs
User Interface
Aadressiriba
Vahelehe Haldus
Järjehoidjad
Laienduse Ikoonid
Extension System
Manifestifailid
Sisutekstid
Taustalehed
Hüpikaknad
Security Model
Sama Algallika Poliitika
Loaduste API
Siseturve
Isoleeritud Maailmad
Development Tools
Arendustööriistade Integratsioon
Silumise Käsurida
Jõudlusmonitor
Laienduse Kontrollija
```
## Veebibrauserite mõistmine
Veebibrauser on sisuliselt keerukas dokumendi tõlgendaja. Kui sisestad aadressiribale "google.com", teostab brauser keeruka toimingute jada – taotleb sisu serveritest üle kogu maailma, seejärel analüüsib ja kuvab selle koodi interaktiivsete veebilehtedena, mida näed.
See protsess peegeldab, kuidas esimene veebibrauser, WorldWideWeb, kavandas Tim Berners-Lee 1990. aastal, et teha hüperlinkidega dokumendid kõigile kättesaadavaks.
✅ **Veidi ajalugu**: Esimene brauser kandis nime 'WorldWideWeb' ja selle lõi Sir Timothy Berners-Lee 1990. aastal.
> Mõned varased brauserid, allikas [Karen McGrane](https://www.slideshare.net/KMcGrane/week-4-ixd-history-personal-computing)
### Kuidas brauserid veebisisu töötlevad
Protsess URL-i sisestamise ja veebilehe nägemise vahel hõlmab mitut koordineeritud sammu, mis toimuvad sekundite jooksul:
```mermaid
sequenceDiagram
participant User
participant Browser
participant Extension
participant DNS
participant Server
User->>Browser: Tippib URL-i ja vajutab Enter
Browser->>Extension: Käivitab beforeRequest sündmuse
Extension->>Extension: Kontrollib, kas URL-i tuleb muuta
Browser->>DNS: Otsib serveri IP-aadressi
DNS->>Browser: Tagastab IP-aadressi
Browser->>Server: Taotleb veebilehe sisu
Server->>Browser: Saadab HTML-i, CSS-i ja JavaScripti
Browser->>Extension: Käivitab beforeResponse sündmuse
Extension->>Extension: Muudab sisu, kui vaja
Browser->>User: Kuvab täieliku veebilehe
Extension->>User: Kuvab laienduse kasutajaliidese uuendused
```
**Seda protsessi tehakse:**
- **Tõlgib** masinloetava URL-i serveri IP-aadressiks DNS-päringu abil
- **Loodab** turvalise ühenduse veebiserveriga HTTP või HTTPS protokollide kaudu
- **Taotleb** serverilt konkreetset veebilehe sisu
- **Vastuvõtt** HTML märgistust, CSS stiile ja JavaScripti koodi serverist
- **Renderdab** kogu sisu interaktiivseks veebileheks, mida näed
### Brauseri põhiomadused
Kaasaegsed brauserid pakuvad mitmeid funktsioone, mida laienduste arendajad võivad kasutada:
| Funktsioon | Eesmärk | Laienduste võimalused |
|---------|---------|------------------------|
| **Renderdamismootor** | Kuvab HTML-i, CSS-i ja JavaScripti | Sisu modifitseerimine, stiilide süstimine |
| **JavaScripti mootor** | Käivitab JavaScripti koodi | Kohandatud skriptid, API suhtlus |
| **Kohalik salvestus** | Salvestab andmeid kohalikult | Kasutaja eelistused, vahemälu andmed |
| **Võrgu virn** | Haldab veebipäringuid | Päringute jälgimine, andmete analüüs |
| **Turvemudel** | Kaitseb kasutajaid pahatahtliku sisu eest | Sisu filtreerimine, turvalisuse täiustused |
**Neid omadusi mõistes saad:**
- **Tuvastada**, kus su laiendus saab kõige rohkem väärtust lisada
- **Valida** oma laienduse funktsionaalsuse jaoks sobivad brauseri API-d
- **Disainida** laiendusi, mis töötavad efektiivselt brauserisüsteemidega koos
- **Tagada**, et su laiendus järgib brauseri turvalisuse parimaid tavasid
### Mitme brauseri arendamise kaalutlused
Erinevad brauserid rakendavad standardeid väikeste erinevustega, sarnaselt sellele, kuidas erinevad programmeerimiskeeled võivad sama algoritmi erinevalt käidelda. Chrome, Firefox ja Safari omavad igaüks unikaalseid omadusi, mida arendajad laienduse loomisel peavad arvesse võtma.
> 💡 **Professionaalne näpunäide**: Kasuta [caniuse.com](https://www.caniuse.com), et kontrollida, milliseid veebitehnoloogiaid erinevad brauserid toetavad. See on hindamatu, kui planeerid oma laienduse funktsioone!
**Olulised kaalutlused laienduse arendamisel:**
- **Testi** oma laiendust Chrome, Firefox ja Edge brauseridel
- **Kohanda** end erinevate brauserilaienduse API-de ja manifestifailide formaadiga
- **Halda** erinevaid jõudlusomadusi ja piiranguid
- **Paku** varuvaateid brauseripõhistele funktsioonidele, mis võivad mitte toetatud olla
✅ **Analüütika näpunäide**: Saad määratleda, milliseid brausereid sinu kasutajad eelistavad, paigaldades analüütika pakette oma veebiarendusprojektidesse. See info aitab sul toetada esmalt just neid brausereid.
## Brauserilaienduste mõistmine
Brauserilaiendused lahendavad tavalisi veebisirvimise väljakutseid, lisades funktsionaalsust otse brauseri liidesesse. Selle asemel, et nõuda eraldi rakendusi või keerukaid töövooge, pakuvad laiendused kohe juurdepääsu tööriistadele ja funktsioonidele.
See kontseptsioon peegeldab, kuidas varajased arvutipioneerid nagu Douglas Engelbart nägid inimvõimekuste suurendamist tehnoloogiaga – laiendused suurendavad sinu brauseri põhifunktsionaalsust.
```mermaid
quadrantChart
title Brauseri laienduste kategooriad
x-axis Lihtne --> Keeruline
y-axis Isiklik kasutus --> Professionaalsed tööriistad
quadrant-1 Arendaja tööriistad
quadrant-2 Ettevõtte lahendused
quadrant-3 Isiklikud abivahendid
quadrant-4 Tootlikkuse rakendused
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]
```
**Populaarsed laienduse kategooriad ja nende eelised:**
- **Produktiivsustööriistad**: Ülesannete haldurid, märkmete tegemise rakendused ja ajaluguri jälgijad, mis aitavad sul organiseeritud püsida
- **Turbetäiustused**: Paroolihaldurid, reklaamiblokaatorid ja privaatsustööriistad, mis kaitsevad sinu andmeid
- **Arendajatööriistad**: Koodi formaadijad, värvi valijad ja silumisabilised, mis lihtsustavad arendustööd
- **Sisu täiustamine**: Lugemisrežiimid, videotõmbajad ja ekraanipiltide tööriistad, mis parandavad sinu veebikogemust
✅ **Mõtisklusküsimus**: Millised on sinu lemmik brauserilaiendid? Milliseid spetsiifilisi ülesandeid nad täidavad ja kuidas nad parandavad sinu sirvimiskogemust?
### 🔄 **Pedagoogiline kontroll**
**Brauseri arhitektuuri mõistmine**: Enne laienduse arendamise juurde liikumist veendu, et suudad:
- ✅ Selgitada, kuidas brauserid töötlevad veebipäringuid ja kuvavad sisu
- ✅ Tuvastada brauseri arhitektuuri peamised komponendid
- ✅ Mõista, kuidas laiendused integreeruvad brauseri funktsionaalsusega
- ✅ Tuvastada turvemudel, mis kasutajaid kaitseb
**Kiire enesetest**: Kas suudad jälgida teekonda URL-i sisestamisest veebileheni?
1. **DNS-päring** konverteerib URL-i IP-aadressiks
2. **HTTP-päring** hangib sisu serverist
3. **Analüüs** töötleb HTML-i, CSS-i ja JavaScripti
4. **Renderdamine** kuvab lõpliku veebilehe
5. **Laiendused** võivad sisu modifitseerida mitmes etapis
## Laienduste paigaldamine ja haldamine
Laienduste paigaldamise protsessi mõistmine aitab sul ette näha kasutajakogemust, kui inimesed paigaldavad sinu laienduse. Paigaldamine on standardiseeritud kaasaegsetes brauserid, väikeste erinevustega liidese kujunduses.
> **Oluline**: Veendu, et lülitad sisse arendajarežiimi ja lubad laiendusi teistest poodidest, kui testid oma laiendusi.
### Arenduse laienduse paigaldamise protsess
Kui arendad ja testid oma laiendusi, järgi seda töövoogu:
```mermaid
flowchart TD
A[Kirjuta Kood] --> B[Rajaa Laiendus]
B --> C{Esimene Paigaldus?}
C -->|Jah| D[Laadi Lahtipakendatud]
C -->|Ei| E[Laaadi Laiendus Uuesti]
D --> F[Testi Funktsionaalsust]
E --> F
F --> G{Kas Töötab Korrektselt?}
G -->|Ei| H[Paranda Tõrkeid]
G -->|Jah| I[Valmis Kasutajatele]
H --> A
I --> J[Ava Poeuks]
style A fill:#e1f5fe
style F fill:#e8f5e8
style I fill:#f3e5f5
style J fill:#fff3e0
```
```bash
# 1. samm: Ehita oma laiendus
npm run build
```
**Seda käsklust teostatakse:**
- **Kompileerib** sinu lähtekoodi brauseri jaoks valmis failideks
- **Pakendib** JavaScripti moodulid optimeeritud pakkideks
- **Loob** lõpliku laienduse failid kausta `/dist`
- **Valmistab** su laienduse paigaldamiseks ja testimiseks ette
**Samm 2: Navigeeri brauserilaienduste haldamise lehele**
1. **Ava** oma brauseri laienduste haldamise leht
2. **Kliki** “Seaded ja muu” nupule (ikoon `...`) üleval paremal
3. **Vali** rippmenüüst "Laiendused"
**Samm 3: Laadi oma laiendus**
- **Uue paigaldusena**: vali `load unpacked` ja vali oma `/dist` kaust
- **Uuendusteks**: kliki `reload` juba paigaldatud laienduse kõrval
- **Testimiseks**: lülita sisse "Arendajarežiim", et pääseda juurde täiendavatele silumisfunktsioonidele
### Tootmise laienduse paigaldamine
> ✅ **Märkus**: Need arendusjuhised kehtivad eelkõige oma ehitatud laiendustele. Avaldatud laienduste paigaldamiseks külasta ametlikke brauserilaienduste poode, näiteks [Microsoft Edge'i lisandmoodulite poodi](https://microsoftedge.microsoft.com/addons/Microsoft-Edge-Extensions-Home).
**Arusaam erinevusest:**
- **Arenduspaigaldused** võimaldavad testida avaldamata laiendusi arenduse käigus
- **Poepäevad** pakuvad kontrollitud ja avaldatud laiendusi automaatsete uuendustega
- **Sideloading** lubab paigaldada laiendusi väljaspool ametlikke poode (nõuab arendajarežiimi)
## Sinu süsinikujalajälje laienduse loomine
Loome brauserilaienduse, mis kuvab sinu regiooni energiakasutuse süsinikujalajälje. See projekt demonstreerib olulisi laienduse arenduse kontseptsioone, luues praktilise vahendi keskkonnateadlikkuse tõstmiseks.
See lähenemine järgib "tegemise kaudu õppimise" põhimõtet, mis on tõestanud oma efektiivsust alates John Dewey haridusteooriatest – kombineerides tehnilisi oskusi mõtestatud maailmas kasutamiseks.
### Projekti nõuded
Enne arendust alustamist kogume vajalikud ressursid ja sõltuvused:
**Nõutav API ligipääs:**
- **[CO2 Signal API võti](https://www.co2signal.com/)**: Sisesta oma e-posti aadress, et saada tasuta API võti
- **[Regionaalne kood](http://api.electricitymap.org/v3/zones)**: Leia oma regioonikood [Electricity Mapi](https://www.electricitymap.org/map) abil (näiteks Boston kasutab 'US-NEISO')
**Arendustööriistad:**
- **[Node.js ja NPM](https://www.npmjs.com)**: Pakendihaldus tööriist projekti sõltuvuste paigaldamiseks
- **[Stardikood](../../../../5-browser-extension/start)**: Lae alla kaust `start` arenduse alustamiseks
✅ **Õpi veel**: Paranda oma pakendihalduse oskusi selle [laiendatud õpimooduliga](https://docs.microsoft.com/learn/modules/create-nodejs-project-dependencies/?WT.mc_id=academic-77807-sagibbon)
### Projekti struktuuri mõistmine
Projekti struktuuri mõistmine aitab korraldada arendustööd tõhusalt. Nii nagu Aleksandria raamatukogu oli organiseeritud lihtsaks teadmiste leidmiseks, teeb hästi struktureeritud koodibaas arenduse tõhusamaks:
```
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
```
**Mis iga fail teeb:**
- **`manifest.json`**: **Määratleb** laienduse metaandmed, õigused ja sisenemispunktid
- **`index.html`**: **Loomise** kasutajaliides, mis kuvatakse, kui kasutajad klikivad laiendusel
- **`background.js`**: **Haldab** taustatööid ja brauseri sündmuste kuulajaid
- **`main.js`**: **Sisaldab** lõplikku kokku pakitud JavaScripti pärast build protsessi
- **`src/index.js`**: **Majutab** sinu peamist arenduskoodi, mis kompileeritakse `main.js`-ks
> 💡 **Organiseerimise näpunäide**: Hoia oma API võti ja regioonikood turvalises märkmikus, et neid oleks arendamise ajal lihtne leida. Vajad neid väärtusi, et testida laienduse funktsionaalsust.
✅ **Turvanõuanne**: Ära kunagi pane API võtmeid või tundlikke mandaate oma koodirepositoriumi. Järgmisena näitame, kuidas neid turvaliselt käsitleda.
## Laiendi liidese loomine
Nüüd ehitame kasutajaliidese komponente. Laiendus kasutab kahte ekraani: seadistamise ekraani esialgseks häälestuseks ja tulemuste ekraani andmete kuvamiseks.
See järgib progressiivse avaldamise põhimõtet, mida kasutatakse liidese disainis alates arvutite varajasest ajast – info ja valikute loogiline esitlemine, et mitte kasutajat üle koormata.
### Laiendi ülevaated
**Seadistamise vaade** – kasutaja esimese sõidu konfigureerimine:
**Tulemuste vaade** – süsiniku jalajälje andmete kuvamine:
### Seadistusvormi ehitamine
Seadistusvorm kogub kasutaja seadistusandmeid esmasel kasutamisel. Kui see on seadistatud, säilib info brauseri salvestuses edaspidisteks sessioonideks.
Failis `/dist/index.html` lisa see vormi struktuur:
```html
<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>
```
**Seda vormi tehakse:**
- **Loomine** semantilise vormi struktuur koos korrektselt seotud sildiste ja sisenditega
- **Lubamine** brauseri automaatse täitmise funktsioonile paremaks kasutajakogemuseks
- **Nõutakse** mõlema välja täitmist enne vormi esitamist, kasutades atribuuti `required`
- **Korraldamine** sisendid kirjeldavate klassinimedega stiilimiseks ja JavaScripti valimiseks
- **Juhiste pakkumine** kasutajatele, kes täidavad laienduse esimest korda
### Tulemuste kuvamise loomine
Järgmine, loo tulemuste ala, mis kuvab süsiniku jalajälje andmeid. Lisa see HTML vormi alla:
```html
<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>
```
**See struktuur teeb võimalikult:**
- **`loading`**: kuvab laadimise sõnumi, kuni API päring on töös
- **`errors`**: näitab veateateid, kui API kõned ebaõnnestuvad või andmed on vigased
- **`data`**: hoiab tooraineandmeid silumiseks arenduse ajal
- **`result-container`**: esitab kasutajatele vormindatud süsiniku jalajälje info
- **`clear-btn`**: võimaldab kasutajatel regiooni muuta ja laiendust uuesti seadistada
### Build protsessi seadistamine
Nüüd paigaldame projekti sõltuvused ja testime build protsessi:
```bash
npm install
```
**Seda paigaldusprotsessi tehakse:**
- **Laeb alla** Webpacki ja muud arendussõltuvused, mis on määratud `package.json`-is
- **Seadistab** build tööriistakomplekti kaasaegse JavaScripti kompileerimiseks
- **Valmistab** arenduskeskkonna ette laienduse ehitamiseks ja testimiseks
- **Lubab** koodi pakendamise, optimeerimise ja mitme brauseriga ühilduvuse omadused
> 💡 **Build protsessi mõistmine**: Webpack pakendab sinu lähtekoodi failist `/src/index.js` faili `/dist/main.js`. See protsess optimeerib koodi tootmiseks ja tagab brauseri ühilduvuse.
### Oma edenemise testimine
Nüüd saad oma laiendust testida:
1. **Käivita** build-käsk, et kompileerida oma kood
2. **Laadi** laiendus brauserisse arendajarežiimi abil
3. **Kontrolli**, et vorm kuvatakse õigesti ja näeb professionaalne välja
4. **Veendu**, et kõik vormielemendid on korralikult joondatud ja funktsionaalsed
**Mida oled saavutanud:**
- **Ehitanud** laienduse aluseks oleva HTML struktuuri
- **Loonud** nii konfiguratsiooni- kui ka tulemuste liidesed õige semantilise märgistusega
- **Määranud** kaasaegse arendusvoo tööstusharu standardseid vahendeid kasutades
- **Valmistanud** aluse interaktiivse JavaScript funktsionaalsuse lisamiseks
### 🔄 **Pedagoogiline kontroll**
**Laienduse arendamise edenemine**: Kinnita oma arusaam enne jätkamist:
- ✅ Kas suudad selgitada iga projekti struktuuri faili eesmärki?
- ✅ Kas mõistad, kuidas build-protsess teisendab sinu lähtekoodi?
- ✅ Miks me eraldame konfiguratsiooni ja tulemused erinevatesse kliendiliidese osadesse?
- ✅ Kuidas vormi struktuur toetab nii kasutatavust kui ligipääsetavust?
**Arendusvoo mõistmine**: Nüüd peaksid suutma:
1. **Muuta** HTMLi ja CSSi oma laienduse liidese jaoks
2. **Käivita** build-käsk, et koostada muudatused
3. **Laadi** laiendus uuesti brauseris, et testida uuendusi
4. **Siluda** probleeme brauseri arendajatööriistade abil
Oled lõpetanud esimese etapi brauserilaienduse arendamises. Nagu Wrighti vennad pidid muuseas mõistma aerodünaamikat enne lendu, valmistab nende aluseks olevate kontseptsioonide tundmine sind ette keerukamate interaktiivsete funktsioonide loomisele järgmises õppetükis.
## GitHub Copiloti agendi väljakutse 🚀
Kasuta agendi režiimi, et lahendada järgmine väljakutse:
**Kirjeldus:** Täienda brauserilaiendust, lisades vormi valideerimise ja kasutajatagasiside funktsioonid, et parandada kasutajakogemust API võtmete ja piirkonnakoodide sisestamisel.
**Prompt:** Loo JavaScripti valideerimisfunktsioonid, mis kontrollivad, kas API võtmepaik sisaldab vähemalt 20 märki ning kas piirkonnakood vastab õigele vormingule (nt „US-NEISO“). Lisa visuaalne tagasiside, muutes sisendi servavärvi roheliseks kehtiva sisendi puhul ja punaseks kehtetu puhul. Lisa ka lüliti funktsioon API võtme näitamiseks/peitmiseks turvalisuse tagamiseks.
Õpi rohkem [agendi režiimi](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) kohta siit.
## 🚀 Väljakutse
Vaata ringi mõnes brauserilaienduste poest ja installeeri üks oma brauserisse. Sa saad selle faile huvitavalt uurida. Mida avastad?
## Loengu järgne test
[Loengu järgne test](https://ff-quizzes.netlify.app/web/quiz/24)
## Ülevaade ja iseseisev õppimine
Selles õppetükis õppisid veidi veebibrauseri ajaloost; kasuta võimalust ja loe rohkem selle ajaloost ning kuidas Maailma Terviku Veebi looja selle kasutust ette kujutas. Mõned kasulikud leheküljed on:
[Veebibrauserite ajalugu](https://www.mozilla.org/firefox/browsers/browser-history/)
[Veebi ajalugu](https://webfoundation.org/about/vision/history-of-the-web/)
[Intervjuu Tim Berners-Leega](https://www.theguardian.com/technology/2019/mar/12/tim-berners-lee-on-30-years-of-the-web-if-we-dream-a-little-we-can-get-the-web-we-want)
### ⚡ **Mida saad järgmise 5 minutiga teha**
- [ ] Ava Chrome/Edge laienduste leht (chrome://extensions) ja vaata, mis sul paigaldatud on
- [ ] Vaata oma brauseri DevToolsi Network vahekaarti veebilehe laadimisel
- [ ] Proovi veebilehe allikat vaadata (Ctrl+U), et näha HTML struktuuri
- [ ] Inspekteeri suvalist veebilehe elementi ja muuda selle CSSi DevToolsis
### 🎯 **Mida saad selle tunni jooksul saavutada**
- [ ] Täida loengu järgne test ja mõista brauserite põhialuseid
- [ ] Loo lihtne manifest.json fail brauserilaienduse jaoks
- [ ] Ehita lihtne „Hello World“ laiendus, mis kuvab hüpikakna
- [ ] Testi laienduse laadimist arendajarežiimis
- [ ] Uuri sihtbrauseri laienduste dokumentatsiooni
### 📅 **Sinu nädala pikkune laienduste arendusretk**
- [ ] Loo funktsionaalne brauserilaiendus, millel on kasulik otstarve
- [ ] Õpi sisu skripte, taustaskripte ja hüpikakende interaktsioone
- [ ] Saavuta meisterlikkus brauseri APIde nagu storage, tabs ja messaging kasutamises
- [ ] Kujunda kasutajasõbralikud liidesed oma laiendusele
- [ ] Testi laiendust erinevatel veebisaitidel ja olukordades
- [ ] Avalda oma laiendus brauseri laienduste poes
### 🌟 **Sinu kuu pikkune brauseriarenduse teekond**
- [ ] Ehita mitmeid laiendusi, mis lahendavad erinevaid kasutajaprobleeme
- [ ] Õpi edasijõudnud brauseri APIsid ja turvalise arenduse parimaid praktikaid
- [ ] Panusta avatud lähtekoodiga brauserilaienduste projektidesse
- [ ] Saavuta meisterlikkus ristbrauseri ühilduvuses ja progressiivses täiendamises
- [ ] Loo laienduste arendamise tööriistu ja malle teistele
- [ ] Saa brauserilaienduste ekspert, kes aitab teisi arendajaid
## 🎯 Sinu brauserilaienduse meistriklassi ajajoon
```mermaid
timeline
title Brauserilaienduse arenduse edenemine
section Alus (15 minutit)
Brauseri mõistmine: Põhiarhitektuur
: Renderdusprotsess
: Laienduse integreerimise punktid
section Seadistamine (20 minutit)
Arenduskeskkond: Projekti struktuur
: Tööriistade konfiguratsioon
: Brauseri arendajarežiim
: Laienduse laadimise protsess
section Liidese disain (25 minutit)
Kasutajakogemus: HTML struktuur
: CSS stiilimine
: Vormide valideerimine
: Reageeriv disain
section Põhifunktsioonid (35 minutit)
JavaScripti integratsioon: Sündmuste käitlemine
: API suhtlused
: Andmete salvestamine
: Vigade käsitlemine
section Brauseri API-d (45 minutit)
Platvormi integratsioon: Loadude süsteem
: Salvestuse API-d
: Vahelehtede haldamine
: Kontekstimenüüd
section Täiustatud funktsioonid (1 nädal)
Professionaalsed laiendused: Taustaskriptid
: Sisuskirjed
: Ristbrauseri ühilduvus
: Jõudluse optimeerimine
section Avaldamine (2 nädalat)
Levitate: Poe esitus
: Ülevaatamisprotsess
: Kasutajate tagasiside
: Uuenduste haldamine
section Eksperdistasand (1 kuu)
Laienduste ökosüsteem: Täiustatud API-d
: Turvalisuse parimad tavad
: Ettevõtte funktsioonid
: Raamistiku integratsioon
```
### 🛠️ Sinu laienduse arendustööriistade kokkuvõte
Pärast selle õppetüki lõpetamist oled omandanud:
- **Brauseri arhitektuuri teadmised**: arusaam renderdusmootoritest, turvemudelitest ja laienduste integreerimisest
- **Arenduskeskkond**: kaasaegne tööriistade komplekt Webpackiga, NPM ja silumiste võimalustega
- **UI/UX alused**: semantiline HTML struktuur progressiivsed paljastamise mustrid
- **Turvateadlikkus**: arusaam brauseri õigustest ja turvalisest arendamisest
- **Ristbrauseri kontseptsioonid**: teadmised ühilduvusnõuetest ja testimisviisidest
- **API integreerimine**: alus väliste andmeallikatega töötamiseks
- **Professionaalne arendusvoog**: tööstusharu standardite järgi arendamine ja testimine
**Reaalsetes ülesannetes** rakendatavad oskused:
- **Veebiarendus**: ühelt lehelt rakendused ja progressiivsed veebirakendused
- **Lauaarvutirakendused**: Electron ja veebipõhised lauaarvuti tarkvaralahendused
- **Mobiiliarendus**: hübriidrakendused ja veebipõhised mobiililahendused
- **Ettevõtte tööriistad**: sisemised tootlikkuse rakendused ja töövoo automatiseerimine
- **Avatud lähtekood**: panustamine brauserilaienduste projektidesse ja veebistandarditesse
**Järgmine tasand**: oled valmis lisama interaktiivset funktsionaalsust, töötama brauseri APIdega ja looma laiendusi, mis lahendavad reaalseid kasutajaprobleeme!
## Kodutöö
[Muuda oma laienduse stiili](assignment.md)
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Vastutusest loobumine**:
See dokument on tõlgitud kasutades AI tõlketeenust [Co-op Translator](https://github.com/Azure/co-op-translator). Kuigi püüame tagada täpsust, palun arvestage, et automatiseeritud tõlked võivad sisaldada vigu või ebatäpsusi. Algne dokument selle emakeeles tuleks pidada autoriteetseks allikaks. Kriitilise teabe puhul soovitatakse kasutada professionaalset inimtõlget. Me ei vastuta selle tõlke kasutamisest tingitud arusaamatuste või valesti tõlgendamise eest.
<!-- CO-OP TRANSLATOR DISCLAIMER END -->