Extensie web Chrome - nu este necesară o experiență de codificare prealabilă: 6 pași

2024 Autor: John Day | [email protected]. Modificat ultima dată: 2024-01-30 11:41

Extensiile Chrome sunt programe mici create pentru a îmbunătăți experiența de navigare a utilizatorilor. Pentru mai multe informații despre extensiile Chrome, accesați

Pentru a crea o extensie web Chrome, este necesară codarea, deci este foarte util să revizuiți HTML, JavaScript și CSS pe site-ul de mai jos:

www.w3schools.com/default.asp (școlile w3 este un site bun pentru codificarea resurselor)

Nu știi cum să codezi? Nu vă faceți griji, acest tutorial vă va ajuta să vă ghidați calea.

Cel mai bun lucru despre extensiile Chrome este că pot fi personalizate. Nu se poate face doar un lucru specific, deci fii creativ.

Provizii

Consumurile necesare sunt mai jos:

• Un computer cu un editor de text (folosesc Notepad)
• Google Chrome

Și asta e tot!

Pasul 1: Creați directorul

Mai întâi, creați un folder pentru a conține toate fișierele și denumiți-l „extensie”. Numele poate fi schimbat ulterior dacă se dorește.

Pasul 2: Creați fișierul Manifest și codificați-l

Fișierul manifest este o parte foarte importantă a extensiei. Acesta spune extensiei exact ce să faci și să fii. Fișierele Manifest sunt formatate în JSON. Primul pas este să deschideți un editor de text și să salvați un fișier nou ca „manifest.json”.

Apoi tastați scriptul de mai jos:

{

"name": "Prima extensie", "versiunea": "1.0", "description": "Pot codifica o extensie", "manifest_version": 2, "browser_action": {"default_title": "Prima extensie"}}

Amintiți-vă virgulele după valori!

După ce este tastat, salvați fișierul manifest și accesați extensiile chrome: // (Chrome ar trebui să fie folosit ca browser pentru aceasta). Odată ajuns la extensiile chrome: //, activați modul dezvoltator. După aceea, apăsați butonul „Încărcați despachetat” și selectați folderul „extensie”.

tambur, te rog …

Yay! Aceasta este o extensie, cu excepția … genul ei plictisitor. Nu face nimic literalmente de acum, dar în curând va fi super tare.

Pasul 3: Creați pictogramele și actualizați manifestul

Un site web care funcționează bine pentru desenarea icoanelor este https://www.piskelapp.com/. Există și alte programe de desen disponibile pentru utilizare. Pictogramele trebuie să fie pătrate. Acest proiect va utiliza pictograme 16x16, 32x32, 48x48 și 128x128. Odată ce pictograma este făcută, creați un folder numit „imagini” în folderul extensiei și puneți pictograma în acel folder. Ar putea fi o idee bună să denumiți o imagine în funcție de dimensiunea acesteia. De exemplu, „icon32.png”. Noul cod este mai jos:

{

"name": "Prima extensie", "versiunea": "1.0", "description": "Pot codifica o extensie", "manifest_version": 2, "browser_action": {"default_title": "Prima extensie", " default_icon ": {" 16 ":" images / icon16-p.webp

Pentru referință despre codul manifestului, accesați

Pasul 4: Adăugați o fereastră pop-up

Această extensie va avea un popup. Pop-up-ul este un fișier HTML (Hypertext Markup Language), deci este bine să învățați mai întâi elementele de bază ale HTML, CSS și JavaScript.

Mai întâi, salvați un document ca fișier „popup.html” în folderul extensiei.

Apoi, editați fișierul manifest pentru a afișa „popup.html” când se face clic pe acesta. Noul cod este mai jos:

{

"name": "Prima extensie", "versiunea": "1.0", "description": "Pot codifica o extensie", "manifest_version": 2, "browser_action": {"default_title": "Prima extensie", " default_icon ": {" 16 ":" images / icon16-p.webp

Nu uitați de virgulă!

Acum, dacă următorul cod HTML este adăugat în popup.html, atunci va apărea „Hello World” atunci când faceți clic.

Salut Lume

Pasul 5: Faceți-l să arate bine și faceți-l interactiv

Dacă se tastează o linie HTML de bază, atunci se realizează minimul. Dacă se adaugă CSS (Cascading Style Sheets), atunci va arăta mai cool și, dacă se adaugă JavaScript, atunci acesta poate fi mai interactiv. Acest tutorial nu va intra în detaliu explicând HTML, JavaScript și CSS, dar există o mulțime de resurse online. Mai jos este codul pentru programul simplu „Hello World”, apoi programul mai colorat, respectiv:

Salut Lume

Salut Lume

#hello {background-color: # 000000; culoare: # ff0000; chenar: 8px outset # 86a3b2; raza chenarului: 50px; transforma: roti (57deg); umplutură: 10 px; selectare utilizator: nici unul; cursor: cruce; tranziție: transformă 2s; } #hello: hover {transform: rotate (-417deg); }

Acest al doilea exemplu ar putea fi foarte confuz, pentru un începător. Dar acest lucru a fost pentru a vă arăta cât de important este CSS pentru un program / extensie. Acum ar fi un moment bun să faceți o pauză și să învățați câteva coduri HTML5 și să folosiți developer.chrome.com ca referință. Poate dura ceva timp, dar se poate face o extensie excelentă.

Pasul 6: Publicarea acestuia în Magazinul web Chrome

Dacă cineva a făcut o extensie cu adevărat grozavă și vrea să o împărtășească lumii, atunci o poate publica. Acesta este, la urma urmei, punctul unei extensii. Acest tutorial a încercat doar să explice fișierul manifest și modul în care îl puteți utiliza și pur și simplu avea un program „Hello World”.

Primul lucru de făcut pentru a face publică o extensie este să transformați folderul extensiei într-un fișier zip. Al doilea lucru de făcut este să accesați https://chrome.google.com/webstore/category/extensions și să vă conectați la un cont google. Apoi, faceți clic pe butonul de setare și apoi faceți clic pe „tabloul de bord al dezvoltatorului”. Apăsați butonul „Element nou” pentru a încărca fișierul zip. Odată ajuns acolo, este necesar să editați lista de magazin, confidențialitatea și prețurile. O extensie poate fi publicată cu ușurință dacă este trimisă spre examinare.

Acum că extensia este terminată, continuați să codați!