Web taray\u0131c\u0131 uzant\u0131lar\u0131, dijital deneyimimizi ki\u015fiselle\u015ftirmenin ve geli\u015ftirmenin g\u00fc\u00e7l\u00fc bir yolunu sunar. Ancak, bir Chrome uzant\u0131s\u0131 geli\u015ftirmek genellikle karma\u015f\u0131k bir yap\u0131land\u0131rma, \u00e7ok say\u0131da dosya ve \u00f6zel bir derleme s\u00fcreci gerektirebilir. Peki, ya bu s\u00fcreci basitle\u015ftiren, tek bir dosyadan tam i\u015flevsel bir uzant\u0131 olu\u015fturman\u0131za olanak tan\u0131yan bir ara\u00e7 olsayd\u0131? \u0130\u015fte tam da bu noktada Kiro devreye giriyor. Bu kapsaml\u0131 rehberde, Kiro kullanarak s\u0131f\u0131rdan, tek bir JavaScript veya TypeScript dosyas\u0131ndan ba\u015flayarak, tam te\u015fekk\u00fcll\u00fc bir Chrome uzant\u0131s\u0131n\u0131 nas\u0131l ad\u0131m ad\u0131m geli\u015ftirebilece\u011finizi, geli\u015fmi\u015f \u00f6zelliklerini ve ger\u00e7ek d\u00fcnya senaryolar\u0131ndaki uygulamalar\u0131n\u0131 ke\u015ffedece\u011fiz. Geleneksel uzant\u0131 geli\u015ftirme karma\u015fas\u0131na veda edip, modern ve ak\u0131c\u0131 bir yakla\u015f\u0131mla projelerinizi hayata ge\u00e7irmeye haz\u0131r olun!<\/p>\n
Chrome uzant\u0131lar\u0131, web taray\u0131c\u0131m\u0131z\u0131n i\u015flevselli\u011fini art\u0131ran, kullan\u0131c\u0131lara \u00f6zel yetenekler sunan k\u00fc\u00e7\u00fck ama g\u00fc\u00e7l\u00fc yaz\u0131l\u0131m par\u00e7ac\u0131klar\u0131d\u0131r. Bir\u00e7o\u011fumuz i\u00e7in vazge\u00e7ilmez olan bu uzant\u0131lar, arka planda web sayfalar\u0131n\u0131 analiz etmekten, kullan\u0131c\u0131 aray\u00fcz\u00fcn\u00fc de\u011fi\u015ftirmeye, hatta belirli web siteleri i\u00e7in \u00f6zel ara\u00e7 \u00e7ubuklar\u0131 olu\u015fturmaya kadar geni\u015f bir yelpazede g\u00f6rev alabilir. Ancak, bir uzant\u0131n\u0131n arkas\u0131ndaki geli\u015ftirme s\u00fcreci, \u00f6zellikle yeni ba\u015flayanlar i\u00e7in g\u00f6z korkutucu olabilir. \u00d6ncelikle, bir Chrome uzant\u0131s\u0131n\u0131n temel yap\u0131s\u0131 genellikle birden fazla dosyadan olu\u015fur. Bu dosyalar aras\u0131nda Geleneksel bir Chrome uzant\u0131s\u0131 geli\u015ftirirken, bu farkl\u0131 bile\u015fenleri y\u00f6netmek, aralar\u0131nda ileti\u015fimi sa\u011flamak ve nihayetinde da\u011f\u0131t\u0131m i\u00e7in paketlemek, belirli zorluklar\u0131 beraberinde getirir. \u00d6rne\u011fin, bir geli\u015ftiricinin hem JavaScript hem de HTML\/CSS dosyalar\u0131n\u0131 y\u00f6netmesi, bunlar\u0131n taray\u0131c\u0131 taraf\u0131ndan d\u00fczg\u00fcn bir \u015fekilde y\u00fcklenmesini sa\u011flamas\u0131 ve t\u00fcm ba\u011f\u0131ml\u0131l\u0131klar\u0131 do\u011fru bir \u015fekilde yap\u0131land\u0131rmas\u0131 gerekir. Dahas\u0131, modern web geli\u015ftirme s\u00fcre\u00e7lerinde s\u0131kl\u0131kla kullan\u0131lan mod\u00fcl sistemleri, TypeScript derlemesi veya CSS \u00f6n i\u015flemcileri gibi ara\u00e7lar\u0131n, uzant\u0131 geli\u015ftirme ortam\u0131na entegrasyonu ek bir karma\u015f\u0131kl\u0131k katman\u0131 ekleyebilir. Bu durum, \u00f6zellikle k\u00fc\u00e7\u00fck ve h\u0131zl\u0131 bir uzant\u0131 fikrini hayata ge\u00e7irmek isteyenler i\u00e7in ciddi bir ba\u015flang\u0131\u00e7 engeli olu\u015fturabilir. Her proje i\u00e7in ba\u015ftan bir derleme arac\u0131 (\u00f6rne\u011fin Webpack veya Rollup) kurmak, yap\u0131land\u0131rmak ve bak\u0131m\u0131n\u0131 yapmak, geli\u015ftirme s\u00fcresini uzatan ve verimlili\u011fi d\u00fc\u015f\u00fcren fakt\u00f6rlerdir. \u0130\u015fte Kiro, tam da bu geleneksel zorluklara modern ve zarif bir \u00e7\u00f6z\u00fcm sunarak, geli\u015ftiricilerin sadece kod yazmaya odaklanmas\u0131n\u0131 sa\u011flamay\u0131 hedefler. Tek dosya felsefesiyle, uzant\u0131 geli\u015ftirme s\u00fcrecindeki bu engelleri ortadan kald\u0131rmay\u0131 ba\u015far\u0131r.<\/p>\n Kiro, modern JavaScript ve TypeScript tabanl\u0131 Chrome uzant\u0131lar\u0131 geli\u015ftirmek i\u00e7in tasarlanm\u0131\u015f yenilik\u00e7i bir derleme arac\u0131d\u0131r. Temel amac\u0131, uzant\u0131 geli\u015ftirme s\u00fcrecini m\u00fcmk\u00fcn oldu\u011funca basitle\u015ftirmek ve h\u0131zland\u0131rmakt\u0131r. Geleneksel uzant\u0131 geli\u015ftirme ortamlar\u0131n\u0131n aksine, Kiro’nun en dikkat \u00e7ekici \u00f6zelli\u011fi, tek bir JavaScript veya TypeScript dosyas\u0131ndan t\u00fcm bir Chrome uzant\u0131s\u0131n\u0131 olu\u015fturabilmesidir. Bu “tek dosya felsefesi”, geli\u015ftiricilerin farkl\u0131 uzant\u0131 bile\u015fenlerini (arka plan betikleri, i\u00e7erik betikleri, a\u00e7\u0131l\u0131r pencereler ve hatta se\u00e7enekler sayfalar\u0131) ayn\u0131 dosya i\u00e7inde tan\u0131mlamas\u0131na olanak tan\u0131r. Kiro, bu tek dosyay\u0131 al\u0131r, i\u00e7erisindeki \u00f6zel direktifleri yorumlar ve otomatik olarak bir Chrome uzant\u0131s\u0131n\u0131n gerektirdi\u011fi t\u00fcm bile\u015fenleri (HTML, CSS, JavaScript dosyalar\u0131 ve Kiro’nun sundu\u011fu kolayl\u0131klar sadece tek dosya yakla\u015f\u0131m\u0131yla s\u0131n\u0131rl\u0131 de\u011fildir. Ayn\u0131 zamanda geli\u015ftirme deneyimini de \u00f6nemli \u00f6l\u00e7\u00fcde iyile\u015ftirir. \u00d6rne\u011fin, Kiro ile ilk Chrome uzant\u0131n\u0131z\u0131 olu\u015fturmak, \u015fa\u015f\u0131rt\u0131c\u0131 derecede basittir. Bu b\u00f6l\u00fcmde, “Hello World” mesaj\u0131n\u0131 g\u00f6steren basit bir a\u00e7\u0131l\u0131r pencere (popup) uzant\u0131s\u0131n\u0131 ad\u0131m ad\u0131m nas\u0131l geli\u015ftirece\u011finizi \u00f6\u011frenece\u011fiz. \u0130lk olarak, Kiro’yu sisteminize kurman\u0131z gerekiyor. Kiro bir Node.js paketi oldu\u011fu i\u00e7in, sisteminizde Node.js ve npm’in (Node Package Manager) kurulu oldu\u011fundan emin olun. Kurulum i\u015flemi olduk\u00e7a basittir ve tek bir komutla global olarak ger\u00e7ekle\u015ftirilebilir:<\/p>\n <\/code><\/p>\n Bu komut, Kiro CLI'y\u0131 (Command Line Interface) sisteminize y\u00fckler. Kurulum tamamland\u0131ktan sonra, projeniz i\u00e7in yeni bir dizin olu\u015fturun ve i\u00e7ine girin:<\/p>\n <\/code><\/p>\n \u015eimdi, t\u00fcm uzant\u0131 mant\u0131\u011f\u0131m\u0131z\u0131 i\u00e7erecek olan ana dosyay\u0131 olu\u015ftural\u0131m. Bu dosyan\u0131n ad\u0131 genellikle <\/code><\/p>\nmanifest.json<\/code> (uzant\u0131n\u0131n meta verilerini, izinlerini ve bile\u015fenlerini tan\u0131mlayan temel dosya), background scripts<\/code> (uzant\u0131n\u0131n arka planda \u00e7al\u0131\u015fan ve genellikle olaylar\u0131 dinleyen ana mant\u0131\u011f\u0131), content scripts<\/code> (web sayfalar\u0131n\u0131n DOM’unu de\u011fi\u015ftiren veya onlarla etkile\u015fim kuran betikler) ve popup<\/code> sayfalar\u0131 (uzant\u0131n\u0131n simgesine t\u0131kland\u0131\u011f\u0131nda a\u00e7\u0131lan k\u00fc\u00e7\u00fck kullan\u0131c\u0131 aray\u00fczleri) bulunur.<\/p>\nKiro Nedir ve Chrome Uzant\u0131s\u0131 Geli\u015ftirmeye Nas\u0131l Bir Kolayl\u0131k Getirir?<\/h2>\n
manifest.json<\/code>) uygun bir \u015fekilde derler ve paketler.<\/p>\nkiro dev<\/code> komutu ile canl\u0131 yeniden y\u00fckleme (hot-reloading) \u00f6zelli\u011fini etkinle\u015ftirebilirsiniz, bu da kodunuzda yapt\u0131\u011f\u0131n\u0131z de\u011fi\u015fikliklerin uzant\u0131n\u0131za an\u0131nda yans\u0131mas\u0131n\u0131 sa\u011flar. Bu \u00f6zellik, hata ay\u0131klama ve h\u0131zl\u0131 prototipleme s\u00fcre\u00e7leri i\u00e7in paha bi\u00e7ilmezdir. Ayr\u0131ca, Kiro varsay\u0131lan olarak TypeScript deste\u011fi sunar; bu da daha g\u00fcvenli ve \u00f6l\u00e7eklenebilir kod yazman\u0131za olanak tan\u0131rken, geli\u015fmi\u015f hata kontrol\u00fc ve kod tamamlama gibi IDE \u00f6zelliklerinden faydalanman\u0131z\u0131 sa\u011flar. Mod\u00fcler yap\u0131ya sahip oldu\u011fu i\u00e7in, projenize harici NPM paketlerini kolayca dahil edebilir ve modern JavaScript ekosisteminin t\u00fcm avantajlar\u0131ndan yararlanabilirsiniz. Kiro, arka planda geli\u015fmi\u015f derleme ve optimizasyon teknikleri kullanarak, ortaya \u00e7\u0131kan uzant\u0131n\u0131n performansl\u0131 ve kaynak t\u00fcketimi a\u00e7\u0131s\u0131ndan verimli olmas\u0131n\u0131 sa\u011flar. Bu, geli\u015ftiricilerin karma\u015f\u0131k derleme yap\u0131land\u0131rmalar\u0131yla u\u011fra\u015fmak yerine, do\u011frudan uzant\u0131lar\u0131n\u0131n \u00e7ekirdek i\u015flevselli\u011fine odaklanmalar\u0131na olanak tan\u0131r, b\u00f6ylece daha k\u0131sa s\u00fcrede daha kaliteli uzant\u0131lar ortaya \u00e7\u0131karabilirler.<\/p>\nKiro ile \u0130lk Chrome Uzant\u0131n\u0131z\u0131 Olu\u015fturmaya Haz\u0131r m\u0131s\u0131n\u0131z?<\/h2>\n
\nnpm install -g kiro\n <\/pre>\n\nmkdir my-first-kiro-extension\ncd my-first-kiro-extension\n <\/pre>\nindex.ts<\/code> (TypeScript kullan\u0131yorsan\u0131z) veya index.js<\/code> (JavaScript kullan\u0131yorsan\u0131z) olabilir. Biz TypeScript'i tercih edece\u011fiz:<\/p>\n\ntouch index.ts\n <\/pre>\nindex.ts<\/code> dosyas\u0131n\u0131n i\u00e7eri\u011fi, uzant\u0131m\u0131z\u0131n t\u00fcm i\u015flevselli\u011fini tan\u0131mlayacak. Kiro'nun sihirli g\u00fcc\u00fc, HTML i\u00e7eri\u011fini ve JavaScript mant\u0131\u011f\u0131n\u0131 ayn\u0131 dosya i\u00e7inde nas\u0131l y\u00f6netebildi\u011finde yatar. A\u015fa\u011f\u0131daki kod blo\u011fu, basit bir a\u00e7\u0131l\u0131r pencere olu\u015fturan bir Kiro uzant\u0131s\u0131n\u0131 g\u00f6stermektedir:<\/p>\n\n\/\/ index.ts\n\n\/\/ kiro:popup direktifi, bu blo\u011fun bir popup sayfas\u0131n\u0131 temsil etti\u011fini belirtir.\n\/\/ \u0130\u00e7indeki HTML, uzant\u0131 simgesine t\u0131kland\u0131\u011f\u0131nda g\u00f6r\u00fcnt\u00fclenecektir.\n\/* kiro:popup *\/\nexport const popup = \n \n \n