Extensió web de Chrome: no cal experiència prèvia en codificació: 6 passos

2024 Autora: John Day | [email protected]. Última modificació: 2024-01-30 08:11

Les extensions de Chrome són petits programes creats per millorar la navegació dels usuaris. Per obtenir més informació sobre les extensions chrome, aneu a

Per crear una extensió web de Chrome, cal codificar, de manera que és molt útil revisar HTML, JavaScript i CSS al lloc web següent:

www.w3schools.com/default.asp (w3 schools és un bon lloc web per codificar recursos)

No saps com codificar? No us preocupeu, aquest tutorial us ajudarà a guiar el camí.

El millor de les extensions de Chrome és que es poden personalitzar. No es pot fer només una cosa específica, així que sigueu creatius.

Subministraments

A continuació es detallen els subministraments necessaris:

• Un ordinador amb un editor de text (estic fent servir el bloc de notes)
• Google Chrome

I això és tot!

Pas 1: creeu el directori

Primer, creeu una carpeta que contingui tots els fitxers i anomeneu-la "extensió". El nom es pot canviar més endavant si es desitja.

Pas 2: creeu el fitxer de manifest i codifiqueu-lo

El fitxer manifest és una part molt important de l'extensió. Indica exactament a l’extensió què fer i ser. Els fitxers de manifest es formaten en JSON. El primer pas és obrir un editor de text i desar un fitxer nou com a "manifest.json".

A continuació, escriviu l'script següent:

{

"name": "Primera extensió", "versió": "1.0", "description": "Puc codificar una extensió", "manifest_version": 2, "browser_action": {"default_title": "Primera extensió"}}

Recordeu les comes després dels valors.

Després d’escriure-ho, deseu el fitxer de manifest i aneu a les extensions chrome: // (s’hauria d’utilitzar Chrome com a navegador). Un cop a les extensions chrome: //, activeu el mode de desenvolupador. Després, premeu el botó "Carrega desempaquetat" i seleccioneu la carpeta "extensió".

tambor, si us plau …

Visca! Això és una extensió, excepte … el seu tipus d’avorrit. Literalment, no fa res fins ara, però aviat serà super genial.

Pas 3: creeu les icones i actualitzeu el manifest

Un lloc web que funciona bé per dibuixar icones és https://www.piskelapp.com/. També hi ha altres programes de dibuix disponibles per al seu ús. Les icones han de ser quadrades. Aquest projecte utilitzarà icones de 16x16, 32x32, 48x48 i 128x128. Un cop feta la icona, creeu una carpeta anomenada "imatges" a la carpeta d'extensions i poseu-la a la carpeta. Pot ser una bona idea posar nom a una imatge segons la seva mida. Per exemple, 'icon32.png'. A continuació es mostra el nou codi:

{

"name": "Primera extensió", "versió": "1.0", "description": "Puc codificar una extensió", "manifest_version": 2, "browser_action": {"default_title": "Primera extensió", " default_icon ": {" 16 ":" images / icon16-p.webp

Per obtenir referència al codi del manifest, aneu a

Pas 4: afegiu una finestra emergent

Aquesta extensió tindrà una finestra emergent. La finestra emergent és un fitxer HTML (Hypertext Markup Language), per tant, és bo aprendre els conceptes bàsics d’HTML, CSS i JavaScript.

En primer lloc, deseu un document com a fitxer "popup.html" a la carpeta d'extensions.

A continuació, editeu el fitxer de manifest per mostrar "popup.html" quan es faci clic. A continuació es mostra el nou codi:

{

"name": "Primera extensió", "versió": "1.0", "description": "Puc codificar una extensió", "manifest_version": 2, "browser_action": {"default_title": "Primera extensió", " default_icon ": {" 16 ":" images / icon16-p.webp

No us oblideu de la coma!

Ara, si s'afegeix el següent codi HTML a popup.html, es mostrarà "Hello World" quan es faci clic.

Hola món

Pas 5: que tingui un bon aspecte i que sigui interactiu

Si s’escriu una línia HTML bàsica, es fa el mínim necessari. Si s’afegeix CSS (Cascading Style Sheets), es veurà més fresc i, si s’afegeix JavaScript, pot ser més interactiu. Aquest tutorial no entrarà en els detalls que expliquin HTML, JavaScript i CSS, però hi ha molts recursos en línia. A continuació es mostra el codi del programa senzill "Hello World" i, a continuació, el programa més vistós, respectivament:

Hola món

Hola món

#hola {background-color: # 000000; color: # ff0000; vora: inici de 8px # 86a3b2; radi de la vora: 50 px; transformar: girar (57 graus); encoixinat: 10 px; selecció d’usuari: cap; cursor: punt de mira; transició: transforma 2s; } #hola: hover {transform: rotate (-417deg); }

Aquest segon exemple pot ser molt confús per a principiants. Però això volia mostrar-vos la importància que té CSS per a un programa / extensió. Ara seria un bon moment per fer un descans i aprendre una mica de codificació HTML5 i utilitzar developer.chrome.com com a referència. Pot trigar una mica, però es pot fer una gran extensió.

Pas 6: publicar-lo a Chrome Web Store

Si algú ha fet una extensió realment fantàstica i vol compartir-la amb el món, la pot publicar. Aquest és, al cap i a la fi, el punt d’una extensió. Aquest tutorial només va intentar explicar el fitxer de manifest i com es pot utilitzar, i només tenia un programa "Hello World".

El primer que cal fer per fer pública una extensió és convertir la carpeta d’extensió en un fitxer zip. El segon que heu de fer és anar a https://chrome.google.com/webstore/category/extensions i iniciar la sessió a un compte de Google. A continuació, feu clic al botó d'engranatge de configuració i, a continuació, feu clic a "Tauler del desenvolupador". Premeu el botó "Element nou" per penjar el fitxer zip. Un cop allà, cal editar la fitxa de la botiga, la privadesa i els preus. Una extensió es pot publicar fàcilment si es presenta a revisió.

Ara que l'extensió s'ha acabat, continueu codificant.