Har du någonsin varit missnöjd med funktionerna som följer med din webbläsare? Även med timmar av genomsökning av Google Web Store under bältet, är det inte alltid en enkel fråga att trycka på "ladda ner" för att förbättra din webbsurfupplevelse.

Det är här webbläsartillägg kommer in. I den här artikeln kommer vi att undersöka processen att bygga ditt alldeles egna DIY Google Chrome-tillägg från grunden.

Vad är ett Google Chrome-tillägg?

Modern webbläsare som Google Chrome kommer med en rad funktioner som gör dem enkla att använda och kan möta behoven hos de flesta användare. Att utöka dessa lagerfunktioner kan dock ge massor av olika fördelar. Det är därför webbläsarutvecklare vanligtvis gör det möjligt att skapa tillägg, tillägg och plugin-program för dem.

Google Chrome erbjuder den här funktionen, vilket gör det enkelt för alla med erfarenhet av webbutveckling att skapa sina egna Chrome-tillägg. Du kan skapa ett tillägg med HTML, JavaScript och CSS, precis som många webbplatser.

Till skillnad från en webbplats kan tillägg köras i bakgrunden medan du surfar, ibland till och med interagera med de webbplatser du besöker.

instagram viewer

Vad kommer vårt Google Chrome-tillägg att göra?

Vi kommer att bygga ett enkelt Chrome-tillägg som gör att du kan besöka webbplatsen Använd och göra en slumpmässig sökning baserat på artikelkategorierna som finns på webbplatsen. Det här är ett snabbt och enkelt projekt, men du kommer fortfarande att lära dig mycket.

Du kommer att lära dig hur

  • Skapa ett Google Chrome-tillägg
  • Infoga anpassad kod på webbsidor med ett Chrome-tillägg
  • Skapa evenemangslyssnare och simulera klick
  • Generera slumpmässiga tal
  • Arbeta med arrayer och variabler

Bygg din egen DIY Chrome-tillägg

Google har gjort det förvånansvärt enkelt att skapa din egen Chrome-tillägg, så det tar inte lång tid innan du har något som fungerar. Att följa stegen nedan tar bara 10 till 15 minuter men vi uppmuntrar dig att experimentera med din egen kod också.

Steg 1: Skapa filerna

Du kan lagra ditt tillägg på din egen lokala dator när du inte planerar att distribuera det. Vi behöver bara skapa fyra olika filer för att skapa vårt tillägg; en HTML-fil, en CSS-fil, en JavaScript-fil och en JSON-fil.

Vi kallade våra filer index.html, style.css, script.js och manifest.json. Manifestfilen måste ha detta namn för att fungera korrekt, men du kan ge de andra vilka namn du vill, så länge du ändrar din kod i enlighet med detta.

Du bör placera dessa filer i samma rotmapp.

Steg 2: Bygg manifestfilen

Manifestfilen kommer med alla Google Chrome-tillägg. Det ger information om tillägget till Chrome samtidigt som det gör några grundläggande inställningar. Den här filen måste innehålla ett namn, versionsnummer, beskrivning och en manifestversion. Vi har också inkluderat behörigheter och en åtgärd som laddas index.html som popup-fönstret som visas för tillägget.

{
"namn": "MakeUseOf.com Automatiserad sökning",
"version": "1.0.0",
"beskrivning": "Ett sökverktyg för att hitta intressanta artiklar",
"manifest_version": 3,
"författare": "Samuel Garbett",
"behörigheter": ["lagring", "deklarativt innehåll", "aktivfliken", "skript"],
"host_permissions": [""],
"handling":{
"default_popup": "index.html",
"default_title": "MUO Autosökning"
 }
}

Steg 3: Bygg HTML och CSS

Innan vi kan börja skriva vårt skript måste vi skapa ett grundläggande användargränssnitt med HTML och CSS. Du kan använda en CSS-bibliotek som Bootstrap för att slippa skapa din egen, men vi behöver bara ett par regler för vår förlängning.

Vår index.html-fil innehåller html-, head- och body-taggar. Head-taggen innehåller en sidrubrik och en länk till vår stilmall, medan kroppen är hem för en h1-tagg, en knapp som tar dig till MakeUseOf.com, och en annan knapp som vi kommer att använda som en utlösare för en manus. En skripttagg i slutet av dokumentet innehåller script.js fil.

<html>
<huvud>
<titel>MUO Autosökning</title>
<meta teckenuppsättning="utf-8">
<länk rel="stilmall" href="style.css">
</head>
<kropp>
<h1>MUO Autosökning</h1>
<a href="https://www.makeuseof.com/" target="_tom"><knapp id="knapp Ett">Gå till MakeUseOf.com</button></a>
<knapp id="knapp två">Starta slumpmässig sökning</button>
</body>
<script src="script.js"></script>
</html>

Vår CSS-fil är ännu enklare än vår HTML, och ändrar stilen på bara fem element. Vi har regler för våra html- och body-taggar, samt för h1-taggar och båda våra knappar.

html {
 bredd: 400px;
}
kropp {
 teckensnittsfamilj: Helvetica, sans-serif;
}
h1 {
 text-align: center;
}
#buttonOne {
 border-radie: 0px;
 bredd: 100%;
 stoppning: 10px 0px;
}
#buttonTwo {
 border-radie: 0px;
 bredd: 100%;
 stoppning: 10px 0px;
 margin-top: 10px;
}

Steg 4: Bygg JavaScript

Som det sista steget i denna process är det dags att bygga vår script.js-fil.

