Kako napraviti jednostavno proširenje za Chrome

Izrada proširenja za Chrome prilično je jednostavan proces. Kada završite, moći ćete ga koristiti na računalu kako biste poboljšali rad preglednika.

Postoje neke osnovne komponente koje preglednik zahtijeva da bi proširenje moglo biti potpuno operativno. U nastavku ćemo proći kroz sve ovo, uključujući kako natjerati vaše prilagođeno proširenje da radi u Chromeu(Chrome) bez potrebe da ga prenosite ili dijelite s bilo kim drugim.

Izrada složenog proširenja za Chrome proces je puno detaljniji od onoga što ćete vidjeti u nastavku, ali je opći postupak isti. Nastavite čitati kako biste saznali kako napraviti proširenje za Chrome koje možete početi koristiti već danas.

Savjet(Tip) : da biste vidjeli koliko bi vaše vlastito proširenje moglo biti sjajno, pogledajte ova nevjerojatna proširenja za Chrome(these amazing Chrome extensions) .

Kako napraviti proširenje za Chrome

Koristeći ovaj vodič, napravit ćete jednostavno proširenje za Chrome koje navodi neke od vaših omiljenih web-mjesta. Potpuno je prilagodljiv i vrlo jednostavan za ažuriranje.

Evo što učiniti:

  • Napravite mapu koja će sadržavati sve datoteke koje čine ekstenziju.
  • Izradite osnovne datoteke koje ovo proširenje zahtijeva: manifest.json , popup.html , background.html , styles.css .
  • Otvorite popup.html u uređivaču teksta, a zatim tamo zalijepite sve sljedeće, pazeći da ga spremite kada završite.
<!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>

Slobodno(Feel) uredite veze i tekst veze, ili ako želite da proširenje za Chrome bude točno kakvo jesmo, samo ostavite sve isto.

  • Otvorite manifest.json u uređivaču teksta i kopirajte/zalijepite sljedeće:

{
“update_url”: “https://clients2.google.com/service/update2/crx”,

"manifest_version": 2,
"name": "Omiljene stranice", ( “name”: “Favorite Sites”,)
"opis": "Sve moje omiljene web stranice.", ( “description”: “All my favorite websites.”,)
"verzija": "1.0", ( “version”: “1.0”,)
"ikone": { ( “icons”: {)
"16": "icon.png",
“32”: “icon.png”,
“48”: “icon.png”,
“128”: “icon.png”
},

   “background”: { 
        “page”:”background.html”
},

    “browser_action” : {
        “default_icon” : “icon.png”,
        “default_title” : “Omiljene stranice”, (        “default_title” : “Favorite Sites”,)
        “default_popup”: “popup.html”
    }
}

Jestiva područja ovog koda uključuju naziv(name) , opis(description) i default_title .

  • Otvorite styles.css i zalijepite sljedeći kod. To je ono što ukrašava skočni izbornik kako bi bio mnogo privlačniji za gledanje i još lakši za korištenje.

#myUL {
tip-stil liste: nema; (list-style-type: none;)
   dopuna: 0; (   padding: 0;)
   margina: 0; (   margin: 0;)
   širina: 300px; (   width: 300px;)
}

#myUL li a {
  border: 1px solid #ddd;
  margin-top: -1px;
  background-color: #f6f6f6;
  padding: 12px;
  tekst-dekoracija: nema; (  text-decoration: none;)
  veličina fonta: 18px; (  font-size: 18px;)
  Crna boja; (  color: black;)
  zaslon: blok; (  display: block;)
  font-family: 'Noto Sans', sans-serif;
}

#myUL li a:hover:not(.header) {
   background-color: #eee;
}

Mnogo toga možete promijeniti u CSS datoteci. Poigrajte se ovim opcijama nakon što napravite proširenje za Chrome kako biste ga prilagodili svojim željama.

  • Napravite(Create) ikonu za ekstenziju i nazovite je icon.png . Postavite ga u svoju mapu proširenja Chrome . Kao što možete vidjeti u gornjem kodu, možete napraviti zasebnu ikonu za te veličine: 16×16 piksela, 32×32 itd.

Savjet: (Tip: )Google ima više informacija(Google has more information) o izradi proširenja za Chrome . Postoje i drugi primjeri i napredne opcije koje nadilaze jednostavne korake koje smo ovdje prikazali.

Kako dodati prilagođeno proširenje(Custom Extension) u Chrome

Sada kada ste napravili proširenje za Chrome , vrijeme je da ga dodate u preglednik kako biste zapravo mogli koristiti sve datoteke koje ste upravo napravili. Instaliranje prilagođenog proširenja uključuje postupak koji se razlikuje od načina na koji biste instalirali normalno proširenje za Chrome(how you’d install a normal Chrome extension) .

  • Na izborniku Chromea idite na Više alata(More tools ) > Proširenja(Extensions) . Ili upišite chrome://extensions/ u adresnu traku.
  • Odaberite gumb pored Način rada za razvojne programere(Developer mode) ako već nije odabran. To će uključiti poseban način rada koji vam omogućuje uvoz vlastitih Chromeovih(Chrome) proširenja.

  • Upotrijebite gumb Učitaj raspakirano(Load unpacked ) na vrhu te stranice za odabir mape koju ste napravili tijekom 1. koraka(Step 1) iznad.

  • Prihvatite(Accept) sve upite ako ih vidite. Inače, vaše prilagođeno proširenje za Chrome prikazat će se zajedno sa svim ostalim proširenjima koje imate u gornjem desnom kutu preglednika.

Uređivanje vašeg proširenja za Chrome

Sada kada je vaše proširenje za Chrome upotrebljivo, možete unijeti izmjene kako biste ga učinili svojim. 

Datoteka styles.css kontrolira kako se ekstenzija pojavljuje, tako da možete prilagoditi cjelokupni stil popisa i promijeniti boju ili vrstu fonta. W3Schools je jedan od najboljih resursa za učenje o svim različitim stvarima koje možete učiniti s CSS -om .

Da biste promijenili redoslijed u kojem su web stranice navedene, ili da biste dodali ili više web-mjesta ili uklonili postojeće, uredite datoteku popup.html. Samo pazite da svoje izmjene zadržite samo na URL -u i nazivu. Svi ostali znakovi, kao što su <li> i <html> , su obavezni i ne smiju se mijenjati. HTML Tutorial na W3Schools(HTML Tutorial on W3Schools) je dobro mjesto za naučiti više o tom jeziku.



Tina Juriša

About the author

Ja sam web programer s više od 10 godina iskustva u radu s preglednicima Firefox i Google Docs. Stručnjak sam za izradu jednostavnih, ali moćnih mrežnih aplikacija i razvio sam web rješenja za mala poduzeća i velike organizacije. Moja baza klijenata uključuje neka od najvećih imena u poslovanju, uključujući FedEx, Coca Colu i Macy's. Moje vještine programera čine me idealnim kandidatom za bilo koji projekt koji treba brzo i učinkovito dovršiti - od razvoja prilagođenih web stranica do stvaranja robusnih marketinških kampanja putem e-pošte.


Related posts