Crearea unei extensii Chrome este un proces destul de simplu. După ce ați terminat, îl veți putea folosi pe computer pentru a îmbunătăți funcționarea browserului.
Există câteva componente de bază pe care browserul le solicită înainte ca extensia să poată fi complet funcțională. Vom trece peste toate acestea de mai jos, inclusiv cum să obțineți extensia personalizată pentru a funcționa în Chrome, fără a fi nevoie să o încărcați sau să o împărtășiți cu altcineva. >
Construirea unei extensii Chrome complexe este un proces mult mai detaliat decât ceea ce veți vedea mai jos, dar procesul general este același. Continuați să citiți pentru a afla cum să faceți o extensie Chrome pe care puteți începe să o utilizați astăzi.
Sfat: Pentru a vedea cât de minunată poate fi propria extensie, consultați aceste uimitoare extensii Chrome.
Folosind acest ghid, veți face o extensie Chrome simplă care listează unele dintre site-urile dvs. web preferate. Este complet personalizabil și este foarte ușor de actualizat.
<!DOCTYPE html><html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Favorite Sites</title> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <ul id="myUL"> <li><a href="https://helpdeskgeek.com/" target="_blank">Help Desk Geek</a></li> <li><a href="https://www.online-tech-tips.com/" target="_blank">Online Tech Tips</a></li> <li><a href="https://thebackroomtech.com/" target="_blank">The Back Room Tech</a></li> </ul> </body> </html>
Nu ezitați să editați linkurile și link text, sau dacă doriți să faceți extensia Chrome exact cum suntem, trebuie să păstrați totul la fel.
In_content_1 all: [300x250] / dfp: [640x360]->{>
„update_url”: „https://clients2.google.com/service/update2/crx”,
„manifest_version”: 2,
„nume”: „Site-uri favorite”,
„descriere”: „Toate site-urile mele preferate.”,
„Versiune”: „1.0”,
„pictograme”: {
„16”: „icon.png”,
„32”: „icon.png”,
„48”: „icon.png”,
„128”: „pictogramă. png ”
},
„ fundal ”: {
„ pagină ”:” fundal. html ”
},
„ browser_action ”: {
„ default_icon ”: icon.png ",
" default_title ":" Site-uri favorite ",
" default_popup ":" popup.html "
}
}
Zonele comestibile ale acestui cod includ
#myUL {
listă -stil: niciunul;
padding: 0;
margin: 0;
lățime: 300px;
}
#myUL li a {
graniță: 1px solid #ddd;
margin-top: -1px;
culoare de fundal: # f6f6f6;
padding: 12px;
text-decor: none;
dimensiune font: 18px;
culoare: negru;
afișare : bloc;
font-family: 'Noto Sans', sans-serif;
(
fundal color: #eee;
sequ
nostra>
Puteți modifica multe în fișierul CSS. Jucați cu aceste opțiuni după ce faceți extensia Chrome pentru a o personaliza după bunul plac.
Sfat:Google are mai multe informații la crearea extensiilor Chrome. Există alte exemple și opțiuni avansate care depășesc pașii simpli pe care i-am arătat aici.
Acum că ați făcut extensia Chrome , este timpul să o adăugați la browser, astfel încât să puteți utiliza toate fișierele pe care tocmai le-ați făcut. Instalarea unei extensii personalizate implică o procedură diferită de cum instalați o extensie Chrome normală.
Acum, dacă extensia Chrome este utilizabilă, puteți face modificări pentru a vă face propria dvs.
Fișierul styles.css controlează modul în care apare extensia, astfel încât să puteți ajusta stilul listei generale și să schimbați culoarea sau tipul fontului. W3Schools este una dintre cele mai bune resurse pentru a afla toate diferitele lucruri pe care le poți face cu CSS.
Pentru a schimba comanda în care sunt listate site-urile web sau pentru a adăuga sau mai multe site-uri sau eliminați cele existente, editați fișierul popup.html. Doar asigurați-vă că vă păstrați modificările numai la adresa URL și numele. Toate celelalte personaje, cum ar fi <și , sunt obligatorii și nu ar trebui schimbate. Tutorial HTML pe W3Schools este un loc bun pentru a afla mai multe despre această limbă.
5.11.2019