Spletna razširitev za Chrome - predhodne izkušnje s kodiranjem niso potrebne: 6 korakov

2024 Avtor: John Day | [email protected]. Nazadnje spremenjeno: 2024-01-30 12:03

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

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

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

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

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

Č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

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