”Nykyisessä elämässämme käytämme innokkaammin sosiaalisen median sovelluksia ja Google-hakukonetta viihde- ja hakutarkoituksiin, eli tutkimme jotain opetuksellista aihetta ”Google”-hakukoneen kautta ja hankimme myös yleistietoa. Jotta voisimme käyttää Google-hakukonetta etsimään jotain, meillä on oltava jokin selain asennettuna matkapuhelimiimme, kannettaviin tietokoneihimme tai henkilökohtaisiin tietokoneihimme. Yksi vuosisadan käytetyimmistä ja tehokkaimmista selaimista on 'Google Chrome' -selain, jossa on monia hyviä toimintoja laajennuksen ohella. 'Laajennus' on laajennus, joka löytyy mistä tahansa selaimesta, joka rajoittaa tai sallii verkkosivustoja ja erilaisia toimintoja. Näitä laajennuksia ei yleensä ole sisäänrakennettu; sinun on lisättävä jokainen laajennus erikseen selaimeesi aina tarvittaessa. Jos olet hieman tekniikan asiantuntija, saatat tuntea JSON-luettelotiedostojen käytön laajennuksen luomiseen ja lisäämiseen muutamassa vaiheessa. Tästä syystä tämä artikkeli kattaa kaikki vaiheet uuden laajennuksen luomiseksi Google Chrome -selaimeen.
Ennen kuin tarkastelet laajennuksen luontitapaa, sinun on varmistettava, että Google Chrome -selaimesi on jo käynnistetty ja että 'Google' -hakukone ei sisällä taustaa. Voit nähdä, että alla liitetyssä kuvassa ei ole taustaa hakukoneelle 'Google.com', eli vain valkoinen tausta.
Lisää laajennuskansio
Avaa Visual Studio Code -työkalu nopeasti Windows-järjestelmäsi sovelluksista. Visual Studio -koodin avaaminen ja sen ottaminen käyttöön voi kestää jopa minuutin. Kun se on käynnistetty oikein ja on valmis käytettäväksi, olemme lisänneet siihen jo luodun kansion 'Extension' alla olevan tehtäväpalkin 'Tiedosto'-valikkoluettelon kautta. 'Extension'-kansion luomisen jälkeen olemme lisänneet siihen toisen kansion nimeltä 'image', joka sisältää kuvat, joita käytetään selaimen laajennuksen kuvakkeena. Tämän lisäksi olemme lisänneet yhden 'manifest.json'-tiedoston ja yhden javascript-tiedoston nimeltä 'script.js' luodaksemme uuden laajennuksen ja lisätäksemme sen selaimeen. Aloitetaan manifest.json-tiedostosta kaksoisnapsauttamalla sitä aloittaaksesi työskentelyn JSONissa luodaksesi laajennuksen ja muuttaaksesi 'Googlen' taustaa.
Luo manifestitiedosto
Lisää manifest.json-tiedostoon alla näkyvä JSON-koodi. Tämä koodi on todellinen määritysskripti, jolla luodaan ja lisätään laajennus Google Chrome -selaimeen. Tämä JSON-koodi on aloitettu alustamalla muuttujan luetteloversiolle '2' ja luotavan laajennuksen nimellä, eli 'Muuta taustaa'. Tämän jälkeen lisäsimme laajennuksen lyhyen kuvauksen 'description'-muuttujaan.
Tämän lisäksi olemme lisänneet laajennuksen version nimellä '1.0'. Kun kaikki 'laajennuksen' perusasetukset on luotu, meidän on lisättävä polku kuvakuvakkeeseen, jota käytetään laajennusten kuvakkeena. Muuttuja 'selain' on määritetty määrittämään laajennuskuvake Google Chrome -selaimen ylätehtäväpalkkiin, eli siihen, missä kaikki laajennukset näkyvät sen jälkeen, kun ne on otettu käyttöön myöhempää käyttöä varten tietyillä tai kaikilla sivustoilla. Tämän jälkeen olemme lisänneet polun kolmeen erikokoiseen kuvatiedostoon, jotta selain voi käyttää joka kerta eri tiedostoja.
Tämän lisäksi 'page_action' -muuttujaa on käytetty näyttämään, mikä kuva näytetään, kun napsautat 'laajennukset' -kuvaketta Google Chromen ylätehtäväpalkista. Siinä on käytetty 'Default_icon' -muuttujaa sekä sen kolmea eri polkuarvoa kuville, joita käytetään kuvakkeina jokaisessa uudelleenlatauksessa. Tähän tarkoitukseen käytetään kolmea erilaista kuvatiedostoa. Viimeinen content_scripts-muuttuja ottaa siihen yhteensä 2 uutta muuttujaa, eli osumat ja CSS. Matches-muuttuja sisältää polun verkkosivustolle, jota muutetaan tämän uuden laajennuksen käytön jälkeen. Tämän lisäksi muuttuja 'CSS' sisältää CSS-tiedoston nimen, jota käytetään Google.com-sivuston muotoiluun laajennuksen hakemisen jälkeen, eli Google.comin muotoiluun jokaisen uudelleenlatauksen jälkeen, kun laajennus otetaan käyttöön. Nyt kun tämä koodi on valmis ja valmis käytettäväksi, tallenna se nopeasti ja siirry 'main.css'-tiedostoon.
Main.css CSS-tiedostoon olemme lisänneet tyyliä luotavalle manifest-tiedostotunnisteelle. Tyyliä käytettäisiin käyttämällä html-tunnistetta 'body' eli sitä sovelletaan luettelotiedoston koko 'body'-alueelle. Olemme asettaneet Google.comin uuden taustan käyttämällä hakukoneen kuvatiedoston URL-osoitetta. Tallenna nyt koodisi ennen mitään.
Kun vaaditut koodit, eli manifest.json- ja main.css-tiedosto on suoritettu, meidän on avattava Extensions-apuohjelma Google Chrome -selaimessa URL-osoitteen chrome://extensions kautta uudessa välilehdessä. Extensions-apualue avataan. Kehittäjätilassa sinun on ladattava pakkaamaton 'Extension'-kansio paikallisesta järjestelmästäsi tehdäksesi siitä laajennus alla olevassa kuvassa näkyvän 'lataa pakkaamaton' -painikkeen kautta. Laajennus on lisätty tehokkaasti Chrome-selaimeen näytetyllä tavalla. Poista virheet, jotta se toimii täysin.
Valitse 'laajennus'-kuvakkeesta 'Muuta taustaa' -laajennus näyttääksesi se tehtäväpalkissa, eli 'C'-kuvakelaajennus.
Google.comin uudelleenlatauksen jälkeen sen tausta päivitettiin tällä laajennuksella.
Johtopäätös
Windows-järjestelmän selainten käytön selityksestä lähtien olemme myös keskustelleet laajennusten tärkeydestä missä tahansa selaimessa. Laajennusten lyhyen selityksen jälkeen olemme selittäneet tavan käyttää manifestin JSON-tiedostoa laajennuksen luomiseen Google Chrome -selaimelle ja kuinka käyttää sitä Google.com-hakukoneen taustan vaihtamiseen. Ladattuamme laajennuksen Google Chromeen, olemme käyttäneet sitä Google.comissa sen taustan vaihtamiseen.