Har du nogensinde været utilfreds med de funktioner, der følger med din webbrowser? Selv med timevis af gennemsøgning af Google Web Store under dit bælte, er det ikke altid et simpelt spørgsmål om at trykke på "download" for at forbedre din websurfingoplevelse.

Det er her browserudvidelser kommer ind. I denne artikel vil vi udforske processen med at bygge din helt egen DIY Google Chrome-udvidelse fra bunden.

Hvad er en Google Chrome-udvidelse?

Moderne webbrowsere som Google Chrome kommer med en række funktioner, der gør dem nemme at bruge og i stand til at opfylde de fleste brugeres behov. Udvidelse af disse lagerfunktioner kan dog komme med masser af forskellige fordele. Dette er grunden til, at browserudviklere normalt gør det muligt at oprette udvidelser, tilføjelser og plug-ins til dem.

Google Chrome tilbyder denne funktion, hvilket gør det nemt for alle med erfaring i webudvikling at oprette deres egne Chrome-udvidelser. Du kan lave en udvidelse ved hjælp af HTML, JavaScript og CSS, ligesom mange websteder.

instagram viewer

I modsætning til et websted kan udvidelser køre i baggrunden, mens du browser, nogle gange endda interagere med de websteder, du besøger.

Hvad vil vores Google Chrome-udvidelse gøre?

Vi skal bygge en simpel Chrome-udvidelse, der giver dig mulighed for at besøge webstedet Gør brug af og foretage en tilfældig søgning baseret på artikelkategorierne, der findes på webstedet. Dette er et hurtigt og nemt projekt, men du vil stadig lære meget.

Du vil lære hvordan

  • Opret en Google Chrome-udvidelse
  • Indsæt tilpasset kode på websider ved hjælp af en Chrome-udvidelse
  • Opret begivenhedslyttere og simuler klik
  • Generer tilfældige tal
  • Arbejd med arrays og variabler

Byg din egen DIY Chrome-udvidelse

Google har gjort det overraskende nemt at oprette din egen Chrome-udvidelser, så det varer ikke længe, ​​før du har noget, der virker. Det tager kun 10 til 15 minutter at følge nedenstående trin, men vi opfordrer dig til også at eksperimentere med din egen kode.

Trin 1: Oprettelse af filerne

Du kan gemme din udvidelse på din egen lokale maskine, når du ikke planlægger at distribuere den. Vi behøver kun at oprette fire forskellige filer for at oprette vores udvidelse; en HTML-fil, en CSS-fil, en JavaScript-fil og en JSON-fil.

Vi kaldte vores filer index.html, style.css, script.js og manifest.json. Manifestfilen skal have dette navn for at fungere korrekt, men du kan give de andre de navne, du vil, så længe du ændrer din kode i overensstemmelse hermed.

Du bør placere disse filer i den samme rodmappe.

Trin 2: Opbygning af manifestfilen

Manifestfilen følger med alle Google Chrome-udvidelser. Den giver oplysninger om udvidelsen til Chrome, mens den også sætter nogle grundlæggende indstillinger på plads. Denne fil skal indeholde et navn, versionsnummer, beskrivelse og en manifestversion. Vi har også inkluderet tilladelser og en handling, der indlæses index.html som pop op-vinduet, der vises for udvidelsen.

{
"navn": "MakeUseOf.com Automatiseret søgning",
"version": "1.0.0",
"beskrivelse": "Et søgeværktøj til at finde interessante artikler",
"manifest_version": 3,
"forfatter": "Samuel Garbett",
"tilladelser": ["opbevaring", "deklarativt indhold", "aktivfane", "scripting"],
"host_permissions": [""],
"handling":{
"default_popup": "index.html",
"default_title": "MUO Autosøgning"
 }
}

Trin 3: Opbygning af HTML og CSS

Før vi kan begynde at skrive vores script, skal vi oprette en grundlæggende brugergrænseflade ved hjælp af HTML og CSS. Du kan bruge en CSS-bibliotek som Bootstrap for at undgå at oprette din egen, men vi mangler kun et par regler for vores udvidelse.

Vores index.html-fil indeholder html-, head- og body-tags. Head-tagget indeholder en sidetitel og et link til vores stylesheet, mens kroppen er hjemsted for et h1-tag, en knap, der fører dig til MakeUseOf.com, og en anden knap, som vi vil bruge som en udløser for en manuskript. Et script-tag lige i slutningen af ​​dokumentet inkluderer script.js fil.

<html>
<hoved>
<titel>MUO Autosøgning</title>
<meta-tegnsæt="utf-8">
<link rel="stilark" href="style.css">
</head>
<legeme>
<h1>MUO Autosøgning</h1>
<a href="https://www.makeuseof.com/" mål="_blank"><knap id="knap en">Gå til MakeUseOf.com</button></en>
<knap id="knap to">Start tilfældig søgning</button>
</body>
<script src="script.js"></script>
</html>

Vores CSS-fil er endnu enklere end vores HTML og ændrer stilen på kun fem elementer. Vi har regler for vores html og body tags, samt for h1 tags og begge vores knapper.

html {
 bredde: 400px;
}
krop {
 skrifttype-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;
 margin-top: 10px;
}

Trin 4: Opbygning af JavaScript

Som det sidste trin i denne proces er det tid til at bygge vores script.js-fil.

Den første funktion i denne fil, kaldet insertScript(), er på plads for at indsætte den anden funktion (autoSearch()) ind på den aktuelle side. Dette giver os mulighed for at manipulere siden og bruge de søgefunktioner, der allerede er til stede på MakeUseOf.com-siden.

