Har du noen gang vært misfornøyd med funksjonene som følger med nettleseren din? Selv med timevis med gjennomsøking av Google Nettmarked under beltet, er det ikke alltid en enkel sak å trykke på «last ned» for å forbedre surfeopplevelsen din.

Det er her nettleserutvidelser kommer inn. I denne artikkelen skal vi utforske prosessen med å bygge din egen DIY Google Chrome-utvidelse fra bunnen av.

Hva er en Google Chrome-utvidelse?

Moderne nettlesere som Google Chrome kommer med en rekke funksjoner som gjør dem enkle å bruke og i stand til å møte behovene til de fleste brukere. Utvidelse av disse lagerfunksjonene kan imidlertid komme med mange forskjellige fordeler. Dette er grunnen til at nettleserutviklere vanligvis gjør det mulig å lage utvidelser, tillegg og plug-ins for dem.

Google Chrome tilbyr denne funksjonen, noe som gjør det enkelt for alle med nettutviklingserfaring å lage sine egne Chrome-utvidelser. Du kan lage en utvidelse ved å bruke HTML, JavaScript og CSS, akkurat som mange nettsteder.

instagram viewer

I motsetning til et nettsted, kan utvidelser kjøre i bakgrunnen mens du surfer, noen ganger til og med samhandle med nettstedene du besøker.

Hva vil Google Chrome-utvidelsen vår gjøre?

Vi skal bygge en enkel Chrome-utvidelse som lar deg besøke nettstedet Gjør bruk og foreta et tilfeldig søk basert på artikkelkategoriene som finnes på nettstedet. Dette er et raskt og enkelt prosjekt, men du vil likevel lære mye.

Du vil lære hvordan

  • Opprett en Google Chrome-utvidelse
  • Sett inn egendefinert kode på nettsider ved hjelp av en Chrome-utvidelse
  • Lag hendelseslyttere og simuler klikk
  • Generer tilfeldige tall
  • Arbeid med matriser og variabler

Bygg din egen DIY Chrome-utvidelse

Google har gjort det overraskende enkelt å lage din egen Chrome-utvidelser, så det tar ikke lang tid før du har noe som fungerer. Å følge trinnene nedenfor vil bare ta 10 til 15 minutter, men vi oppfordrer deg til å eksperimentere med din egen kode også.

Trinn 1: Lage filene

Du kan lagre utvidelsen din på din egen lokale maskin når du ikke planlegger å distribuere den. Vi trenger bare å lage fire forskjellige filer for å lage utvidelsen vår; en HTML-fil, en CSS-fil, en JavaScript-fil og en JSON-fil.

Vi kalte filene våre index.html, style.css, script.js og manifest.json. Manifestfilen må ha dette navnet for å fungere ordentlig, men du kan gi de andre navnene du vil, så lenge du endrer koden din tilsvarende.

Du bør plassere disse filene i samme rotmappe.

Trinn 2: Bygg manifestfilen

Manifestfilen følger med alle Google Chrome-utvidelser. Den gir informasjon om utvidelsen til Chrome samtidig som den setter noen grunnleggende innstillinger på plass. Denne filen må inneholde et navn, versjonsnummer, beskrivelse og en manifestversjon. Vi har også inkludert tillatelser og en handling som lastes inn index.html som popup-vinduet som vises for utvidelsen.

{
"Navn": "MakeUseOf.com Automatisert søk",
"versjon": "1.0.0",
"beskrivelse": "Et søkeverktøy for å finne interessante artikler",
"manifest_version": 3,
"forfatter": "Samuel Garbett",
"tillatelser": ["Oppbevaring", "deklarativt innhold", "aktivfane", "skripting"],
"host_permissions": [""],
"handling":{
"default_popup": "index.html",
"default_title": "MUO Autosøk"
 }
}

Trinn 3: Bygg HTML og CSS

