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

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:



Ve cevap olarak da bana bu kodları yazdı:













Ş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,



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



Ş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.)



Ş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.)



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.



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.



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.



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.)



Ş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.



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.
 

Dosya Ekleri

  • Ekran görüntüsü 2024-08-30 175455.png
    106,6 KB · Görüntüleme: 39
Genişletmek için tıkla...
Ellerinize sağlık hocam. Güzel rehber.
 
İfadeler: RDJ

Bilgilendirici bir rehber olmuş. Arayıpta bulamadığımız eklentileri kendimiz yapabiliriz.
 
Arayüz açısından eklenti nasıl, onu da gösterebilir misiniz?
 
İfadeler: RDJ


Hocam bu sekilde bir cevap aldim neden?
 
iKayraOnur dedi:
Arayüz açısından eklenti nasıl, onu da gösterebilir misiniz?
Genişletmek için tıkla...

Hocam 3 gün hatalı boşluktan dolayı ceza almıştım. Sizlere geç cevap verdiğim için özür dilerim. Arayüz olarak bu şekilde:

Ahmet06han dedi:
Eki Görüntüle 2298252

Hocam bu sekilde bir cevap aldim neden?
Genişletmek için tıkla...

Hocam 4O modelinde denemeniz ve veri analizi limitini doldurmamanız gerekiyor. OpenAI'ın yeni çıkartmış olduğu 4O mini modeli o görevi gerçekleştiremiyor.
Eğer yaptığım uzantıyı sevdiyseniz bıraktığım kodların hepsini ChatGPT'ye kopyala yapıştır yaparak ZIP haline getirtebilirsiniz.

JSON: 
{
 "manifest_version": 3,
 "name": "Ses Yükseltici ve Azaltıcı",
 "version": "1.0",
 "description": "Ses seviyesini artırıp azaltan Chrome uzantısı.",
 "action": {
 "default_popup": "popup.html",
 "default_icon": {
 "16": "icon16.png",
 "128": "icon128.png"
 }
 },
 "background": {
 "service_worker": "background.js"
 },
 "permissions": [
 "activeTab",
 "scripting"
 ]
}

HTML: 
<!DOCTYPE html>
<html lang="tr">
<head>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <link rel="stylesheet" href="styles.css">
 <title>Ses Yükseltici ve Azaltıcı</title>
</head>
<body>
 <button id="languageButton">Language</button>
 <div id="buttonsContainer">
 <button id="increaseVolume">Sesi Artır</button>
 <button id="decreaseVolume">Sesi Azalt</button>
 </div>
 <script src="popup.js"></script>
</body>
</html>

CSS: 
body {
 font-family: Arial, sans-serif;
 text-align: center;
 width: 200px;
 padding: 20px;
}

button {
 margin: 10px 0;
 padding: 10px;
 width: 100%;
}

#languageButton {
 background-color: lightgray;
}

#buttonsContainer {
 margin-top: 20px;
}

CSS: 
body {
 font-family: Arial, sans-serif;
 text-align: center;
 width: 200px;
 padding: 20px;
}

button {
 margin: 10px 0;
 padding: 10px;
 width: 100%;
}

#languageButton {
 background-color: lightgray;
}

#buttonsContainer {
 margin-top: 20px;
}

JSON: 
document.addEventListener('DOMContentLoaded', function() {
 const increaseVolumeButton = document.getElementById('increaseVolume');
 const decreaseVolumeButton = document.getElementById('decreaseVolume');
 const languageButton = document.getElementById('languageButton');

 // Başlangıç dili Türkçe.
 let currentLanguage = 'tr';

 // Dile göre metinleri ayarla.
 function updateText() {
 if (currentLanguage === 'tr') {
 increaseVolumeButton.textContent = 'Sesi Artır';
 decreaseVolumeButton.textContent = 'Sesi Azalt';
 } else {
 increaseVolumeButton.textContent = 'Increase Volume';
 decreaseVolumeButton.textContent = 'Decrease Volume';
 }
 }

 // Dil değiştirme butonuna tıklandığında.
 languageButton.addEventListener('click', function() {
 const userLanguage = prompt('Dil seçiniz / Choose a language', 'Türkçe/English');
 if (userLanguage.toLowerCase() === 'english') {
 currentLanguage = 'en';
 } else {
 currentLanguage = 'tr';
 }
 updateText();
 });

 // Sesi artırma butonuna tıklandığında.
 increaseVolumeButton.addEventListener('click', function() {
 chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
 chrome.scripting.executeScript({
 target: {tabId: tabs[0].id},
 func: changeVolume,
 args: [0.1] // Ses artırma oranı.
 });
 });
 });

 // Sesi azaltma butonuna tıklandığında.
 decreaseVolumeButton.addEventListener('click', function() {
 chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
 chrome.scripting.executeScript({
 target: {tabId: tabs[0].id},
 func: changeVolume,
 args: [-0.1] // Ses azaltma oranı.
 });
 });
 });

 function changeVolume(change) {
 const video = document.querySelector('video');
 if (video) {
 video.volume = Math.min(Math.max(video.volume + change, 0), 1);
 }
 }

 updateText(); // Başlangıç metinlerini ayarla.
});

JSON: 
chrome.runtime.onInstalled.addListener(function() {
 console.log("Ses Yükseltici ve Azaltıcı uzantısı yüklendi.");
});

CSS kodunu yanlışlıkla 2 defa yazmışım kusura bakmayın.
 

Dosya Ekleri

  • Ekran görüntüsü 2024-09-02 200421.png
    3,4 KB · Görüntüleme: 39
  • Ekran görüntüsü 2024-09-02 200750.png
    10,4 KB · Görüntüleme: 36
Son düzenleyen: Moderatör:
Mesaj yazmak için giriş yapmalı ya da kaydolmalısınız.

Benzer konular

U
Chat GPT-4O'ya YouTube için kodlatılan Chrome eklentisi
Mesaj
4
Görüntüleme
697
umttylldz
U
  • Soru
ChatGPT arama yapmıyor
Mesaj
3
Görüntüleme
692
kuby1234
ChatGPT 4O Plus özellikleri kullanılamıyor
Mesaj
4
Görüntüleme
1.532
yasin tarhan11
  • Soru
ChatGPT ''ömür'' üyeliği nedir?
Mesaj
7
Görüntüleme
9.438
653861
6
Chat-GPT 4o Jailbreak yapma komutu
Mesaj
5
Görüntüleme
5.056
Parti Şapkası
Menü
Giriş yap
Kaydol
Bu siteyi kullanmak için çerezler gereklidir. Siteyi kullanmaya devam etmek için çerezleri kabul etmelisiniz. Daha Fazlasını Öğren.…