Dette efterfølges af en begivenhedslytter, der venter, indtil knappen Start tilfældig søgning er klikket, før den kalder den funktion, vi udforskede ovenfor.

Det autoSearch() funktionen er lidt mere kompliceret. Det begynder med et array, der indeholder 20 af kategorierne på MUO-webstedet, hvilket giver os en god prøve at trække fra, når vi foretager vores tilfældige søgninger. Efter dette bruger vi Math.random() funktion til at generere et tilfældigt tal mellem 0 og 19 for at vælge en post fra vores array.

Med vores søgeterm i hånden skal vi nu simulere et knapklik for at åbne MUO-søgelinjen. Vi bruger først Chrome-udviklerkonsollen til at finde søgeknappens ID, og ​​derefter tilføjer vi dette til vores JavaScript-kode med klik() fungere.

Ligesom søgeknappen skal vi også finde ID'et for den søgelinje, der vises, så vi kan indsætte den tilfældige søgeterm, vi har valgt. Med dette komplette er det et simpelt spørgsmål om at indsende formularen for at foretage vores søgning.

// Denne funktion indsætter vores autoSearch-funktion i sidens kode
fungereindsæt Script() {
// Dette vælger den fokuserede fane for handlingen og passerer autosøgningsfunktionen
 chrome.tabs.query({aktiv: rigtigt, nuværende vindue: rigtigt}, faner => {
krom.scripting.executeScript({mål: {tabId: tabs[0].id}, fungere: autosøgning})
 })
// Dette lukker udvidelses-pop-up'et for at vælge webstedets søgelinje
vindue.tæt();
}


// Dette er en begivenhedslytter, der registrerer klik på vores "Start Tilfældig Søg" knappen
document.getElementById('knap to').addEventListener('klik', insertScript)


// Denne funktion vælger et tilfældigt emne fra et array og 
fungereautosøgning() {
// Dette er et array til at gemme vores søgetermer
 const searchTerms = ["PC og mobil", "Levevis", "Hardware", "Windows", "Mac",
"Linux", "Android", "Æble", "Internettet", "Sikkerhed",
"Programmering", "Underholdning", "Produktivitet", "Karriere", "Kreativ",
"Spil", "Sociale medier", "Smart hjem", "gør det selv", "Anmeldelse"];


// Dette genererer et tilfældigt tal mellem 0 og 19
lade vælgerNumber = Matematik.etage(Matematik.random() * 20);


// Dette bruger det tilfældige tal til at vælge en post fra arrayet
lade udvælgelse = søgeTerms[vælgerNumber];


// Dette simulerer et klik på MUO-webstedets søgeikon
 document.getElementById("js-search").klik();


// Dette indstiller MUO-webstedets søgelinje som en variabel
var søgebjælke = dokument.getElementById("js-search-input");


// Dette indsætter vores tilfældige søgeord i søgefeltet
 searchBar.value = searchBar.value + markering;
// Dette afslutter processen ved at aktivere hjemmesideformularen
 document.getElementById("søgeform 2").Indsend();
}

Trin 5: Tilføjelse af dine filer til Chrome://extensions

Dernæst er det tid til at tilføje de filer, du lige har oprettet, til Chrome-udvidelsessiden. Når du har gjort dette, vil udvidelsen være tilgængelig i Chrome og vil opdatere sig selv, hver gang du foretager ændringer i dine filer.

Åbn Google Chrome, gå til chrome://extensions, og sørg for, at skyderen for udviklertilstand i øverste højre hjørne er tændt.

Klik Last udpakket i øverste venstre hjørne, vælg derefter den mappe, du har gemt dine udvidelsesfiler i, og klik Vælg Mappe.

Nu hvor din udvidelse er indlæst, kan du klikke på puslespilsbrikkens ikon i øverste højre hjørne og fastgøre din udvidelse til hovedproceslinjen for lettere adgang.

Du skulle nu kunne få adgang til den færdige udvidelse i din browser. Det er værd at huske på, at denne udvidelse kun vil fungere på MUO-webstedet eller websteder med samme ID for deres søgeknap og bjælke.

Opbygning af en Google Chrome-udvidelse

Denne artikel ridser kun i overfladen af ​​de mulige funktioner, du kan indbygge i din egen Google Chrome-udvidelse. Det er værd at udforske dine egne ideer, når du har lært det grundlæggende.

Chrome-udvidelser kan hjælpe dig med at øge niveauet for din browsing, men prøv at holde dig væk fra nogle af de kendte lyssky Chrome-udvidelser for sikker og sikker browsing.

6 lyssky Google Chrome-udvidelser, du bør afinstallere ASAP

Læs Næste

DelTweetDelE-mail

Relaterede emner

  • Programmering
  • Browserudvidelser
  • Web-udvikling
  • JavaScript

Om forfatteren

Samuel L. Garbett (44 artikler udgivet)

Samuel er en britisk-baseret teknologiskribent med en passion for alt, hvad der gør-det-selv. Efter at have startet virksomheder inden for webudvikling og 3D-print, sammen med arbejdet som forfatter i mange år, tilbyder Samuel et unikt indblik i teknologiens verden. Han fokuserer hovedsageligt på DIY tech-projekter og elsker intet mere end at dele sjove og spændende ideer, som du kan prøve derhjemme. Uden for arbejdet kan Samuel normalt findes cyklende, spille pc-videospil eller desperat forsøge at kommunikere med sin kæledyrskrabbe.

Mere fra Samuel L. Garbett

Abonner på vores nyhedsbrev

Tilmeld dig vores nyhedsbrev for tekniske tips, anmeldelser, gratis e-bøger og eksklusive tilbud!

Klik her for at abonnere