Webbläsartillägg, eller plugins, utökar webbläsarens kapacitet. De introducerar nya funktioner utöver webbläsarens grundläggande funktionalitet.
Vad gör ett tillägg mer användbart än en webbapplikation? Ett tillägg har tillgång till webbläsarens API:er, vilket ger användaren mer kontroll över webbläsaren.
Med ett tillägg kan du:
✅ Anpassa webbläsarens och flikarnas gränssnitt.
✅ Lägga till nya genvägar för webbläsaråtgärder.
✅ Övervaka webbläsaren och webbaktivitet i detalj.
Google Chrome erbjuder en webbutik där utvecklare kan publicera sina Chrome-tillägg. Att skapa ett Chrome-tillägg kan verka svårt, men det bygger på vanliga webbtekniker som HTML, CSS och JavaScript.
Ja, du kan bygga ett Chrome-tillägg med JavaScript och andra grundläggande webbtekniker. Här är en guide som visar hur!
Skapa ett Chrome-tillägg
I den här guiden lär du dig att utveckla ett Chrome-tillägg som analyserar din webbhistorik och presenterar den i en popup-ruta.
Nödvändiga filer
Den enda obligatoriska filen för ett Chrome-tillägg är `manifest.json`. All annan kod är densamma som för en webbapplikation.
Skapa manifest.json-filen
Denna fil definierar tilläggets konfiguration och funktioner. Här är ett typiskt exempel:
{
"manifest_version": 3,
"name": "Historik",
"description": "Visa webbhistorik",
"version": "0.1",
"action": {
"default_popup": "index.html"
}
}
Den senaste manifestversionen är v3 som, enligt Chrome, förbättrar tilläggssäkerhet, integritet, prestanda och möjliggör användning av moderna webbtekniker som service workers och löften.
Du ser även `action`-egenskapen. Den anger vilken HTML-fil som ska öppnas i popup-fönstret när användaren klickar på tilläggets ikon. Det finns också en `default_icon`-egenskap för att definiera den standardikon som visas för tillägget.
Utveckla applikationen
Nu är det dags att bygga applikationen som användaren ser som en popup. Denna del är lik en vanlig webbapplikation.
Först måste du skapa en startfil som du anger i manifestets `default_popup`-egenskap. I det här exemplet har jag valt `index.html` som startpunkt.
<!DOCTYPE html>
<html lang="sv">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chrome-tillägg</title>
<link rel="stylesheet" href="https://wilku.top/how-to-create-a-chrome-extension-from-scratch-in-3-steps/style.css">
</head>
<body>
<h2>Webbhistorik</h2>
<ul class="list"></ul>
<script src="./app.js"></script>
</body>
</html>
En stilmall används för att göra popup-fönstret snyggt. En JavaScript-fil länkas också för att hantera tilläggets funktioner.
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()
})
JavaScript-koden använder Chrome-historik-API:et för att hämta webbhistoriken och visa den i popup-fönstret. När användaren klickar på tilläggsikonen aktiveras `DOMContentLoaded`-händelsen och anropar `searchHistory`-funktionen.
Historik-API:ets `search`-metod tar en obligatorisk parameter, `text`, som är den söktext du vill filtrera historiken med. Om den lämnas tom, returneras all historik.
`startTime`-parametern filtrerar historikresultat baserat på tiden sedan den angivna starttiden. Om du anger en starttid på en vecka, hämtas historiken för den senaste veckan. Den är valfri och har som standard de senaste 24 timmarna.
API:et använder en callback-funktion för att returnera resultaten i en array. Du kan sedan iterera genom arrayen och skapa en lista.
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-historik-API:et kräver tillståndet `”history”`, vilket måste anges i manifestfilen.
{
"manifest_version": 3,
"name": "Historik",
"description": "Visa webbhistorik",
"version": "0.1",
"action": {
"default_popup": "index.html"
},
"permissions": [
"history"
]
}
Kör tillägget
Detta är det enklaste steget. I Chrome, klicka på ellipsen i åtgärdsfältet, välj ”Fler verktyg” och sedan ”Tillägg”, eller gå direkt till `chrome://extensions/`.
Aktivera utvecklarläget om det inte redan är på.
Klicka på ”Läs in utpackad” och välj projektmappen för tillägget. Ditt tillägg kommer nu att visas i listan över tillägg.
Klicka på tilläggets ikon i Chromes åtgärdsfält för att köra det.
Grattis! Du har skapat ett enkelt Chrome-tillägg. Fler exempel finns i Googles officiella Chrome-tilläggsarkiv.
Om du vill publicera ditt Chrome-tillägg i Chrome Web Store, följ dessa steg och betala en engångsavgift för att registrera tillägget.
Slutord
Att skapa ett Chrome-tillägg är inte svårt om du kan grunderna i webbapplikationsutveckling. Det handlar bara om att skapa en manifestfil, och din applikation blir ett tillägg.
Nu när du vet hur man utvecklar ett Chrome-tillägg, kan du kolla in de bästa Chrome-tilläggen för utvecklare.