Paano Gumawa ng Chrome Extension

Paano Gumawa Ng Chrome Extension



“Sa aming kasalukuyang buhay, mas sabik kaming gumamit ng mga social media app at ang Google Search engine para sa aming libangan at mga layunin sa paghahanap, ibig sabihin, magsaliksik ng ilang paksang pang-edukasyon sa pamamagitan ng search engine ng “Google” at makakuha din ng pangkalahatang kaalaman. Upang magamit ang Google search engine upang maghanap ng isang bagay, dapat ay mayroon na tayong browser na naka-install sa ating mga mobile phone, laptop, o personal na computer. Ang isa sa mga pinakaginagamit at mahusay na mga browser ng siglo ngayon ay ang 'Google Chrome' na browser na may maraming magagandang functionality kasama ang utility ng extension. Ang 'Extension' ay ang plugin na matatagpuan sa anumang browser upang paghigpitan o payagan ang mga website at iba't ibang mga function. Ang mga extension na ito ay karaniwang hindi naka-inbuilt; kailangan mong idagdag ang bawat extension sa iyong browser nang hiwalay kapag kinakailangan. Kung ikaw ay isang maliit na eksperto sa teknolohiya, maaaring alam mo ang paggamit ng mga manifest JSON file upang gumawa at magdagdag ng extension sa ilang hakbang. Samakatuwid, sasaklawin ng artikulong ito ang lahat ng hakbang na iyon upang lumikha ng bagong extension sa browser ng Google Chrome.

Bago tingnan ang paraan ng paggawa ng extension, kailangan mong tiyakin na ang iyong Google Chrome browser ay nailunsad na at ang 'Google' Search Engine ay walang anumang background. Makikita mo na ang larawang naka-attach sa ibaba ay walang background para sa search engine na 'Google.com,' ibig sabihin, puting background lang.'









Magdagdag ng Extension Folder



Buksan ang iyong Visual Studio Code tool nang mabilis mula sa mga app ng iyong Windows system. Maaaring tumagal ng hanggang 1 minuto upang maayos na mabuksan ang Visual Studio Code at paganahin ito para sa aming paggamit. Matapos itong mailunsad nang maayos at handa na para sa paggamit, idinagdag namin ang nabuo nang folder na 'Extension' dito sa pamamagitan ng listahan ng menu na 'File' sa tuktok na taskbar na ipinapakita sa ibaba. Matapos gawin ang folder na 'Extension', nagdagdag kami ng isa pang folder na pinangalanang 'imahe' dito na naglalaman ng mga imahe na gagamitin bilang isang icon para sa extension sa browser. Kasabay nito, nagdagdag kami ng isang 'manifest.json' file at isang javascript file na pinangalanang 'script.js' upang lumikha ng bagong extension at idagdag ito sa browser. Magsimula tayo sa manifest.json file sa pamamagitan ng pag-double click dito para magsimulang magtrabaho sa JSON para gumawa at gumamit ng extension para baguhin ang background ng 'Google.'





Lumikha ng Manifest File



Sa loob ng manifest.json file, dapat mong idagdag ang ipinapakita-sa ibaba ng 'JSON' code. Ang code na ito ay ang aktwal na script ng configuration para gumawa at magdagdag ng extension sa aming Google Chrome Browser. Ang JSON code na ito ay sinimulan sa pagsisimula para sa variable na bersyon ng manifest bilang '2' at ang pangalan ng isang extension na gagawin, ibig sabihin, 'Baguhin ang Background.' Pagkatapos nito, idinagdag namin ang maikling paglalarawan para sa aming extension sa loob ng variable na 'paglalarawan'.

Kasabay nito, idinagdag namin ang bersyon ng isang extension bilang '1.0'. Matapos magawa ang lahat ng pangunahing configuration para sa 'extension', kailangan naming idagdag ang path sa icon ng imahe na gagamitin bilang isang icon para sa mga extension. Ang variable na 'browser' ay tinukoy upang itakda ang icon ng extension para sa tuktok na taskbar ng Google Chrome browser, ibig sabihin, kung saan ang lahat ng mga extension ay ipinapakita pagkatapos paganahin ang mga ito para sa hinaharap na paggamit para sa partikular o lahat ng mga site. Pagkatapos nito, idinagdag namin ang landas sa tatlong mga file ng imahe ng iba't ibang laki upang ang browser ay maaaring gumamit ng iba't ibang mga file sa bawat oras.

Kasabay nito, ang variable na 'page_action' ay ginamit upang ipakita kung anong larawan ang ipapakita pagkatapos mag-click sa icon na 'mga extension' mula sa tuktok na taskbar ng Google Chrome. Ang variable na 'Default_icon' ay ginamit sa loob nito, kasama ang tatlong magkakaibang value ng path nito para sa mga larawang gagamitin bilang mga icon sa bawat reload. Tatlong magkakaibang mga file ng imahe ang ginagamit para sa layuning ito. Ang huling content_scripts na variable ay tumatagal ng kabuuang 2 bagong variable dito, ibig sabihin, mga tugma at CSS. Ang variable na 'tugma' ay naglalaman ng path patungo sa website na babaguhin pagkatapos na gamitin ang bagong extension na ito. Kasabay nito, ang variable na 'CSS' ay naglalaman ng pangalan ng isang CSS file na gagamitin para sa pag-istilo ng Google.com pagkatapos mag-apply para sa extension, ibig sabihin, pag-istilo sa Google.com pagkatapos ng bawat reload sa pagpapagana ng extension. Ngayong kumpleto na ang code na ito at handa nang gamitin, i-save lang ito nang mabilis at lumipat patungo sa 'main.css' na file.

Sa loob ng main.css CSS file, nagdaragdag kami ng styling para magawa ang aming manifest file extension. Ilalapat ang estilo gamit ang html na 'body' na tag, ibig sabihin, na ilalapat sa buong 'body' na bahagi ng manifest file. Itinakda namin ang bagong background para sa Google.com gamit ang 'URL' ng isang file ng imahe mula sa search engine. Ngayon, i-save ang iyong code bago ang anumang bagay.

Pagkatapos makumpleto ang mga kinakailangang code, ibig sabihin, manifest.json at main.css file, kailangan naming buksan ang Extensions utility sa Google Chrome browser sa pamamagitan ng URL na chrome://extensions” sa bagong tab. Ang Extensions utility area ay binuksan. Mula sa developer mode nito, kailangan mong i-load ang hindi naka-pack na 'Extension' na folder mula sa iyong lokal na system upang gawin itong extension sa pamamagitan ng button na 'load unpackaged' na ipinapakita sa larawan sa ibaba. Ang extension ay mabisang naidagdag sa Chrome browser, gaya ng ipinakita. Alisin ang mga error para ganap itong gumana.

Mula sa icon na 'extension', piliin ang extension na 'Baguhin ang Background' upang ipakita ito sa taskbar, ibig sabihin, ang extension ng icon na 'C'.

Pagkatapos i-reload ang Google.com, na-update ang background nito gamit ang extension na ito.

Konklusyon

Simula sa paliwanag ng paggamit ng mga browser sa Windows system, tinalakay din namin ang kahalagahan ng mga extension sa anumang browser. Pagkatapos ng maikling paliwanag ng mga extension, ipinaliwanag namin ang paraan ng paggamit ng manifest JSON file upang lumikha ng extension para sa browser ng Google Chrome at kung paano ito gamitin upang baguhin ang background para sa search engine ng 'Google.com'. Pagkatapos i-load ang extension sa Google chrome, ginagamit namin ito sa Google.com upang baguhin ang background nito.