Den första funktionen i den här filen kallas insertScript(), är på plats för att infoga den andra funktionen (autoSearch()) till den aktuella sidan. Detta gör att vi kan manipulera sidan och använda sökfunktionerna som redan finns på MakeUseOf.com-webbplatsen.

Detta följs av en händelseavlyssnare som väntar tills knappen Starta slumpmässig sökning klickas innan den anropar funktionen vi utforskade ovan.

De autoSearch() funktionen är lite mer komplicerad. Det börjar med en array som innehåller 20 av kategorierna på MUO-webbplatsen, vilket ger oss ett bra urval att dra från när vi gör våra slumpmässiga sökningar. Efter detta använder vi Math.random() funktion för att generera ett slumptal mellan 0 och 19 för att välja en post från vår array.

Med vår sökterm i handen behöver vi nu simulera ett knapptryck för att öppna MUO-sökfältet. Vi använder först Chromes utvecklarkonsol för att hitta ID för sökknappen, och sedan lägger vi till detta i vår JavaScript-kod med klick() fungera.

Liksom sökknappen måste vi också hitta ID för sökfältet som visas, vilket gör att vi kan infoga den slumpmässiga söktermen vi har valt. Med detta komplett är det en enkel fråga att skicka in formuläret för att göra vår sökning.

// Denna funktion infogar vår autosökfunktion i sidans kod
fungerainsertScript() {
// Detta väljer den fokuserade fliken för operationen och passerar autosökningsfunktionen
 chrome.tabs.query({aktiva: Sann, aktuellt fönster: Sann}, flikar => {
krom.scripting.executeScript({mål: {tabId: tabs[0].id}, fungera: autosökning})
 })
// Detta stänger tilläggets popup-fönster för att välja webbplatsens sökfält
fönster.stänga();
}


// Detta är en händelseavlyssnare som upptäcker klick på vår "Start Slumpmässig Sök" knapp
document.getElementById('knapp två').addEventListener('klick', insertScript)


// Denna funktion väljer ett slumpmässigt ämne från en array och 
fungeraautosökning() {
// Detta är en array för att lagra våra söktermer
 const söktermer = ["PC och mobil", "Livsstil", "Hårdvara", "Windows", "Mac",
"Linux", "Android", "Äpple", "Internet", "säkerhet",
"Programmering", "Underhållning", "Produktivitet", "Karriär", "Kreativ",
"Spelande", "Sociala media", "Smart hem", "DIY", "Recension"];


// Detta genererar ett slumptal mellan 0 och 19
låta selectorNumber = Matematik.golv(Matematik.random() * 20);


// Detta använder slumptalet för att välja en post från arrayen
låta urval = sökvillkor[väljarnummer];


// Detta simulerar ett klick på MUO-webbplatsens sökikon
 document.getElementById("js-search").klick();


// Detta ställer in MUO-webbplatsens sökfält som en variabel
var sökfält = dokumentera.getElementById("js-search-input");


// Detta infogar vår slumpmässiga sökterm i sökfältet
 searchBar.value = sökBar.value + urval;
// Detta avslutar processen genom att aktivera webbformuläret
 document.getElementById("sökformulär2").Skicka in();
}

Steg 5: Lägga till dina filer i Chrome://extensions

Därefter är det dags att lägga till filerna du just skapade på Chrome-tilläggssidan. När du har gjort detta kommer tillägget att vara tillgängligt i Chrome och kommer att uppdatera sig själv när du gör ändringar i dina filer.

Öppna Google Chrome, gå till chrome://extensions och se till att skjutreglaget för utvecklarläge i det övre högra hörnet är på.

Klick Ladda upp packad i det övre vänstra hörnet, välj sedan den mapp du har sparat dina tilläggsfiler i och klicka Välj mapp.

Nu när ditt tillägg är laddat kan du klicka på pusselbitsikonen i det övre högra hörnet och fästa ditt tillägg i huvudaktivitetsfältet för enklare åtkomst.

Du bör nu kunna komma åt det färdiga tillägget i din webbläsare. Det är värt att komma ihåg att det här tillägget bara fungerar på MUO-webbplatsen eller på webbplatser med samma ID för deras sökknapp och -fält.

Bygga ett Google Chrome-tillägg

Den här artikeln skrapar bara på ytan av de möjliga funktionerna du kan bygga in i ditt eget Google Chrome-tillägg. Det är väl värt att utforska dina egna idéer när du har lärt dig grunderna.

Chrome-tillägg kan hjälpa dig att öka nivån på din surfning, men försök hålla dig borta från några av de kända skumma Chrome-tilläggen för säker och säker surfning.

6 skumma Google Chrome-tillägg som du bör avinstallera ASAP

Läs Nästa

Dela med sigTweetDela med sigE-post

Relaterade ämnen

  • Programmering
  • Webbläsartillägg
  • Webbutveckling
  • JavaScript

Om författaren

Samuel L. Garbett (44 artiklar publicerade)

Samuel är en brittisk teknikskribent med en passion för allt som har att göra med DIY. Efter att ha startat företag inom områdena webbutveckling och 3D-printing, tillsammans med att arbeta som författare i många år, erbjuder Samuel en unik inblick i teknikens värld. Han fokuserar främst på DIY-tekniska projekt, han älskar inget mer än att dela roliga och spännande idéer som du kan prova hemma. Utanför jobbet kan man vanligtvis hitta Samuel när han cyklar, spelar PC-spel eller försöker desperat kommunicera med sin krabba.

Mer från Samuel L. Garbett

Prenumerera på vårt nyhetsbrev

Gå med i vårt nyhetsbrev för tekniska tips, recensioner, gratis e-böcker och exklusiva erbjudanden!

Klicka här för att prenumerera