Chrome-webextensie - geen eerdere codeerervaring nodig: 6 stappen

2024 Auteur: John Day | [email protected]. Laatst gewijzigd: 2024-01-30 11:15

Chrome-extensies zijn kleine programma's die zijn gebouwd om de browse-ervaring van gebruikers te verbeteren. Ga voor meer informatie over Chrome-extensies naar

Om een Chrome-webextensie te maken, is codering vereist, dus het is erg handig om HTML, JavaScript en CSS te bekijken op de onderstaande website:

www.w3schools.com/default.asp (w3 schools is een goede website voor het coderen van bronnen)

Weet je niet hoe je moet coderen? Maak je geen zorgen, deze tutorial helpt je op weg.

Het beste van Chrome-extensies is dat ze kunnen worden aangepast. Het is niet slechts één specifiek ding dat kan worden gedaan, dus wees creatief.

Benodigdheden

De benodigdheden die nodig zijn staan hieronder:

• Een computer met een teksteditor (ik gebruik Kladblok)
• Google Chrome

En dat is alles!

Stap 1: Maak de map aan

Maak eerst een map voor alle bestanden en noem deze 'extensie'. De naam kan desgewenst later worden gewijzigd.

Stap 2: Maak het manifestbestand en codeer het

Het manifestbestand is een zeer belangrijk onderdeel van de extensie. Het vertelt de extensie precies wat te doen en te zijn. Manifestbestanden worden opgemaakt in JSON. De eerste stap is om een teksteditor te openen en een nieuw bestand op te slaan als 'manifest.json'.

Typ vervolgens het onderstaande script:

{

"name": "First Extension", "version": "1.0", "description": "Ik kan een extensie coderen", "manifest_version": 2, "browser_action": { "default_title": "First Extension" } }

Onthoud de komma's na de waarden!

Nadat dit is getypt, slaat u het manifestbestand op en gaat u naar chrome://extensions (Chrome moet hiervoor als browser worden gebruikt). Schakel de ontwikkelaarsmodus in op chrome://extensions. Druk daarna op de knop 'Uitgepakt laden' en selecteer de map 'extensie'.

tromgeroffel aub…

Hoera! Dat is een extensie, behalve … het is een beetje saai. Het doet letterlijk niets vanaf nu, maar binnenkort zal het super cool zijn.

Stap 3: Maak de pictogrammen en werk het manifest bij

Een website die goed werkt voor het tekenen van pictogrammen is https://www.piskelapp.com/. Er zijn ook andere tekenprogramma's beschikbaar voor gebruik. De pictogrammen moeten vierkant zijn. Dit project gebruikt pictogrammen van 16x16, 32x32, 48x48 en 128x128. Zodra het pictogram is gemaakt, maakt u een map met de naam 'afbeeldingen' in de extensiemap en plaatst u het pictogram in die map. Het is misschien een goed idee om een afbeelding een naam te geven op basis van de grootte. Bijvoorbeeld 'icon32.png'. De nieuwe code staat hieronder:

{

"name": "First Extension", "version": "1.0", "description": "Ik kan een extensie coderen", "manifest_version": 2, "browser_action": { "default_title": "First Extension", " default_icon": { "16": "images/icon16.png", "32": "images/icon32.png", "48": "images/icon48.png", "128": "images/icon128-p.webp

Ga voor referentie over de manifestcode naar

Stap 4: Voeg een pop-up toe

Deze extensie heeft een pop-up. De pop-up is een HTML-bestand (Hypertext Markup Language), dus het is goed om eerst de basis van HTML, CSS en JavaScript te leren.

Sla eerst een document op als ' popup.html ' bestand in de extensiemap.

Bewerk vervolgens het manifestbestand om ' popup.html ' weer te geven wanneer erop wordt geklikt. De nieuwe code staat hieronder:

{

"name": "First Extension", "version": "1.0", "description": "Ik kan een extensie coderen", "manifest_version": 2, "browser_action": { "default_title": "First Extension", " default_icon": { "16": "images/icon16.png", "32": "images/icon32.png", "48": "images/icon48.png", "128": "images/icon128-p.webp

Vergeet de komma niet!

Als nu de volgende HTML-code wordt toegevoegd aan popup.html, wordt 'Hallo wereld' weergegeven wanneer erop wordt geklikt.

Hallo Wereld

Stap 5: Laat het er goed uitzien en maak het interactief

Als een eenvoudige HTML-regel wordt getypt, wordt het absolute minimum gedaan. Als CSS (Cascading Style Sheets) wordt toegevoegd, ziet het er cooler uit en als JavaScript wordt toegevoegd, kan het interactiever zijn. Deze tutorial gaat niet in detail over HTML, JavaScript en CSS, maar er zijn genoeg bronnen online. Hieronder vindt u de code voor respectievelijk het eenvoudige 'Hello World'-programma en vervolgens het meer kleurrijke programma:

Hallo Wereld

Hallo Wereld

#hallo{ achtergrondkleur: #000000; kleur: #ff0000; rand: 8px begin #86a3b2; grens-radius: 50px; transformeren: roteren (57deg); opvulling: 10px; gebruiker selecteren: geen; cursor: dradenkruis; overgang: transform 2s; } #hallo:hover { transformeren: roteren(-417deg); }

Dit tweede voorbeeld kan voor een beginner erg verwarrend zijn. Maar dit was om u te laten zien hoe belangrijk CSS is voor een programma/extensie. Dit zou een goed moment zijn om een pauze te nemen en wat HTML5-codering te leren en developer.chrome.com te gebruiken als referentie. Het kan even duren, maar er kan een geweldige uitbreiding worden gemaakt.

Stap 6: Publiceren in de Chrome Web Store

Als iemand een echt geweldige extensie heeft gemaakt en deze met de wereld wil delen, dan kunnen ze deze publiceren. Dat is immers het punt van een extensie. Deze tutorial probeerde alleen het manifest-bestand uit te leggen en hoe je het kunt gebruiken, en het had alleen een 'Hello World'-programma.

Het eerste dat u moet doen om een extensie openbaar te maken, is de extensiemap in een zipbestand te maken. Het tweede dat u moet doen, is naar https://chrome.google.com/webstore/category/extensions gaan en inloggen op een Google-account. Klik vervolgens op de tandwielknop voor instellingen en klik vervolgens op 'developersdashboard'. Druk op de knop 'Nieuw item' om het zipbestand te uploaden. Eenmaal daar is het noodzakelijk om de winkelvermelding, privacy en prijzen te bewerken. Een extensie kan eenvoudig worden gepubliceerd als deze ter beoordeling wordt ingediend.

Nu de extensie is voltooid, gaat u verder met coderen!