Nettleserutvidelser er ikke annet enn plugins som forbedrer funksjonaliteten til nettleseren. Med andre ord legger de til flere funksjoner til nettleserens grunnleggende funksjonalitet.
Men hvordan er en utvidelse mer nyttig enn en nettapp? Vel, fordi en utvidelse kan få tilgang til alle nettleser-API-ene, noe som gir deg mer kontroll over nettleseren.
Ved hjelp av en utvidelse kan du:
✅ Tilpass brukergrensesnittet til nettleseren og fanene.
✅ Legg til nye snarveier for nettleserhandlinger.
✅ Overvåk nettleseren og nettet nøye.
Google Chrome har også en nettbutikk der du kan være vert for Chrome-utvidelsene dine som alle kan bruke. Du tror kanskje at det er en skremmende oppgave å bygge en Chrome-utvidelse, men i virkeligheten er det bare HTML, CSS og JavaScript.
Ja, du kan bygge en Chrome-utvidelse ved å bruke enkle nettteknologier som JavaScript, og her er en veiledning om det samme!
Innholdsfortegnelse
Bygge en Chrome-utvidelse
I denne opplæringen lærer du hvordan du bygger en Chrome-utvidelse som analyserer nettleserloggen din og presenterer den for deg via en popup.
Nødvendige filer
Den eneste nødvendige filen for å bygge en Chrome-utvidelse er manifest.json-filen. Resten alt du koder er identisk med å bygge en nettapplikasjon.
Oppretter Manifest.json-fil
Denne spesielle filen definerer konfigurasjonen og funksjonaliteten til utvidelsen. Her er et eksempel på hvordan manifestfilen ser ut vanligvis:
{
"manifest_version": 3,
"name": "History",
"description": "View Browsing History",
"version": "0.1",
"action": {
"default_popup": "index.html"
}
}
Den siste versjonen av manifestfilen i skrivende stund er v3, som, ifølge Chromeintroduserer forbedringer av utvidelsessikkerhet, personvern og ytelse og lar utvidelser bruke åpne nettteknologier som servicearbeidere og løfter.
Du kan også se en handlingsegenskap i manifestfilen. Den definerer hvilken HTML-fil du vil åpne i popup-vinduet når brukeren klikker på utvidelsesikonet. Det er også en default_icon-egenskap som lar deg definere standard utvidelsesikonet som skal vises.
Bygge applikasjonen
Det er på tide å bygge applikasjonen, som vil vises til sluttbrukeren som en popup. Det har ingenting med utvidelser å gjøre. Snarere er det en vanlig nettapplikasjon.
Først må du opprette en oppføringsfil som du kan liste opp i manifestets default_popup-egenskap. Jeg har opprettet index.html som inngangspunkt for denne utvidelsen.
<!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>
Jeg har koblet til et stilark for å style siden slik at den ser bra ut i en popup. Bortsett fra det er det også en javascript-fil koblet til for å håndtere utvidelsens funksjonalitet.
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()
})
Det denne filen gjør er at den bruker Chromes historie-API for å spørre nettleserloggen og vise den i popup-vinduet. Når brukeren klikker på utvidelsesikonet, vil DOMContentLoaded-hendelsen bli utløst, og den vil kalle opp searchHistory-funksjonen, som inneholder den faktiske koden.
Søkemetoden i historikk-APIet godtar en obligatorisk parametertekst, som er søketeksten som du vil filtrere historikken på. Hvis du lar det være en tom streng, vil historikken bli returnert uten noen filtre.
En annen parameter som er nyttig er startTime-parameteren. Den filtrerer historieresultater basert på tiden som har gått siden starttidspunktet. For eksempel, hvis du gir en starttid på én uke, vil den kun hente historikken for den siste uken. Det er en valgfri parameter, og den har som standard de siste 24 timene.
For å hente resultatene tilbyr API en tilbakeringingsfunksjon som inneholder resultatene i en matrise. Du kan sløyfe over matrisen og lage en liste ut av den.
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)
}
Nå krever historikk-API-en i Chrome «historikk»-tillatelse, som må defineres i manifestfilen vår.
{
"manifest_version": 3,
"name": "History",
"description": "View Browsing History",
"version": "0.1",
"action": {
"default_popup": "index.html"
},
"permissions": [
"history"
]
}
Kjøre utvidelsen
Dette er det enkleste trinnet for å opprette og utføre en Chrome-utvidelse. Klikk på ellipsen i Chromes handlingslinje og gå til Administrer utvidelser under Utvidelser. Du kan også gå direkte til denne linken chrome://extensions/.
Slå på utviklermodus hvis den ikke er slått på.
Klikk deretter på Last ut pakket og velg deretter prosjektmappen du nettopp opprettet utvidelsen i. Ved å gjøre det vil du kunne se utvidelsen din i listen.
For å utføre utvidelsen, gå til Chrome-handlingslinjen og klikk på utvidelsen for listen.
Det er det; du har nettopp laget en enkel Chrome-utvidelse. Hvis du vil ha flere eksempler, kan du sjekke ut flere Eksempler på Chrome-utvidelser i det offisielle Google Chrome-depotet.
Hvis du vil publisere Chrome-utvidelsen til Chrome-nettbutikken, kan du Følg disse instruksjonene og betal en engangsavgift for å få din utvidelse registrert i butikken.
Siste ord
Det er veldig enkelt å lage en Chrome-utvidelse hvis du kan det grunnleggende om en hvilken som helst nettapplikasjon. Det er bare et spørsmål om å lage en manifestfil, og applikasjonen din blir konvertert til en utvidelse.
Nå som du vet hvordan du bygger en Chrome-utvidelse, sjekk ut de beste Chrome-utvidelsene for å hjelpe utviklere.