Chrome web proširenje - nije potrebno prethodno iskustvo kodiranja: 6 koraka

2024 Autor: John Day | [email protected]. Zadnja promjena: 2024-01-30 09:32

Chromeova proširenja mali su programi napravljeni za poboljšanje iskustva pregledavanja korisnika. Za više informacija o Chromeovim proširenjima posjetite

Za izradu Chrome web proširenja potrebno je kodiranje, pa je vrlo korisno pregledati HTML, JavaScript i CSS na web stranici u nastavku:

www.w3schools.com/default.asp (w3 škole su dobra web stranica za kodiranje resursa)

Ne znate kako kodirati? Ne brinite, ovaj će vam vodič uputiti put.

Najbolja stvar kod Chromeovih proširenja je to što se mogu prilagoditi. Ne može se učiniti samo jedna specifična stvar, stoga budite kreativni.

Pribor

Potrebne zalihe su u nastavku:

• Računalo s uređivačem teksta (koristim Notepad)
• Google Chrome

I to je sve!

Korak 1: Stvorite imenik

Najprije stvorite mapu u kojoj će se nalaziti sve datoteke i dajte joj naziv 'nastavak'. Naziv se kasnije može promijeniti po želji.

Korak 2: Stvorite datoteku manifesta i kodirajte je

Datoteka manifesta vrlo je važan dio proširenja. On ekstenziji govori točno što treba učiniti i biti. Datoteke manifesta očituju se u JSON -u. Prvi korak je otvaranje uređivača teksta i spremanje nove datoteke kao 'manifest.json'.

Zatim upišite donju skriptu:

{

"name": "First Extension", "version": "1.0", "description": "Mogu kodirati proširenje", "manifest_version": 2, "browser_action": {"default_title": "Prvo proširenje"}}

Zapamtite zareze iza vrijednosti!

Nakon što ovo upišete, spremite datoteku manifesta i idite na chrome: // extensions (Chrome bi se za to trebao koristiti kao preglednik). Kad ste na chrome: // extension, uključite način za programere. Nakon toga pritisnite gumb 'Učitaj raspakirano' i odaberite mapu 'proširenje'.

bubanj molim …

Da! To je produžetak, osim … nekako dosadan. Trenutno ne radi doslovno ništa, ali uskoro će biti super.

Korak 3: Izradite ikone i ažurirajte manifest

Jedna web stranica koja dobro funkcionira za crtanje ikona je https://www.piskelapp.com/. Postoje i drugi programi za crtanje. Ikone trebaju biti kvadratne. Ovaj će projekt koristiti ikone 16x16, 32x32, 48x48 i 128x128. Nakon što je ikona napravljena, napravite mapu pod nazivom 'slike' u mapi proširenja i stavite ikonu u tu mapu. Možda bi bilo dobro nazvati sliku prema njenoj veličini. Na primjer, 'icon32.png'. Novi kôd je ispod:

{

"name": "First Extension", "version": "1.0", "description": "Mogu kodirati proširenje", "manifest_version": 2, "browser_action": {"default_title": "Prvo proširenje", " default_icon ": {" 16 ":" images/icon16-p.webp

Za informacije o kodu manifesta idite na

Korak 4: Dodajte skočni prozor

Ovo će proširenje imati skočni prozor. Skočni prozor je datoteka HTML (jezik za označavanje hiperteksta) pa je dobro prvo naučiti osnove HTML -a, CSS -a i JavaScript -a.

Prvo spremite dokument kao datoteku 'popup.html' u mapu proširenja.

Zatim uredite datoteku manifesta tako da prikazuje "popup.html" kada se na nju klikne. Novi kôd je ispod:

{

"name": "First Extension", "version": "1.0", "description": "Mogu kodirati proširenje", "manifest_version": 2, "browser_action": {"default_title": "Prvo proširenje", " default_icon ": {" 16 ":" images/icon16-p.webp

Ne zaboravite zarez!

Sada, ako se sljedeći HTML kôd doda u popup.html, tada će se kliknuti na "Hello World".

Pozdrav svijete

Korak 5: Neka izgleda dobro i učinite ga interaktivnim

Ako se otkuca osnovni HTML redak, tada se postiže najmanji minimum. Ako se doda CSS (Cascading Style Sheets), izgledat će hladnije, a ako se doda JavaScript, tada može biti interaktivniji. Ovaj vodič neće detaljno objašnjavati HTML, JavaScript i CSS, ali postoji mnogo resursa na mreži. Ispod je kôd za jednostavan program "Hello World", zatim za šareniji program:

Pozdrav svijete

Pozdrav svijete

#zdrav {background-color: #000000; boja: #ff0000; obrub: 8px početak #86a3b2; obrub-radijus: 50px; transformirati: rotirati (57 stepeni); punjenje: 10px; korisnički odabir: nema; kursor: križ; prijelaz: pretvori 2s; } #Hello: hover {transform: rotate (-417deg); }

Ovaj drugi primjer mogao bi biti vrlo zbunjujući za početnike. No, ovo vam je trebalo pokazati koliko je CSS važan za program/proširenje. Sada bi bilo dobro vrijeme da napravite pauzu i naučite HTML5 kodiranje te upotrijebite developer.chrome.com za referencu. Može potrajati neko vrijeme, ali može se napraviti veliko produljenje.

Korak 6: Objavite ga u Chrome web -trgovini

Ako je netko napravio jako veliko proširenje i želi ga podijeliti sa svijetom, onda ga može objaviti. To je, uostalom, poenta produženja. Ovaj je vodič samo pokušao objasniti datoteku manifesta i kako je možete koristiti, a upravo je imala program 'Hello World'.

Prvo što trebate učiniti kako biste proširenje učinili javnim je da mapu proširenja pretvorite u zip datoteku. Druga stvar koju trebate učiniti je otići na https://chrome.google.com/webstore/category/extensions i prijaviti se na google račun. Zatim kliknite gumb zupčanika za postavke, a zatim kliknite "razvojna nadzorna ploča". Pritisnite gumb 'Nova stavka' za prijenos zip datoteke. Kad stignete tamo, potrebno je urediti unos u trgovini, privatnost i cijene. Proširenje se može lako objaviti ako se podnese na pregled.

Sada kada je proširenje završeno, nastavite s kodiranjem!