'In ons huidige leven zijn we meer geneigd om sociale media-apps en de Google-zoekmachine te gebruiken voor onze entertainment- en zoekdoeleinden, d.w.z. om een educatief onderwerp te onderzoeken via de 'Google' -zoekmachine en ook algemene kennis op te doen. Om de Google-zoekmachine te gebruiken om iets te zoeken, moeten we al een browser hebben geïnstalleerd op onze mobiele telefoons, laptops of pc's. Een van de meest gebruikte en efficiënte browsers van de huidige eeuw is de 'Google Chrome' -browser die met veel goede functionaliteiten op de proppen kwam, samen met het nut van extensie. De 'Extensie' is de plug-in die in elke browser wordt gevonden om websites en verschillende functies te beperken of toe te staan. Deze extensies zijn meestal niet ingebouwd; u moet elke extensie afzonderlijk aan uw browser toevoegen wanneer dat nodig is. Als je een beetje expert bent in technologie, dan ken je misschien het gebruik van manifest JSON-bestanden om in een paar stappen een extensie te maken en toe te voegen. Daarom behandelt dit artikel al die stappen om een nieuwe extensie in de Google Chrome-browser te maken.
Voordat u de methode voor het maken van een extensie bekijkt, moet u ervoor zorgen dat uw Google Chrome-browser al is gestart en dat de 'Google' -zoekmachine geen achtergrond bevat. U kunt zien dat de onderstaande afbeelding geen achtergrond heeft voor de zoekmachine 'Google.com', d.w.z. alleen een witte achtergrond.'
Extensiemap toevoegen
Open uw Visual Studio Code-tool snel vanuit de apps van uw Windows-systeem. Het kan tot 1 minuut duren om de Visual Studio Code correct te openen en in te schakelen voor ons gebruik. Nadat het correct is gestart en klaar is voor gebruik, hebben we de reeds gegenereerde map 'Extensie' erin toegevoegd via de menulijst 'Bestand' in de bovenste taakbalk die hieronder wordt weergegeven. Nadat we de map 'Extensie' hebben gemaakt, hebben we een andere map met de naam 'afbeelding' erin toegevoegd die de afbeeldingen bevat die als pictogram voor de extensie in de browser moeten worden gebruikt. Daarnaast hebben we één 'manifest.json'-bestand en één javascript-bestand met de naam 'script.js' toegevoegd om een nieuwe extensie te maken en deze aan de browser toe te voegen. Laten we beginnen met het manifest.json-bestand door erop te dubbelklikken om in JSON te gaan werken om een extensie te maken en te gebruiken om de achtergrond van 'Google' te wijzigen.
Manifestbestand maken
Binnen het manifest.json-bestand moet u de onderstaande 'JSON' -code toevoegen. Deze code is het eigenlijke configuratiescript om een extensie te maken en toe te voegen aan onze Google Chrome-browser. Deze JSON-code is gestart met de initialisatie voor de variabele manifestversie als '2' en de naam van een aan te maken extensie, d.w.z. 'Achtergrond wijzigen'. Hierna hebben we de korte beschrijving voor onze extensie toegevoegd binnen de variabele 'description'.
Daarnaast hebben we de versie van een extensie toegevoegd als '1.0'. Nadat alle basisconfiguraties voor de 'extensie' zijn gemaakt, moeten we het pad naar het afbeeldingspictogram toevoegen dat als pictogram voor de extensies moet worden gebruikt. De variabele 'browser' is gedefinieerd om het extensiepictogram in te stellen voor de bovenste taakbalk van de Google Chrome-browser, d.w.z. waar alle extensies worden weergegeven nadat ze zijn ingeschakeld voor toekomstig gebruik voor bepaalde of alle sites. Hierna hebben we het pad toegevoegd aan drie afbeeldingsbestanden van verschillende grootte, zodat de browser elke keer verschillende bestanden kan gebruiken.
Daarnaast is de variabele 'page_action' gebruikt om weer te geven welke afbeelding moet worden weergegeven nadat op het pictogram 'extensies' in de bovenste taakbalk van Google Chrome is geklikt. De variabele 'Default_icon' is erin gebruikt, samen met de drie verschillende padwaarden voor de afbeeldingen die als pictogrammen moeten worden gebruikt bij elke herlaadbeurt. Hiervoor worden drie verschillende afbeeldingsbestanden gebruikt. De laatste content_scripts variabele bevat in totaal 2 nieuwe variabelen, d.w.z. matches en CSS. De variabele 'matches' bevat het pad naar de website dat moet worden gewijzigd nadat het gebruik van deze nieuwe extensie is gemaakt. Daarnaast bevat de variabele 'CSS' de naam van een CSS-bestand dat moet worden gebruikt voor de styling van Google.com na het aanvragen van de extensie, d.w.z. het stylen van Google.com na elke herlaadbeurt bij het inschakelen van de extensie. Nu deze code compleet en gebruiksklaar is, hoeft u deze alleen maar snel op te slaan en naar het bestand 'main.css' te gaan.
Binnen het main.css CSS-bestand hebben we styling toegevoegd voor onze manifest-bestandsextensie die moet worden gemaakt. De styling zou worden toegepast met behulp van de html 'body' -tag, d.w.z. om te worden toegepast op het volledige 'body' -gebied van het manifestbestand. We hebben de nieuwe achtergrond voor Google.com ingesteld met behulp van de 'URL' van een afbeeldingsbestand van de zoekmachine. Sla nu eerst uw code op.
Na het voltooien van de vereiste codes, d.w.z. manifest.json en main.css-bestand, moeten we het hulpprogramma Extensies openen in de Google Chrome-browser via de URL chrome://extensions' op het nieuwe tabblad. Het hulpprogrammagebied Extensies wordt geopend. Vanuit de ontwikkelaarsmodus moet u de uitgepakte map 'Extensie' van uw lokale systeem laden om er een extensie van te maken via de knop 'uitgepakt laden' die wordt weergegeven in de onderstaande afbeelding. De extensie is effectief toegevoegd aan de Chrome-browser, zoals weergegeven. Verwijder de fouten om het volledig te laten werken.
Kies vanuit het pictogram 'extensie' de extensie 'Achtergrond wijzigen' om deze op de taakbalk weer te geven, d.w.z. de pictogramextensie 'C'.
Nadat Google.com opnieuw was geladen, werd de achtergrond bijgewerkt met deze extensie.
Conclusie
Uitgaande van de uitleg over het gebruik van de browsers in het Windows-systeem, hebben we ook het belang van de extensies in elke browser besproken. Na de korte uitleg van extensies, hebben we de methode uitgelegd om het manifest JSON-bestand te gebruiken om een extensie voor de Google Chrome-browser te maken en hoe deze te gebruiken om de achtergrond voor de 'Google.com'-zoekmachine te wijzigen. Na het laden van de extensie op Google Chrome, hebben we deze op Google.com gebruikt om de achtergrond te wijzigen.