Ekstenzije za internet pregledače predstavljaju dodatke koji unapređuju funkcionalnost samog pregledača. Drugim rečima, one obogaćuju osnovne mogućnosti pregledača novim funkcijama.
Ali zašto bi ekstenzija bila korisnija od veb aplikacije? Zato što ekstenzija ima pristup svim API-jima pregledača, što joj omogućava veću kontrolu nad pregledačem.
Uz pomoć ekstenzija, korisnici mogu:
✅ Prilagoditi korisnički interfejs pregledača i kartica.
✅ Dodati nove prečice za radnje u pregledaču.
✅ Detaljno pratiti aktivnosti pregledača i veba.
Google Chrome ima i svoju veb prodavnicu gde se mogu hostovati Chrome ekstenzije, dostupne svima. Možda se čini da je kreiranje Chrome ekstenzije komplikovan zadatak, ali u stvarnosti, to je samo kombinacija HTML-a, CSS-a i JavaScript-a.
Da, moguće je napraviti Chrome ekstenziju koristeći jednostavne veb tehnologije poput JavaScript-a. Sledi uputstvo kako to uraditi!
Izrada Chrome Ekstenzije
U ovom vodiču naučićete kako da napravite Chrome ekstenziju koja analizira istoriju pregledača i prikazuje je u iskačućem prozoru.
Potrebne Datoteke
Jedina neophodna datoteka za izradu Chrome ekstenzije je `manifest.json` datoteka. Sve ostalo što kodirate identično je izradi veb aplikacije.
Kreiranje `Manifest.json` Datoteke
Ova specifična datoteka definiše konfiguraciju i funkcionalnost ekstenzije. Evo primera kako `manifest` datoteka obično izgleda:
{
"manifest_version": 3,
"name": "History",
"description": "View Browsing History",
"version": "0.1",
"action": {
"default_popup": "index.html"
}
}
Najnovija verzija manifest datoteke u vreme pisanja je v3, koja, prema Chrome-u, donosi poboljšanja u bezbednosti, privatnosti i performansama ekstenzija, omogućavajući im da koriste otvorene veb tehnologije kao što su servisni radnici i obećanja.
U datoteci manifesta možete primetiti i svojstvo `action`. Ono definiše koju HTML datoteku želite da otvorite u iskačućem prozoru kada korisnik klikne na ikonicu ekstenzije. Postoji i svojstvo `default_icon` koje vam omogućava da definišete podrazumevanu ikonicu ekstenzije koja će biti prikazana.
Izrada Aplikacije
Sada je vreme za izradu aplikacije, koja će se krajnjem korisniku prikazati kao iskačući prozor. Ovo nema nikakve veze sa samim ekstenzijama, već je to standardna veb aplikacija.
Prvo, potrebno je kreirati ulaznu datoteku koju ćete navesti u `default_popup` svojstvu manifesta. U ovom primeru, kao ulaznu tačku za ekstenziju, koristi se `index.html`.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chrome Extension</title>
<link rel="stylesheet" href="https://wilku.top/how-to-create-a-chrome-extension-from-scratch-in-3-steps/style.css">
</head>
<body>
<h2>Browsing History</h2>
<ul class="list"></ul>
<script src="./app.js"></script>
</body>
</html>
Povezana je stilska lista kako bi stranica izgledala bolje u iskačućem prozoru. Takođe, tu je i JavaScript datoteka koja obrađuje funkcionalnost ekstenzije.
function searchHistory() {
chrome.history.search({
text: '',
startTime: new Date("2023-10-01").getMilliseconds()
}, (results) => {
for (const result of results) {
let liItem = document.createElement("li")
let link = document.createElement("a")
link.innerText = result.title
link.href = result.url
liItem.appendChild(link)
document.querySelector(".list").appendChild(liItem)
}
})
}
document.addEventListener("DOMContentLoaded", () => {
searchHistory()
})
Ova datoteka koristi Chrome History API kako bi se preuzela istorija pregledača i prikazala u iskačućem prozoru. Kada korisnik klikne na ikonicu ekstenzije, `DOMContentLoaded` događaj će se pokrenuti i pozvati funkciju `searchHistory`, koja sadrži glavni kod.
Metod `search` u History API-ju prihvata obavezan parametar `text`, koji predstavlja tekst pretrage na osnovu kojeg želite da filtrirate istoriju. Ako se ostavi kao prazan string, istorija će biti vraćena bez ikakvih filtera.
Drugi koristan parametar je `startTime`. On filtrira rezultate istorije na osnovu vremena proteklog od početnog vremena. Na primer, ako se zada početno vreme od jedne nedelje, biće preuzeta istorija samo za proteklu nedelju. To je opcioni parametar, a podrazumevano je podešen na poslednja 24 sata.
Za preuzimanje rezultata, API pruža povratnu funkciju koja sadrži rezultate u nizu. Možete proći kroz niz i kreirati listu od njega.
for (const result of results) {
let liItem = document.createElement("li")
let link = document.createElement("a")
link.innerText = result.title
link.href = result.url
liItem.appendChild(link)
document.querySelector(".list").appendChild(liItem)
}
Chrome History API zahteva dozvolu „history“, koja mora biti definisana u manifest datoteci.
{
"manifest_version": 3,
"name": "History",
"description": "View Browsing History",
"version": "0.1",
"action": {
"default_popup": "index.html"
},
"permissions": [
"history"
]
}
Pokretanje Ekstenzije
Ovo je najlakši korak u kreiranju i izvršavanju Chrome ekstenzije. Kliknite na tri tačke u Chrome-ovoj traci sa radnjama i idite na „Upravljanje ekstenzijama“ u okviru „Ekstenzije“. Takođe možete direktno pristupiti ovoj stranici putem linka: `chrome://extensions/`.
Uključite režim za programere ako nije već uključen.
Zatim kliknite na „Učitaj raspakovano“ i izaberite fasciklu projekta u kojoj ste kreirali ekstenziju. Tako ćete moći da vidite svoju ekstenziju na listi.
Za izvršavanje ekstenzije, idite na Chrome traku sa radnjama i kliknite na ikonicu svoje ekstenzije.
To je to! Upravo ste napravili jednostavnu Chrome ekstenziju. Ukoliko želite više primera, možete pogledati primere Chrome ekstenzija u zvaničnom repozitorijumu Google Chrome-a.
Ako želite da objavite svoj dodatak za Chrome u Chrome Veb prodavnici, možete pratiti ove korake i platiti jednokratnu naknadu za registraciju ekstenzije u prodavnici.
Završne Reči
Kreiranje Chrome ekstenzija je zaista jednostavno ako ste upoznati sa osnovama izrade veb aplikacija. Sve se svodi na kreiranje `manifest` datoteke, a vaša aplikacija se transformiše u ekstenziju.
Sada kada znate kako da napravite Chrome ekstenziju, istražite neke od najboljih Chrome ekstenzija koje pomažu programerima.