Inhoudsopgave:
- Benodigdheden
- Stap 1: Maak de map aan
- Stap 2: Maak het manifestbestand en codeer het
- Stap 3: Maak de pictogrammen en werk het manifest bij
- Stap 4: Voeg een pop-up toe
- Hallo Wereld
- Stap 5: Laat het er goed uitzien en maak het interactief
- Hallo Wereld
- Hallo Wereld
- Stap 6: Publiceren in de Chrome Web Store
Video: 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!
Aanbevolen:
Smart Indoor Plant Monitor - Weet wanneer uw plant water nodig heeft - Ajarnpa
Smart Indoor Plant Monitor - Weet wanneer uw plant water nodig heeft: Een paar maanden geleden heb ik een bodemvochtigheidsmonitor gemaakt die op batterijen werkt en in de pot van uw kamerplant kan worden gestoken om u nuttige informatie over de bodem te geven. vochtigheidsniveau en knipperende LED's om u te vertellen wanneer u moet wa
De Arduino- en Drive Station-software downloaden die u nodig hebt voor MiniFRC (UPDATE 13-05-18): 5 stappen
De Arduino- en Drive Station-software downloaden die u nodig heeft voor MiniFRC (UPDATE 13-5-2018): MiniFRC is een tweejaarlijkse mini-robotcompetitie die wordt gehouden door FRC-team 4561, de TerrorBytes. Teams bouwen kwartschaalrobots om te strijden op een kwartschaal FRC-veld. In deze tutorial laat ik je zien hoe je alle benodigde software downloadt en installeert
Wat je nodig hebt en leert: 4 stappen
Wat je nodig hebt en leert: Een Raspberry Pi-bord is wat je in deze les leert gebruiken. Dus, wat is het en waar komt het vandaan? De Raspberry Pi is een kleine, goedkope en programmeerbare computer gemaakt door de Raspberry Pi Foundation. Een van de medeoprichters van de stichting
LED-licht - Dingen die nodig zijn - Ajarnpa
LED-licht - Dingen die nodig zijn: voor deze instructable zal ik je laten zien hoe je een LED-licht aan en uit kunt zetten met behulp van een Raspberry Pi en wat Python-programmering. De dingen die je nodig hebt voor het project zijn als volgt: LED-licht, Jumper-kabels, breadboard, USB-stroom
Een gratis Rapid Fire-mod doen (alles wat je nodig hebt is een schroevendraaier) - Ajarnpa
Hoe maak je een Rapid Fire Mod gratis (alles wat je nodig hebt is een schroevendraaier): Vandaag zal ik je leren hoe je een rapid fire mod op een Xbox maakt. Benodigdheden: Een torx T8 schroevendraaier met een veiligheidsgat OF je kunt een kleine platte kop. Deze keer gebruik ik een Titan Torx t8 met een veiligheidsgat die kan worden gekocht bij Autozone