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

2024 Autor: John Day | [email protected]. Zadnja izmjena: 2024-01-30 08:04

Chromeova proširenja su mali programi napravljeni da poboljšaju iskustvo pregledavanja korisnika. Za više informacija o chrome ekstenzijama idite na

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

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, zato budite kreativni.

Supplies

Potrebne zalihe su u nastavku:

• Računar sa uređivačem teksta (koristim Notepad)
• google chrome

I to je sve!

Korak 1: Kreirajte direktorij

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

Korak 2: Kreirajte datoteku manifesta i kodirajte je

Datoteka manifesta je vrlo važan dio proširenja. On ekstenziji govori šta treba da radi i šta treba da bude. Datoteke manifesta manifestuju se u JSON -u. Prvi korak je otvaranje uređivača teksta i spremanje nove datoteke pod nazivom '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: // extension (Chrome bi za to trebao biti korišten kao preglednik). Kad dođete na chrome: // extension, uključite način za programere. Nakon toga pritisnite gumb 'Učitaj nepakirano' i odaberite mapu 'proširenje'.

bubanj molim …

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

Korak 3: Kreirajte 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 projekat će koristiti ikone 16x16, 32x32, 48x48 i 128x128. Nakon što je ikona napravljena, napravite fasciklu pod nazivom „slike“u mapi proširenja i stavite ikonu u tu fasciklu. 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 proširenje će 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 fasciklu 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 na njega prikazati 'Hello World'.

Zdravo svijete

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

Ako se otkuca osnovni HTML redak, tada se postiže minimalni 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:

Zdravo svijete

Zdravo svijete

#zdravo {background-color: #000000; boja: #ff0000; granica: 8px početak #86a3b2; border-radius: 50px; transformirati: rotirati (57 stepeni); padding: 10px; korisnički odabir: nema; kursor: precrtani; prijelaz: transformirati 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/ekstenziju. Sada bi bilo dobro vrijeme da napravite pauzu i naučite HTML5 kodiranje te upotrijebite developer.chrome.com za neke reference. Može potrajati neko vrijeme, ali može se napraviti veliko produljenje.

Korak 6: Objavite ga u Chrome web trgovini

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

Prva stvar koju trebate učiniti da biste proširenje učinili javnim je da mapu proširenja pretvori 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 dugme 'Nova stavka' za postavljanje 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!