(Rehber) ChatGPT ile Chrome uzantısı yapımı

Okyanus Akdeniz

Öğrenci
Katılım
4 Eylül 2024
Mesajlar
2
Reaksiyon puanı
0
Puanları
1
Arkadaşlar bugün sizlere ChatGPT ile nasıl uzantı yapılacağını anlatmak istedim.aşağıdan devam edeyim:
İlk öncelikle ChatGPT'ye giriyoruz ve ardından ona bir promt girmemiz gerekiyor. ben ona şöyle bir promt girdim:

Ekran görüntüsü 2024-08-30 173043.png


Ve cevap olarak da bana bu kodları yazdı:

Ekran görüntüsü 2024-08-30 173852.png


Ekran görüntüsü 2024-08-30 173909.png


Ekran görüntüsü 2024-08-30 173924.png


Ekran görüntüsü 2024-08-30 173937.png


Ekran görüntüsü 2024-08-30 173952.png


Ekran görüntüsü 2024-08-30 174005.png


Şu an ChatGPT kodları bize verdi ve bizim şimdi buradaki tüm kodları klasöre atıp icon eklememiz gerekiyor.ChatGPT'nin analiz etme özelliği sayesinde hem Plus, hem de Free aboneliği olanlar ChatGPT'ye 'bana yazdığın kodların hepsine icon ekleyerek ZIP haline getirir misin?' diyerek ZIP haline getirtip ayıkladıktan sonra uzantınız hazır fakat ben analiz etme sınırını doldurduğum için kendim klasör haline getirip icon ekleyeceğim.o aşamaları da ekliyorum,ama ZIP haline getirten bu kısmı atlayıp uzantıyı Chrome'a ekleme kısmına geçebilirler.
Uzantıya icon ekleyip klasör haline getiriyoruz:
İlk öncelikle şimdi kodları ChatGPT'den kopyalıyoruz,

Ekran görüntüsü 2024-08-30 174827.png


Sonrasında ise masastümüze gelip bir adet metin belgesi oluşturuyoruz.(ben öyle yapıyorum.)

Ekran görüntüsü 2024-08-30 175455.png


Şimdi metin belgemizi masaüstümüze oluşturduktan sonra adını manifest.JSON yapıyoruz.(TXT formatını sildikten sonra JSON formatını yazmanız gerekiyor.)

Ekran görüntüsü 2024-08-30 175850.png


Şimdi ona sağ tıklayarak birlikte aç seçeneğine tıklıyoruz,sonrasında ister notepad ile ister Visual Studio Code açıyoruz, sonrasında da ChatGPT'den almış olduğumuz kodu buraya kopyala yapıştır yapıp kaydediyoruz. (aramızda Visual Studio'ya sahip olmayan olabileceği için ben metin Notepad'de göstereceğim.)

Ekran görüntüsü 2024-08-30 180208.png


Bu işlemlerin hepsini her kod için yapıyoruz. dosya formatlarına dikkat ederek popup, background gibi kodları masaüstümüze ekliyoruz.
Şimdi o işlemlerin hepsini bitirdikten sonra masaüstümüzde sağ tık yapıp yeni→klasör işlemini uyguluyoruz.

Ekran görüntüsü 2024-08-30 183231.png


Sonra masaüstüne attığımız gerekli kodları klasörümüzün içine atıyoruz. sonrasında o klasöre tıklayıp bir klasör daha açıyoruz ve ismini 'icons' koyuyoruz.

Ekran görüntüsü 2024-08-30 184519.png


O işlem bittikten sonra da https://www.flaticon.com/ adresine gidip icon görselimizi ayarlamımız gerekecek.(ChatGPT ZIP haline getirdiğinde sadece tek renk olan Icon'lardan ekliyor.)Şimdi ben şu anda bir ses azaltıp yükselten bir uzantı yaptığım için sitede 'voice' araması yaparak gerekli ikonları indireceğim.

Ekran görüntüsü 2024-08-30 184950.png


Benim seçtiğim icon buydu.şimdi ben bunları 16x16 ve 128x128 boyutunda indireceğim. (kodda 48x48 boyutuda yer alıyor fakat bu sitede 48x48 boyutu yok.o yüzden ben koddan sildim 48x48 boyutunu.)

Ekran görüntüsü 2024-08-30 185237.png


Şimdi de buradan PNG formatında 16x16 ve 128x128 boyutlarını indiriyoruz. indirdikten sonra indirilenlerden masaüstüne atıyoruz iconlarımızı.ve oluşturduğumuz klasöre tıklayıp o klasördende 'icons' klasörüne tıklıyoruz ve indirdiğimiz Icon'ları icons klasörüne atıyoruz.ama atınca isimlerini boyutlarına göre değiştirmemiz gerekiyor. yani 16x16 Icon'a icon16.PNG ismini,128x128 Icon'a ise icon128.PNG ismini vermemiz gerekiyor. bu işler bittikten sonra Chrome'a girip sağdaki üç noktaya tıklayarak uzantılar bölümünden uzantıları yönet'e basıyoruz.ve buradan geliştirici modunu açıyoruz.

Ekran görüntüsü 2024-08-30 194130.png


Daha sonrasında solda bulunan 'paketlenmemiş öge yükle' butonuna basıyoruz, ve kodu nereye attıysanız oradan seçip web mağazasına yüklüyorsunuz.ve artık kullananabilirsiniz.
 
Üst