Hoe u uw eigen Google Chrome-extensie kunt maken

Ben je ooit ontevreden geweest over de functies van je webbrowser? Zelfs met urenlang door de Google Web Store speuren, is het niet altijd een kwestie van op "downloaden" klikken om uw surfervaring op het web te verbeteren.

Dit is waar browserextensies binnenkomen. In dit artikel zullen we het proces verkennen om uw eigen doe-het-zelf Google Chrome-extensie helemaal opnieuw te bouwen.

Wat is een Google Chrome-extensie?

Modern webbrowsers zoals Google Chrome worden geleverd met een scala aan functies die ze gebruiksvriendelijk maken en in staat zijn om aan de behoeften van de meeste gebruikers te voldoen. Het uitbreiden van deze voorraadfuncties kan echter tal van verschillende voordelen met zich meebrengen. Dit is de reden waarom browserontwikkelaars het meestal mogelijk maken om extensies, add-ons en plug-ins voor hen te maken.

Google Chrome biedt deze functie, waardoor het voor iedereen met ervaring op het gebied van webontwikkeling gemakkelijk is om hun eigen Chrome-extensies te maken. U kunt een extensie maken met HTML, JavaScript en CSS, net als veel websites.

In tegenstelling tot een website kunnen extensies op de achtergrond worden uitgevoerd terwijl u surft, soms zelfs in interactie met de sites die u bezoekt.

Wat doet onze Google Chrome-extensie?

We gaan een eenvoudige Chrome-extensie bouwen waarmee u de Make Use Of-website kunt bezoeken en willekeurig kunt zoeken op basis van de artikelcategorieën die op de site zijn gevonden. Dit is een snel en eenvoudig project, maar je zult nog steeds veel leren.

Je leert hoe je moet

• Een Google Chrome-extensie maken
• Aangepaste code in webpagina's invoegen met een Chrome-extensie
• Maak gebeurtenislisteners en simuleer klikken
• Willekeurige getallen genereren
• Werken met arrays en variabelen

Uw eigen DIY Chrome-extensie bouwen

Google heeft het verrassend eenvoudig gemaakt om je eigen te maken Chrome-extensies, dus het duurt niet lang voordat je iets hebt werkend. Het duurt slechts 10 tot 15 minuten om de onderstaande stappen te volgen, maar we raden je aan om ook met je eigen code te experimenteren.

Stap 1: De bestanden maken

U kunt uw extensie op uw eigen lokale computer opslaan als u niet van plan bent deze te distribueren. We hoeven maar vier verschillende bestanden te maken om onze extensie te maken; een HTML-bestand, een CSS-bestand, een JavaScript-bestand en een JSON-bestand.

We noemden onze bestanden index.html, style.css, script.js en manifest.json. Het manifestbestand moet deze naam hebben om correct te werken, maar u kunt de anderen elke gewenste naam geven, zolang u uw code dienovereenkomstig aanpast.

U moet deze bestanden in dezelfde hoofdmap plaatsen.

Stap 2: Het manifestbestand samenstellen

Het manifestbestand wordt bij elke Google Chrome-extensie geleverd. Het geeft informatie over de extensie van Chrome en stelt ook enkele basisinstellingen op. Dit bestand moet een naam, versienummer, beschrijving en een manifestversie bevatten. We hebben ook machtigingen en een actie toegevoegd die wordt geladen index.html als de pop-up die verschijnt voor de extensie.

{
"naam": "MakeUseOf.com Geautomatiseerd zoeken",
"versie": "1.0.0",
"Omschrijving": "Een zoekfunctie om interessante artikelen te vinden",
"manifest_version": 3,
"schrijver": "Samuel Garbett",
"rechten": ["opslag", "declaratiefInhoud", "activeTab", "scripting"],
"host_permissions": [""],
"actie":{
"default_popup": "index.html",
"default_title": "MUO automatisch zoeken"
 }
}

Stap 3: De HTML & CSS bouwen

Voordat we kunnen beginnen met het schrijven van ons script, moeten we een basisgebruikersinterface maken met HTML en CSS. U kunt een CSS-bibliotheek zoals Bootstrap om te voorkomen dat u uw eigen extensie maakt, maar we hebben maar een paar regels nodig voor onze extensie.

Ons index.html-bestand bevat html-, head- en body-tags. De head-tag bevat een paginatitel en een link naar onze stylesheet, terwijl de body een h1-tag bevat, a knop die u naar MakeUseOf.com brengt, en een andere knop die we zullen gebruiken als trigger voor a script. Een scripttag direct aan het einde van het document bevat de script.js het dossier.

<html>
<hoofd>
<titel>MUO automatisch zoeken</title>
<meta-tekenset="utf-8">
<link rel="stylesheet" href="style.css">
</head>
<lichaam>
<h1>MUO automatisch zoeken</h1>
<een href="https://www.makeuseof.com/" doel="_blank"><knop id="knop Een">Ga naar MakeUseOf.com</button></a>
<knop id="knop twee">Willekeurig zoeken starten</button>
</body>
<script src="script.js"></script>
</html>

Ons CSS-bestand is zelfs eenvoudiger dan onze HTML en verandert de stijl van slechts vijf elementen. We hebben regels voor onze html- en body-tags, evenals voor h1-tags en onze beide buttons.

html {
 breedte: 400px;
}
lichaam {
 font-familie: Helvetica, schreefloos;
}
h1 {
 tekst uitlijnen: midden;
}
#buttonOne {
 grens-radius: 0px;
 breedte: 100%;
 opvulling: 10px 0px;
}
#knopTwee {
 grens-radius: 0px;
 breedte: 100%;
 opvulling: 10px 0px;
 marge-top: 10px;
}

