Een eenvoudige Chrome-extensie maken

Het maken van een Chrome- extensie is een vrij eenvoudig proces. Als u klaar bent, kunt u het op uw computer gebruiken om de werking van de browser te verbeteren.

Er zijn enkele basiscomponenten die de browser nodig heeft voordat de extensie volledig operationeel kan zijn. We zullen dit hieronder allemaal bespreken, inclusief hoe u uw aangepaste extensie in Chrome kunt laten werken zonder deze te hoeven uploaden of met iemand anders te delen.

Het bouwen van een complexe Chrome- extensie is een proces dat veel gedetailleerder is dan wat u hieronder ziet, maar het algemene proces is hetzelfde. Blijf lezen om te leren hoe u een Chrome- extensie maakt die u vandaag nog kunt gebruiken.

Tip : bekijk (Tip)deze geweldige Chrome-extensies(these amazing Chrome extensions) om te zien hoe geweldig uw eigen extensie kan zijn .

Een Chrome-extensie maken

Met behulp van deze handleiding maakt u een eenvoudige Chrome- extensie met een aantal van uw favoriete websites. Het is volledig aanpasbaar en heel gemakkelijk te updaten.

Dit is wat u moet doen:

  • Maak een map met alle bestanden waaruit de extensie bestaat.
  • Maak de basisbestanden die deze extensie nodig heeft: manifest.json , popup.html , background.html , styles.css .
  • Open popup.html in een teksteditor en plak al het volgende daarin, zorg ervoor dat je het opslaat als je klaar bent.
<!DOCTYPE html>
<html>
   <head>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <title>Favorite Sites</title>
      <link rel="stylesheet" type="text/css" href="styles.css">
   </head>
<body>
   <ul id="myUL">
      <li><a href="https://helpdeskgeek.com/" target="_blank">Help Desk Geek</a></li>
      <li><a href="https://www.online-tech-tips.com/" target="_blank">Online Tech Tips</a></li>
      <li><a href="https://thebackroomtech.com/" target="_blank">The Back Room Tech</a></li>
   </ul>
</body>
</html>

Voel je(Feel) vrij om de links en linktekst te bewerken, of als je de Chrome - extensie precies wilt maken zoals we zijn, laat dan alles hetzelfde.

  • Open manifest.json in de teksteditor en kopieer/plak het volgende:

{
“update_url”: “https://clients2.google.com/service/update2/crx”,

“manifest_version”: 2,
“name”: “Favoriete sites”, ( “name”: “Favorite Sites”,)
“description”: “Al mijn favoriete websites.”, ( “description”: “All my favorite websites.”,)
“version”: “1.0”,
“icons”: {
“16”: “icon.png”,
“32”: “icon.png”,
“48”: “icon.png”,
“128”: “icon.png”
},

   “achtergrond”: {  (   “background”: { )
        “pagina”:”achtergrond.html” (        “page”:”background.html”)
},

    “browser_action” : {
        “default_icon” : “icon.png”,
        “default_title” : “Favoriete sites”, (        “default_title” : “Favorite Sites”,)
        “default_popup”: “popup.html”
    }
}

De eetbare delen van deze code bevatten name , description en default_title .

  • Open stijlen.css(styles.css) en plak de volgende code. Dit is wat het pop-upmenu siert om het veel aantrekkelijker te maken om naar te kijken en nog gemakkelijker te gebruiken.

#myUL {
lijst-stijl-type: geen; (list-style-type: none;)
   opvulling: 0; (   padding: 0;)
   marge: 0; (   margin: 0;)
   breedte: 300px; (   width: 300px;)
}

#myUL li a {
  border: 1px solid #ddd;
  marge-top: -1px; (  margin-top: -1px;)
  background-color: #f6f6f6;
  opvulling: 12px; (  padding: 12px;)
  tekstdecoratie: geen; (  text-decoration: none;)
  lettergrootte: 18px; (  font-size: 18px;)
  de kleur zwart; (  color: black;)
  weergave: blok; (  display: block;)
  font-familie: 'Noto Sans', schreefloos; (  font-family: ‘Noto Sans’, sans-serif;)
}

#myUL li a:hover:not(.header) {
   background-color: #eee;
}

U kunt veel veranderen in het CSS -bestand. Speel met deze opties nadat u uw Chrome- extensie hebt gemaakt om deze naar wens aan te passen.

  • Maak(Create) een pictogram voor de extensie en noem deze icon.png . Plaats het in uw Chrome- extensiemap. Zoals je in de bovenstaande code kunt zien, kun je een apart pictogram maken voor die formaten: 16×16 pixels, 32×32, enzovoort.

Tip: Google heeft meer informatie(Google has more information) over het maken van Chrome- extensies. Er zijn andere voorbeelden en geavanceerde opties die verder gaan dan de eenvoudige stappen die we hier hebben getoond.

Een aangepaste extensie(Custom Extension) toevoegen aan Chrome

Nu je de Chrome -extensie hebt gemaakt, is het tijd om deze aan de browser toe te voegen, zodat je alle bestanden die je zojuist hebt gemaakt kunt gebruiken. Voor het installeren van een aangepaste extensie is een andere procedure nodig dan voor het installeren van een normale Chrome-extensie(how you’d install a normal Chrome extension) .

  • Ga vanuit het Chrome-menu naar Meer tools(More tools ) > Extensies(Extensions) . Of typ chrome://extensions/ in de adresbalk.
  • Selecteer de knop naast Ontwikkelaarsmodus(Developer mode) als deze nog niet is geselecteerd. Hierdoor wordt een speciale modus ingeschakeld waarmee u uw eigen Chrome - extensies kunt importeren.

  • Gebruik de knop Uitgepakt laden(Load unpacked ) boven aan die pagina om de map te selecteren die u tijdens stap 1(Step 1) hierboven hebt gemaakt.

  • Accepteer(Accept) eventuele prompts als je ze ziet. Anders wordt uw op maat gemaakte Chrome - extensie weergegeven samen met eventuele andere in de rechterbovenhoek van de browser.

Uw Chrome-extensie bewerken

Nu uw Chrome- extensie bruikbaar is, kunt u wijzigingen aanbrengen om deze uw eigen te maken. 

Het bestand styles.css bepaalt hoe de extensie wordt weergegeven, zodat u de algemene lijststijl kunt aanpassen en de letterkleur of het lettertype kunt wijzigen. W3Schools is een van de beste bronnen om te leren over alle verschillende dingen die je met CSS kunt doen .

Om de volgorde waarin de websites worden vermeld te wijzigen, of om meer sites toe te voegen of bestaande te verwijderen, bewerkt u het popup.html-bestand. Zorg er wel voor dat u uw bewerkingen beperkt tot alleen de URL en naam. Alle andere tekens, zoals <li> en <html> , zijn verplicht en mogen niet worden gewijzigd. HTML Tutorial op W3Schools(HTML Tutorial on W3Schools) is een goede plek om meer over die taal te leren.



Marinus Hermans

About the author

Ik ben een professionele audio engineer met meer dan 10 jaar ervaring. Ik werk de afgelopen jaren in de muziekindustrie en heb daarbinnen een sterke reputatie opgebouwd. Ik ben ook een zeer ervaren gebruikersaccount en operator voor gezinsveiligheid. Mijn verantwoordelijkheden omvatten het beheren van gebruikersaccounts, het bieden van ondersteuning aan klanten en het geven van veiligheidsadviezen voor het gezin aan werknemers.


Related posts