Hvordan lage en Chrome-utvidelse

Hvordan Lage En Chrome Utvidelse



«I vårt nåværende liv er vi mer ivrige etter å bruke apper for sosiale medier og Googles søkemotor til underholdnings- og søkeformål, det vil si å forske på et pedagogisk emne via «Google»-søkemotoren og få generell kunnskap også. For å bruke Googles søkemotor til å søke etter noe, må vi ha en nettleser installert på våre mobiltelefoner, bærbare datamaskiner eller personlige datamaskiner. En av de mest brukte og effektive nettleserne i dagens århundre er 'Google Chrome'-nettleseren som kom opp med mange gode funksjoner sammen med nytten av utvidelse. 'Utvidelsen' er plugin som finnes i en hvilken som helst nettleser for å begrense eller tillate nettsteder og forskjellige funksjoner. Disse utvidelsene kommer vanligvis ikke innebygd; du må legge til hver utvidelse i nettleseren din separat når det er nødvendig. Hvis du er en liten ekspert på teknologi, så kjenner du kanskje til bruken av manifest JSON-filer for å lage og legge til en utvidelse i noen få trinn. Derfor vil denne artikkelen dekke alle disse trinnene for å lage en ny utvidelse i Google Chrome-nettleseren.

Før du tar en titt på metoden for å lage en utvidelse, må du sørge for at Google Chrome-nettleseren din allerede er lansert og at 'Google'-søkemotoren ikke inneholder noen bakgrunn. Du kan se at bildet vedlagt nedenfor ikke har noen bakgrunn for søkemotoren 'Google.com', dvs. bare hvit bakgrunn.









Legg til utvidelsesmappe



Åpne Visual Studio Code-verktøyet raskt fra appene til Windows-systemet. Det kan ta opptil 1 minutt å åpne Visual Studio Code og aktivere den for vår bruk. Etter at den har blitt lansert på riktig måte og er klar for bruk, har vi lagt til den allerede genererte mappen 'Extension' i den via 'Fil'-menylisten på den øverste oppgavelinjen vist nedenfor. Etter å ha opprettet 'Extension'-mappen, har vi lagt til en annen mappe kalt 'image' i den som inneholder bildene som skal brukes som et ikon for utvidelsen i nettleseren. Sammen med det har vi lagt til en 'manifest.json'-fil og en javascript-fil kalt 'script.js' for å lage en ny utvidelse og legge den til i nettleseren. La oss starte fra manifest.json-filen ved å dobbeltklikke på den for å begynne å jobbe i JSON for å opprette og bruke en utvidelse for å endre bakgrunnen til 'Google'.





Opprett manifestfil



Innenfor manifest.json-filen bør du legge til 'JSON'-koden som vises nedenfor. Denne koden er selve konfigurasjonsskriptet for å opprette og legge til en utvidelse til Google Chrome-nettleseren vår. Denne JSON-koden er startet med initialiseringen for variabelmanifestversjonen som '2' og navnet på en utvidelse som skal opprettes, dvs. 'Endre bakgrunn'. Etter dette la vi til den korte beskrivelsen for utvidelsen vår i 'beskrivelse'-variabelen.

Sammen med det har vi lagt til versjonen av en utvidelse som '1.0'. Etter at alle de grunnleggende konfigurasjonene for 'utvidelsen' er opprettet, må vi legge til banen til bildeikonet som skal brukes som et ikon for utvidelsene. Variabelen 'nettleser' er definert for å angi utvidelsesikonet for den øverste oppgavelinjen i Google Chrome-nettleseren, dvs. hvor alle utvidelsene vises etter at de er aktivert for fremtidig bruk for bestemte eller alle nettsteder. Etter dette har vi lagt til stien til tre bildefiler av ulik størrelse slik at nettleseren kan bruke forskjellige filer hver gang.

Sammen med det har 'page_action'-variabelen blitt brukt til å vise hvilket bilde som skal vises etter å ha klikket på 'utvidelser'-ikonet fra den øverste oppgavelinjen i Google Chrome. Variabelen 'Default_icon' har blitt brukt i den, sammen med dens tre forskjellige baneverdier for bildene som skal brukes som ikoner ved hver omlasting. Tre forskjellige bildefiler brukes til dette formålet. Den siste content_scripts-variabelen tar totalt 2 nye variabler i seg, dvs. samsvar og CSS. Variabelen 'matches' inneholder banen til nettstedet som skal endres etter at bruken av denne nye utvidelsen er opprettet. Sammen med det inneholder variabelen 'CSS' navnet på en CSS-fil som skal brukes for styling av Google.com etter å ha søkt om utvidelsen, dvs. styling av Google.com etter hver omlasting ved aktivering av utvidelsen. Nå som denne koden er fullført og klar til bruk, lagrer du den raskt og går mot 'main.css'-filen.

Innenfor main.css CSS-filen har vi lagt til styling for manifestfiltypen vår som skal opprettes. Stilingen vil bli brukt ved å bruke html-koden «body», dvs. den skal brukes på hele «body»-området i manifestfilen. Vi har satt den nye bakgrunnen for Google.com ved å bruke 'URL' til en bildefil fra søkemotoren. Nå, lagre koden før noe.

Etter å ha fullført de nødvendige kodene, dvs. manifest.json og main.css-filen, må vi åpne Extensions-verktøyet i Google Chrome-nettleseren via URL-adressen chrome://extensions” i den nye fanen. Bruksområdet Extensions er åpnet. Fra utviklermodusen må du laste den utpakkede 'Extension'-mappen fra ditt lokale system for å gjøre den til en utvidelse via knappen 'last unpackaged' vist i bildet nedenfor. Utvidelsen er effektivt lagt til Chrome-nettleseren, som vist. Fjern feilene for å få det til å fungere fullt ut.

Fra «utvidelse»-ikonet, velg «Endre bakgrunn»-utvidelsen for å vise den på oppgavelinjen, det vil si «C»-ikonutvidelsen.

Etter å ha lastet inn Google.com på nytt, ble bakgrunnen oppdatert med denne utvidelsen.

Konklusjon

Med utgangspunkt i forklaringen om bruk av nettlesere i Windows-systemet, har vi også diskutert viktigheten av utvidelsene i enhver nettleser. Etter den korte forklaringen av utvidelser, har vi forklart metoden for å bruke manifest JSON-filen til å lage en utvidelse for Google Chrome-nettleseren og hvordan du bruker den til å endre bakgrunn for søkemotoren 'Google.com'. Etter å ha lastet utvidelsen på Google chrome, har vi brukt den på Google.com for å endre bakgrunnen.