![Spletna razširitev za Chrome - predhodne izkušnje s kodiranjem niso potrebne: 6 korakov Spletna razširitev za Chrome - predhodne izkušnje s kodiranjem niso potrebne: 6 korakov](https://i.howwhatproduce.com/images/002/image-5763-j.webp)
Kazalo:
- Zaloge
- Korak: Ustvarite imenik
- 2. korak: Ustvarite datoteko manifesta in jo kodirajte
- 3. korak: Ustvarite ikone in posodobite manifest
- 4. korak: Dodajte pojavno okno
- Pozdravljen, svet
- 5. korak: Naj bo videti dobro in interaktivno
- Pozdravljen, svet
- Pozdravljen, svet
- 6. korak: objavo v spletni trgovini Chrome
2025 Avtor: John Day | [email protected]. Nazadnje spremenjeno: 2025-01-23 15:08
![Spletna razširitev za Chrome - predhodne izkušnje s kodiranjem niso potrebne Spletna razširitev za Chrome - predhodne izkušnje s kodiranjem niso potrebne](https://i.howwhatproduce.com/images/002/image-5763-1-j.webp)
Razširitve za Chrome so majhni programi, izdelani za izboljšanje izkušnje brskanja uporabnikov. Za več informacij o razširitvah chrome obiščite
Za izdelavo spletne razširitve za Chrome je potrebno kodiranje, zato je zelo koristno pregledati HTML, JavaScript in CSS na spodnjem spletnem mestu:
www.w3schools.com/default.asp (šole w3 so dobro spletno mesto za kodiranje virov)
Ne veste, kako kodirati? Ne skrbite, ta vadnica vam bo pomagala pri vodenju poti.
Najboljša stvar pri razširitvah za Chrome je, da jih je mogoče prilagoditi. Ne morete narediti le ene posebne stvari, zato bodite ustvarjalni.
Zaloge
Spodaj so potrebne zaloge:
- Računalnik z urejevalnikom besedil (uporabljam Beležnico)
- Google Chrome
In to je vse!
Korak: Ustvarite imenik
![Ustvarite imenik Ustvarite imenik](https://i.howwhatproduce.com/images/002/image-5763-2-j.webp)
Najprej ustvarite mapo, v kateri bodo vse datoteke, in jo poimenujte »razširitev«. Po želji se lahko ime kasneje spremeni.
2. korak: Ustvarite datoteko manifesta in jo kodirajte
![Ustvarite datoteko manifesta in jo kodirajte Ustvarite datoteko manifesta in jo kodirajte](https://i.howwhatproduce.com/images/002/image-5763-3-j.webp)
![Ustvarite datoteko manifesta in jo kodirajte Ustvarite datoteko manifesta in jo kodirajte](https://i.howwhatproduce.com/images/002/image-5763-4-j.webp)
Manifestna datoteka je zelo pomemben del razširitve. Razširitvi natančno pove, kaj naj stori in kaj mora biti. Datoteke manifesta so oblikovane v JSON. Prvi korak je, da odprete urejevalnik besedil in shranite novo datoteko kot 'manifest.json'.
Nato vnesite spodnji skript:
{
"name": "First Extension", "version": "1.0", "description": "Lahko kodiram razširitev", "manifest_version": 2, "browser_action": {"default_title": "Prva razširitev"}}
Zapomnite si vejice za vrednostmi!
Ko to vnesete, shranite datoteko manifesta in pojdite na chrome: // extensions (Chrome je za to treba uporabiti kot brskalnik). Ko ste na chrome: // extension, vklopite način razvijalca. Nato pritisnite gumb »Naloži razpakirano« in izberite mapo »razširitev«.
boben boben prosim …
Juhu! To je podaljšek, razen … nekako dolgočasen. Trenutno ne dela dobesedno ničesar, kmalu pa bo super.
3. korak: Ustvarite ikone in posodobite manifest
![Ustvarite ikone in posodobite manifest Ustvarite ikone in posodobite manifest](https://i.howwhatproduce.com/images/002/image-5763-5-j.webp)
Eno spletno mesto, ki dobro deluje za risanje ikon, je https://www.piskelapp.com/. Na voljo so tudi drugi programi za risanje. Ikone naj bodo kvadratne. Ta projekt bo uporabljal ikone 16x16, 32x32, 48x48 in 128x128. Ko je ikona narejena, v mapo z razširitvami naredite mapo z imenom 'images' in ikono postavite v to mapo. Morda bi bilo dobro sliko poimenovati glede na njeno velikost. Na primer 'icon32.png'. Nova koda je spodaj:
{
"name": "First Extension", "version": "1.0", "description": "Lahko kodiram razširitev", "manifest_version": 2, "browser_action": {"default_title": "Prva razširitev", " default_icon ": {" 16 ":" images/icon16.png "," 32 ":" images/icon32.png "," 48 ":" images/icon48.png "," 128 ":" images/icon128.png "}}}
Za referenco o kodi manifesta pojdite na
4. korak: Dodajte pojavno okno
![Dodajte pojavno okno Dodajte pojavno okno](https://i.howwhatproduce.com/images/002/image-5763-6-j.webp)
![Dodajte pojavno okno Dodajte pojavno okno](https://i.howwhatproduce.com/images/002/image-5763-7-j.webp)
Ta razširitev bo imela pojavno okno. Pojavno okno je datoteka HTML (jezik za označevanje hiperteksta), zato je dobro, da se najprej naučite osnov HTML, CSS in JavaScript.
Najprej shranite dokument kot datoteko 'popup.html' v mapo z razširitvami.
Nato uredite datoteko manifesta tako, da bo prikazana 'popup.html', ko jo kliknete. Nova koda je spodaj:
{
"name": "First Extension", "version": "1.0", "description": "Lahko kodiram razširitev", "manifest_version": 2, "browser_action": {"default_title": "Prva razširitev", " default_icon ": {" 16 ":" images/icon16.png "," 32 ":" images/icon32.png "," 48 ":" images/icon48.png "," 128 ":" images/icon128.png "}," default_popup ":" popup.html "}}
Ne pozabite na vejico!
Zdaj, če je v popup.html dodana naslednja koda HTML, bo ob kliku prikazana "Hello World".
Pozdravljen, svet
5. korak: Naj bo videti dobro in interaktivno
![Naj bo videti dobro in naj bo interaktivno Naj bo videti dobro in naj bo interaktivno](https://i.howwhatproduce.com/images/002/image-5763-8-j.webp)
![Naj bo videti dobro in naj bo interaktivno Naj bo videti dobro in naj bo interaktivno](https://i.howwhatproduce.com/images/002/image-5763-9-j.webp)
Če vnesete osnovno vrstico HTML, naredite minimalni rezultat. Če dodate CSS (Cascading Style Sheets), bo videti hladnejše, če pa dodate JavaScript, je lahko bolj interaktiven. Ta vadnica ne bo podrobno razlagala HTML, JavaScript in CSS, vendar je na spletu veliko virov. Spodaj je koda za preprost program "Hello World", nato za bolj barvit program:
Pozdravljen, svet
Pozdravljen, svet
#zdrav {ozadje-barve: #000000; barva: #ff0000; meja: 8px začetek #86a3b2; meja-polmer: 50px; pretvori: vrti (57 stopinj); oblazinjenje: 10px; uporabniški izbor: nič; kazalec: križ; prehod: pretvori 2s; } #zdrav: hover {transform: rotate (-417deg); }
Ta drugi primer bi lahko bil za začetnika zelo zmeden. Toda to vam je pokazalo, kako pomemben je CSS za program/razširitev. Zdaj bi bil pravi čas, da si vzamete odmor in se naučite kodiranja HTML5 ter za nekaj referenc uporabite developer.chrome.com. Morda bo trajalo nekaj časa, vendar je mogoče narediti veliko podaljšanje.
6. korak: objavo v spletni trgovini Chrome
![Objavljanje v Spletni trgovini Chrome Objavljanje v Spletni trgovini Chrome](https://i.howwhatproduce.com/images/002/image-5763-10-j.webp)
![Objavljanje v Spletni trgovini Chrome Objavljanje v Spletni trgovini Chrome](https://i.howwhatproduce.com/images/002/image-5763-11-j.webp)
Če je nekdo naredil res odlično razširitev in jo želi deliti s svetom, jo lahko objavi. To je navsezadnje bistvo podaljška. Ta vadnica je le poskušala razložiti datoteko manifesta in kako jo lahko uporabite, pravkar pa je imel program "Hello World".
Če želite razširitev narediti javno, naredite mapo razširitve v datoteko zip. Druga stvar, ki jo morate storiti, je, da obiščete https://chrome.google.com/webstore/category/extensions in se prijavite v google račun. Nato kliknite gumb z nastavitvami in nato »nadzorna plošča za razvijalce«. Pritisnite gumb 'New Item', da naložite datoteko zip. Ko ste tam, morate urediti objavo v trgovini, zasebnost in cene. Razširitev je mogoče enostavno objaviti, če je predložena v pregled.
Ko je razširitev končana, nadaljujte s kodiranjem!
Priporočena:
Računalniškemu hladilniku dodajte ventilator - vijaki niso potrebni: 5 korakov
![Računalniškemu hladilniku dodajte ventilator - vijaki niso potrebni: 5 korakov Računalniškemu hladilniku dodajte ventilator - vijaki niso potrebni: 5 korakov](https://i.howwhatproduce.com/images/002/image-5028-2-j.webp)
Računalniškemu hladilniku dodajte ventilator - vijaki niso potrebni: Težava: na datotečnem strežniku imam (imel) matično ploščo s hladilnikom brez ventilatorja nad, kar mislim, da je severni most. Glede na program senzorja (ksensors), ki sem ga imel v Fedori, se je temperatura matične plošče držala okoli 190F. Moje naročje
Antena za razširitev obsega odpiranja vrat: 6 korakov (s slikami)
![Antena za razširitev obsega odpiranja vrat: 6 korakov (s slikami) Antena za razširitev obsega odpiranja vrat: 6 korakov (s slikami)](https://i.howwhatproduce.com/images/010/image-29823-j.webp)
Antena za razširitev območja odpiranja vrat: Ko sneg postane res globok na planini Hood, je zelo zabavno smučati, sankati, graditi snežne utrdbe in metati otroke s krova v globok prah. Toda gladke stvari niso tako zabavne, ko se poskušamo vrniti na avtocesto in odpreti vrata, da pridemo
Izboljšane izkušnje z avtobusi za slabovidne osebe z Arduino in 3D tiskanjem: 7 korakov
![Izboljšane izkušnje z avtobusi za slabovidne osebe z Arduino in 3D tiskanjem: 7 korakov Izboljšane izkušnje z avtobusi za slabovidne osebe z Arduino in 3D tiskanjem: 7 korakov](https://i.howwhatproduce.com/images/012/image-33281-j.webp)
Izboljšane izkušnje z avtobusi za osebe z motnjami vida z Arduinom in 3D -tiskanjem: Kako lahko poenostavite vožnjo v javnem prevozu za osebe z okvaro vida? Podatki o zemljevidih v realnem času so pogosto nezanesljivi, medtem ko je na voljo javni prevoz. slabovidne osebe. T
Python za začetnike, ki niso tako začetni: 7 korakov
![Python za začetnike, ki niso tako začetni: 7 korakov Python za začetnike, ki niso tako začetni: 7 korakov](https://i.howwhatproduce.com/images/001/image-2688-46-j.webp)
Python za začetnike ne tako začetnike: Pozdravljeni, zadnjič, če ste bili pozorni, smo se dotaknili osnov pythona - tiskanje, medtem ko in za zanke, vnos & izhod, če, in zaganjalnik na easygui. tudi brezplačna distribucija easygui in pycal-moj lasten modul. ta vadnica bo zajemala: več
FridgePi: Ostanki, ki nikoli niso zveneli tako dobro: 7 korakov (s slikami)
![FridgePi: Ostanki, ki nikoli niso zveneli tako dobro: 7 korakov (s slikami) FridgePi: Ostanki, ki nikoli niso zveneli tako dobro: 7 korakov (s slikami)](https://i.howwhatproduce.com/images/003/image-7842-12-j.webp)
FridgePi: Ostanki nikoli niso zveneli tako dobro: Že leta predvajam glasbo iz iPhona na stereo nastavitvi v kleti z zvočniki, ki so povezani v kuhinjo. Deluje dovolj dobro, vendar je izpraznil baterijo mojega telefona in omejil vsebino na knjižnico iTunes ali kakšen spletni rad