Før vi kan begynne å skrive skriptet vårt, må vi lage et grunnleggende brukergrensesnitt ved hjelp av HTML og CSS. Du kan bruke en CSS-bibliotek som Bootstrap for å unngå å lage din egen, men vi trenger bare et par regler for utvidelsen vår.

index.html-filen vår inneholder html-, head- og body-tagger. Head-taggen inneholder en sidetittel og en lenke til stilarket vårt, mens brødteksten er hjemmet til en h1-tag, en knapp som tar deg til MakeUseOf.com, og en annen knapp som vi skal bruke som en utløser for en manus. En skriptkode rett på slutten av dokumentet inkluderer script.js fil.

<html>
<hode>
<tittel>MUO Autosøk</title>
<metategnsett="utf-8">
<link rel="stilark" href="style.css">
</head>
<kropp>
<h1>MUO Autosøk</h1>
<a href="https://www.makeuseof.com/" target="_blank"><knapp id="knapp én">Gå til MakeUseOf.com</button></en>
<knapp id="knapp to">Start tilfeldig søk</button>
</body>
<script src="script.js"></script>
</html>

CSS-filen vår er enda enklere enn HTML-en vår, og endrer stilen til bare fem elementer. Vi har regler for våre html- og body-tagger, samt for h1-tagger og begge knappene våre.

html {
 bredde: 400px;
}
kropp {
 font-familie: Helvetica, sans-serif;
}
h1 {
 tekst-align: center;
}
#buttonOne {
 border-radius: 0px;
 bredde: 100 %;
 polstring: 10px 0px;
}
#buttonTwo {
 border-radius: 0px;
 bredde: 100 %;
 polstring: 10px 0px;
 marg-top: 10px;
}

Trinn 4: Bygg JavaScript

Som det siste trinnet i denne prosessen er det på tide å bygge script.js-filen vår.

Den første funksjonen i denne filen, kalt insertScript(), er på plass for å sette inn den andre funksjonen (autosøk()) inn på gjeldende side. Dette lar oss manipulere siden og bruke søkefunksjonene som allerede finnes på MakeUseOf.com-siden.

Dette etterfølges av en hendelseslytter som venter til Start tilfeldig søk-knappen er klikket før den kaller opp funksjonen vi utforsket ovenfor.

De autosøk() funksjonen er litt mer komplisert. Den begynner med en matrise som inneholder 20 av kategoriene på MUO-nettsiden, og gir oss et godt utvalg å trekke fra når vi gjør tilfeldige søk. Etter dette bruker vi Math.random() funksjon for å generere et tilfeldig tall mellom 0 og 19 for å velge en oppføring fra matrisen vår.

Med søkeordet vårt i hånden, må vi nå simulere et knappeklikk for å åpne MUO-søkefeltet. Vi bruker først Chrome-utviklerkonsollen for å finne ID-en til søkeknappen, og deretter legger vi denne til JavaScript-koden vår med klikk() funksjon.

I likhet med søkeknappen må vi også finne ID-en til søkefeltet som vises, slik at vi kan sette inn det tilfeldige søkeordet vi har valgt. Med dette komplett, er det en enkel sak å sende inn skjemaet for å gjøre vårt søk.

// Denne funksjonen setter inn autosøk-funksjonen vår i sidens kode
funksjoninsertScript() {
// Dette velger den fokuserte fanen for operasjonen og passerer autosøk-funksjonen
 chrome.tabs.query({aktiv: ekte, gjeldende vindu: ekte}, faner => {
krom.scripting.executeScript({mål: {tabId: tabs[0].id}, funksjon: autosøk})
 })
// Dette lukker utvidelsespopupen for å velge søkefeltet på nettstedet
vindu.Lukk();
}


// Dette er en hendelseslytter som oppdager klikk på vår "Start Tilfeldig Søk"-knappen
document.getElementById('knapp to').addEventListener('klikk', insertScript)


