Forståelse av Nettleserutvidelser
Nettleserutvidelser, også kjent som plugins, er verktøy som utvider funksjonaliteten til nettlesere. De fungerer ved å legge til ekstra funksjoner utover det nettleseren tilbyr som standard.
Hva er fordelene med en utvidelse sammenlignet med en nettapplikasjon? Utvidelser har tilgang til nettleserens API-er, noe som gir en høyere grad av kontroll over nettleserens oppførsel.
Med en nettleserutvidelse kan du:
- Tilpasse utseendet til nettleseren og fanebehandlingen.
- Opprette nye hurtigtaster for vanlige nettleseroperasjoner.
- Overvåke nettleseraktiviteten og nettrafikken.
Google Chrome tilbyr en egen nettbutikk der utviklere kan publisere sine Chrome-utvidelser. Selv om det kan virke komplisert å utvikle en utvidelse, er det faktisk basert på HTML, CSS og JavaScript, standardteknologier for webutvikling.
Ja, du kan lage en Chrome-utvidelse ved hjelp av kjente webteknologier som JavaScript. Denne veiledningen forklarer hvordan!
Utvikle din egen Chrome-utvidelse
Denne opplæringen gir en innføring i hvordan du kan lage en Chrome-utvidelse som leser gjennom nettleserloggen din og presenterer denne informasjonen i et popup-vindu.
Nødvendige filer
Den mest grunnleggende filen for å skape en Chrome-utvidelse er manifest.json-filen. Alt annet du koder er i prinsippet som å lage en hvilken som helst webapplikasjon.
Opprettelse av Manifest.json-filen
Denne filen inneholder konfigurasjonen og funksjonaliteten for utvidelsen. Her er et standardeksempel på hvordan en manifestfil kan se ut:
{
"manifest_version": 3,
"name": "Historikk",
"description": "Se gjennom nettleserloggen",
"version": "0.1",
"action": {
"default_popup": "index.html"
}
}
Den nyeste versjonen av manifestfilen er v3, som ifølge Chrome, gir bedre sikkerhet, personvern og ytelse. Den gjør det også mulig for utvidelser å bruke åpne webteknologier som service workers og løfter.
Manifestfilen inneholder en «action» egenskap, som spesifiserer hvilken HTML-fil som skal åpnes i popup-vinduet når brukeren trykker på utvidelsesikonet. Egenskapen «default_icon» brukes til å angi standardikonet for utvidelsen.
Konstruksjon av Applikasjonen
Nå er det på tide å skape selve applikasjonen, som vil bli vist som et popup-vindu. Dette er i praksis en vanlig webapplikasjon.
Først må du lage en inngangsfil, som du refererer til i «default_popup»-egenskapen i manifestet. I dette eksempelet har vi opprettet en fil kalt index.html.
<!DOCTYPE html>
<html lang="no">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chrome Utvidelse</title>
<link rel="stylesheet" href="https://wilku.top/how-to-create-a-chrome-extension-from-scratch-in-3-steps/style.css">
</head>
<body>
<h2>Nettleserhistorikk</h2>
<ul class="list"></ul>
<script src="./app.js"></script>
</body>
</html>
Et stilark er lagt til for å gi siden et presentabelt utseende i popup-vinduet. Det er også en JavaScript-fil som håndterer funksjonaliteten til utvidelsen.
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()
})
Denne koden bruker Chromes historikk-API for å hente nettleserloggen og vise den i popup-vinduet. Når en bruker klikker på utvidelsesikonet, utløses hendelsen «DOMContentLoaded», og funksjonen «searchHistory» blir kalt med den spesifikke koden for å hente loggen.
Søkemetoden i historikk-API-et krever en parameter for tekst, som fungerer som et søkefilter. Om du lar denne parameteren være tom, hentes hele loggen uten filtrering.
En annen nyttig parameter er «startTime», som filtrerer resultater basert på starttiden. For eksempel kan man begrense historikken til den siste uken. Denne parameteren er valgfri og henter som standard historikken fra de siste 24 timene.
API-et bruker en tilbakringningsfunksjon for å returnere resultatene i en matrise, som du så kan bruke til å lage en liste.
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)
}
For at historikk-API-et skal fungere i Chrome, kreves det «historikk»-tillatelse, som må defineres i manifestfilen:
{
"manifest_version": 3,
"name": "Historikk",
"description": "Se gjennom nettleserloggen",
"version": "0.1",
"action": {
"default_popup": "index.html"
},
"permissions": [
"history"
]
}
Kjøring av Utvidelsen
Dette er det enkleste steget i prosessen. I Chrome, klikk på de tre prikkene i handlinglinjen, velg «Flere verktøy», og deretter «Utvidelser». Du kan også skrive chrome://extensions/ i adresselinjen.
Aktiver utviklermodus hvis den ikke allerede er på.
Trykk på «Last inn upakket» og velg mappen der du har lagret prosjektet ditt. Da vil du se utvidelsen din i listen.
For å bruke utvidelsen, trykk på ikonet i handlingslinjen til Chrome.
Det var alt! Du har nettopp laget en enkel Chrome-utvidelse. Hvis du ønsker å se flere eksempler, kan du besøke Chrome-utvidelse-eksempler på det offisielle Google Chrome-depotet.
Hvis du ønsker å publisere din Chrome-utvidelse i Chrome Web Store, følg denne veiledningen og betal en registreringsavgift for å få den lagt til i butikken.
Avsluttende Tanker
Det er enkelt å skape en Chrome-utvidelse hvis du har grunnleggende kunnskap om webutvikling. Det dreier seg i stor grad om å lage en manifestfil, og vips, webapplikasjonen din er omgjort til en utvidelse.
Nå som du har lært å lage en Chrome-utvidelse, anbefaler vi at du utforsker noen av de beste Chrome-utvidelsene som kan hjelpe utviklere.