Stap 4: Het JavaScript bouwen

Als laatste stap in dit proces is het tijd om ons script.js-bestand te bouwen.

De eerste functie in dit bestand, genaamd invoegenScript(), is aanwezig om de andere functie in te voegen (automatisch zoeken()) naar de huidige pagina. Hierdoor kunnen we de pagina manipuleren en de zoekfuncties gebruiken die al aanwezig zijn op de MakeUseOf.com-site.

Dit wordt gevolgd door een gebeurtenislistener die wacht totdat op de knop Willekeurig zoeken starten wordt geklikt voordat de functie wordt aangeroepen die we hierboven hebben onderzocht.

De automatisch zoeken() functie is een beetje ingewikkelder. Het begint met een array met 20 van de categorieën op de MUO-website, wat ons een goed voorbeeld geeft om uit te putten bij het uitvoeren van onze willekeurige zoekopdrachten. Hierna gebruiken we de Wiskunde.willekeurig() functie om een ​​willekeurig getal tussen 0 en 19 te genereren om een ​​item uit onze array te selecteren.

Met onze zoekterm in de hand, moeten we nu een klik op een knop simuleren om de MUO-zoekbalk te openen. We gebruiken eerst de Chrome-ontwikkelaarsconsole om de ID van de zoekknop te vinden, en dan voegen we deze toe aan onze JavaScript-code met de Klik() functie.

Net als de zoekknop, moeten we ook de ID vinden van de zoekbalk die verschijnt, zodat we de willekeurige zoekterm die we hebben geselecteerd, kunnen invoegen. Als dit is voltooid, is het een kwestie van het formulier verzenden om onze zoekopdracht uit te voeren.

// Deze functie voegt onze autoSearch-functie in de code van de pagina in
functieScript invoegen() {
// Dit selecteert het gefocuste tabblad voor de bewerking en geeft de autoSearch-functie door
 chrome.tabs.query({actief: WAAR, huidigVenster: WAAR}, tabbladen => {
chroom.scripting.executeScript({doel: {tab-ID: tabbladen[0].ID kaart}, functie: automatisch zoeken})
 })
// Hiermee wordt de pop-up van de extensie gesloten om de zoekbalk van de website te selecteren
raam.dichtbij();
}
// Dit is een gebeurtenislistener die klikken op onze "Begin Willekeurig Zoekopdracht" knop
document.getElementById('knop twee').addEventListener('Klik', Script invoegen)
// Deze functie selecteert een willekeurig onderwerp uit een array en 
functieautomatisch zoeken() {
// Dit is een array om onze zoektermen op te slaan
 const zoektermen = ["pc en mobiel", "levensstijl", "Hardware", "ramen", "Mac",
"Linux", "Android", "Appel", "internet", "Beveiliging",
"Programmeren", "Amusement", "productiviteit", "Carrière", "Creatief",
"Gamen", "Sociale media", "Slimme woning", "doe-het-zelf", "Beoordeling"];
// Dit genereert een willekeurig getal tussen 0 en 19
laat selectorNummer = Wiskunde.vloer(Wiskunde.willekeurig() * 20);
// Dit gebruikt het willekeurige getal om een ​​item uit de array te selecteren
laat selectie = zoektermen [selectorNumber];
// Dit simuleert een klik op het zoekpictogram van de MUO-website
 document.getElementById("js-zoeken").Klik();
// Dit stelt de zoekbalk van de MUO-website in als een variabele
var zoekbalk = document.getElementById("js-zoekinvoer");
// Dit voegt onze willekeurige zoekterm in de zoekbalk in
 searchBar.value = searchBar.value + selectie;
// Dit voltooit het proces door het websiteformulier te activeren
 document.getElementById("zoekformulier2").indienen();
}

Stap 5: Uw bestanden toevoegen aan Chrome://extensions

Vervolgens is het tijd om de bestanden die u zojuist hebt gemaakt toe te voegen aan de pagina met Chrome-extensies. Zodra u dit heeft gedaan, is de extensie toegankelijk in Chrome en wordt deze automatisch bijgewerkt wanneer u wijzigingen aanbrengt in uw bestanden.

Open Google Chrome, ga naar chrome://extensions en zorg ervoor dat de schuifregelaar voor ontwikkelaarsmodus in de rechterbovenhoek op aan staat.

Klik Uitgepakt laden in de linkerbovenhoek, kies vervolgens de map waarin u uw extensiebestanden hebt opgeslagen en klik op Selecteer map.

Nu uw extensie is geladen, kunt u op het puzzelstukpictogram in de rechterbovenhoek klikken en uw extensie vastzetten op de hoofdtaakbalk voor eenvoudigere toegang.

U zou nu toegang moeten hebben tot de voltooide extensie in uw browser. Houd er rekening mee dat deze extensie alleen werkt op de MUO-website of websites met dezelfde ID voor hun zoekknop en -balk.

Een Google Chrome-extensie bouwen

Dit artikel beschrijft slechts de oppervlakte van de mogelijke functies die u in uw eigen Google Chrome-extensie zou kunnen inbouwen. Het is de moeite waard om je eigen ideeën te onderzoeken als je eenmaal de basis hebt geleerd.

Chrome-extensies kunnen u helpen uw browsen te verbeteren, maar probeer enkele van de bekende schaduwrijke Chrome-extensies uit de buurt te blijven voor veilig browsen.

6 schaduwrijke Google Chrome-extensies die u zo snel mogelijk moet verwijderen

Lees volgende

Over de auteur