// Denne funksjonen velger et tilfeldig emne fra en matrise og 
funksjonautosøk() {
// Dette er en rekke for å lagre søkeordene våre
 const searchTerms = ["PC og mobil", "Livsstil", "Maskinvare", "Windows", "Mac",
"Linux", "Android", "eple", "Internett", "Sikkerhet",
"Programmering", "Underholdning", "Produktivitet", "Karriere", "Kreativ",
"Gaming", "Sosiale medier", "Smart hjem", "DIY", "Anmeldelse"];


// Dette genererer et tilfeldig tall mellom 0 og 19
la selectorNumber = Matte.gulv(Matte.random() * 20);


// Dette bruker det tilfeldige tallet for å velge en oppføring fra matrisen
la utvalg = søketermer[selektornummer];


// Dette simulerer et klikk på MUO-nettstedets søkeikon
 document.getElementById("js-søk").klikk();


// Dette setter søkefeltet på MUO-nettstedet som en variabel
var søkefelt = dokument.getElementById("js-search-input");


// Dette setter inn vårt tilfeldige søkeord i søkefeltet
 searchBar.value = searchBar.value + utvalg;
// Dette fullfører prosessen ved å aktivere nettsideskjemaet
 document.getElementById("søkeskjema2").sende inn();
}

Trinn 5: Legg til filene dine i Chrome://extensions

Deretter er det på tide å legge til filene du nettopp opprettet på Chrome-utvidelsessiden. Når du har gjort dette, vil utvidelsen være tilgjengelig i Chrome og vil oppdatere seg selv når du gjør endringer i filene dine.

Åpne Google Chrome, gå til chrome://extensions og sørg for at glidebryteren for utviklermodus i øverste høyre hjørne er på.

Klikk Last utpakket i øverste venstre hjørne, velg deretter mappen du har lagret utvidelsesfilene i og klikk Velg mappe.

Nå som utvidelsen din er lastet inn, kan du klikke på puslespillbrikkeikonet øverst til høyre og feste utvidelsen til hovedoppgavelinjen for enklere tilgang.

Du skal nå kunne få tilgang til den fullførte utvidelsen i nettleseren din. Det er verdt å huske på at denne utvidelsen bare vil fungere på MUO-nettstedet eller nettsteder med samme ID for søkeknappen og -linjen.

Bygge en Google Chrome-utvidelse

Denne artikkelen skraper bare i overflaten av de mulige funksjonene du kan bygge inn i din egen Google Chrome-utvidelse. Det er vel verdt å utforske dine egne ideer når du har lært det grunnleggende.

Chrome-utvidelser kan hjelpe deg med å øke nettlesingen, men prøv å holde deg unna noen av de kjente lyssky Chrome-utvidelsene for trygg og sikker surfing.

6 lyssky Google Chrome-utvidelser du bør avinstallere ASAP

Les Neste

DelekvitringDeleE-post

Relaterte temaer

  • Programmering
  • Nettleserutvidelser
  • Webutvikling
  • JavaScript

Om forfatteren

Samuel L. Garbett (44 artikler publisert)

Samuel er en britisk-basert teknologiskribent med en lidenskap for alt som er DIY. Etter å ha startet virksomheter innen webutvikling og 3D-printing, sammen med å ha jobbet som forfatter i mange år, tilbyr Samuel et unikt innblikk i teknologiens verden. Han fokuserer hovedsakelig på DIY-teknologiske prosjekter, og elsker ingenting mer enn å dele morsomme og spennende ideer som du kan prøve hjemme. Utenom jobben kan Samuel vanligvis bli funnet på sykkel, spiller PC-videospill eller desperat forsøk på å kommunisere med kjæledyrkrabben sin.

Mer fra Samuel L. Garbett

Abonner på vårt nyhetsbrev

Bli med i vårt nyhetsbrev for tekniske tips, anmeldelser, gratis e-bøker og eksklusive tilbud!

Klikk her for å abonnere