Sådan opretter du en Chrome-udvidelse

Sadan Opretter Du En Chrome Udvidelse



'Inden for vores nuværende liv er vi mere ivrige efter at bruge sociale medie-apps og Google-søgemaskinen til vores underholdnings- og søgeformål, det vil sige at undersøge et eller andet pædagogisk emne via 'Google'-søgemaskinen og også få generel viden. For at bruge Googles søgemaskine til at søge efter noget, skal vi have en browser installeret på vores mobiltelefoner, bærbare computere eller personlige computere. En af de mest brugte og effektive browsere i nutidens århundrede er 'Google Chrome' browseren, som kom op med mange gode funktioner sammen med nytten af ​​udvidelse. 'Udvidelsen' er det plugin, der findes i enhver browser, for at begrænse eller tillade websteder og forskellige funktioner. Disse udvidelser kommer normalt ikke indbygget; du skal tilføje hver udvidelse til din browser separat, når det er nødvendigt. Hvis du er en lille ekspert i teknologi, så kender du måske brugen af ​​manifest JSON-filer til at oprette og tilføje en udvidelse i et par trin. Derfor vil denne artikel dække alle disse trin for at oprette en ny udvidelse på Google Chrome-browseren.

Før du tager et kig på metoden til at oprette en udvidelse, skal du sikre dig, at din Google Chrome-browser allerede er lanceret, og at 'Google'-søgemaskinen ikke indeholder nogen baggrund. Du kan se, at billedet vedhæftet nedenfor ikke har nogen baggrund for søgemaskinen 'Google.com', dvs. kun hvid baggrund.









Tilføj udvidelsesmappe



Åbn dit Visual Studio Code-værktøj hurtigt fra apps på dit Windows-system. Det kan tage op til 1 minut at åbne Visual Studio Code korrekt og aktivere den til vores brug. Efter at den er blevet lanceret korrekt og er klar til brug, har vi tilføjet den allerede genererede mappe 'Udvidelse' i den via menulisten 'Filer' på den øverste proceslinje vist nedenfor. Efter at have oprettet mappen 'Udvidelse', har vi tilføjet en anden mappe med navnet 'billede', der indeholder billederne, der skal bruges som et ikon for udvidelsen i browseren. Sammen med det har vi tilføjet en 'manifest.json'-fil og en javascript-fil med navnet 'script.js' for at oprette en ny udvidelse og tilføje den til browseren. Lad os starte fra manifest.json-filen ved at dobbeltklikke på den for at begynde at arbejde i JSON for at oprette og bruge en udvidelse til at ændre baggrunden for 'Google'.





Opret manifestfil



Indenfor manifest.json-filen skal du tilføje den viste 'JSON'-kode. Denne kode er det faktiske konfigurationsscript til at oprette og tilføje en udvidelse til vores Google Chrome-browser. Denne JSON-kode er startet med initialiseringen for variabelmanifestversionen som '2' og navnet på en udvidelse, der skal oprettes, dvs. 'Skift baggrund'. Herefter tilføjede vi den korte beskrivelse af vores udvidelse inden for variablen 'beskrivelse'.

Sammen med det har vi tilføjet versionen af ​​en udvidelse som '1.0'. Når alle de grundlæggende konfigurationer for 'udvidelsen' er oprettet, skal vi tilføje stien til billedikonet, der skal bruges som et ikon for udvidelserne. Variablen 'browser' er blevet defineret til at indstille udvidelsesikonet for den øverste proceslinje i Google Chrome-browseren, dvs. hvor alle udvidelserne vises efter at have aktiveret dem til fremtidig brug for bestemte eller alle websteder. Herefter har vi tilføjet stien til tre billedfiler af forskellig størrelse, så browseren kan bruge forskellige filer hver gang.

Sammen med det er 'page_action'-variablen blevet brugt til at vise, hvilket billede der skal vises efter at have klikket på 'udvidelser'-ikonet fra den øverste proceslinje i Google Chrome. Variablen 'Default_icon' er blevet brugt i den sammen med dens tre forskellige stiværdier for billederne, der skal bruges som ikoner ved hver genindlæsning. Tre forskellige billedfiler bruges til dette formål. Den sidste content_scripts-variabel tager i alt 2 nye variabler i sig, dvs. matches og CSS. Variablen 'matches' indeholder stien til webstedet, der skal ændres, efter at brugen af ​​denne nye udvidelse er oprettet. Sammen med det indeholder variablen 'CSS' navnet på en CSS-fil, der skal bruges til styling af Google.com efter ansøgning om udvidelsen, dvs. styling af Google.com efter hver genindlæsning ved aktivering af udvidelsen. Nu hvor denne kode er komplet og klar til brug, skal du bare gemme den hurtigt og flytte mod filen 'main.css'.

Indenfor main.css CSS-filen har vi tilføjet styling til vores manifest-filudvidelse, der skal oprettes. Stilen vil blive anvendt ved hjælp af html 'body'-tagget, dvs. skal anvendes på hele 'body'-området af manifestfilen. Vi har indstillet den nye baggrund for Google.com ved hjælp af 'URL'en til en billedfil fra søgemaskinen. Gem nu din kode før noget.

Efter at have udfyldt de nødvendige koder, dvs. manifest.json og main.css-filen, skal vi åbne udvidelsesværktøjet i Google Chrome-browseren via URL-adressen chrome://extensions” i den nye fane. Udvidelsesområdet er åbnet. Fra dens udviklertilstand skal du indlæse den udpakkede 'Extension'-mappe fra dit lokale system for at gøre den til en udvidelse via knappen 'indlæs udpakket', der vises på billedet nedenfor. Udvidelsen er blevet tilføjet effektivt til Chrome-browseren, som vist. Fjern fejlene for at få det til at fungere fuldt ud.

Fra 'udvidelses'-ikonet skal du vælge 'Skift baggrund'-udvidelsen for at vise den på proceslinjen, dvs. 'C'-ikonudvidelsen.

Efter genindlæsning af Google.com blev dens baggrund opdateret ved hjælp af denne udvidelse.

Konklusion

Med udgangspunkt i forklaringen af ​​brugen af ​​browsere i Windows-systemet, har vi også diskuteret vigtigheden af ​​udvidelserne i enhver browser. Efter den korte forklaring af udvidelser har vi forklaret metoden til at bruge manifest JSON-filen til at oprette en udvidelse til Google Chrome-browseren, og hvordan man bruger den til at ændre baggrunden for 'Google.com'-søgemaskinen. Efter at have indlæst udvidelsen på Google chrome, har vi brugt den på Google.com til at ændre dens baggrund.