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

RDJ dedi:

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:

Eki Görüntüle 2298109

Ve cevap olarak da bana bu kodları yazdı:

Eki Görüntüle 2298120

Eki Görüntüle 2298121

Eki Görüntüle 2298123

Eki Görüntüle 2298124

Eki Görüntüle 2298125

Eki Görüntüle 2298126

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

Eki Görüntüle 2298131

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

Eki Görüntüle 2298134

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

Eki Görüntüle 2298148

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

Eki Görüntüle 2298150

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.

Eki Görüntüle 2298182

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.

Eki Görüntüle 2298186

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.

Eki Görüntüle 2298190

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

Eki Görüntüle 2298191

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

Eki Görüntüle 2298228

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.

Genişletmek için tıkla...

RDJ dedi:

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:

Eki Görüntüle 2298109

Ve cevap olarak da bana bu kodları yazdı:

Eki Görüntüle 2298120

Eki Görüntüle 2298121

Eki Görüntüle 2298123

Eki Görüntüle 2298124

Eki Görüntüle 2298125

Eki Görüntüle 2298126

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

Eki Görüntüle 2298131

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

Eki Görüntüle 2298134

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

Eki Görüntüle 2298148

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

Eki Görüntüle 2298150

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.

Eki Görüntüle 2298182

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.

Eki Görüntüle 2298186

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.

Eki Görüntüle 2298190

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

Eki Görüntüle 2298191

Şimdi de buradan PNG formatında 16x16 ve 128x128 boyutlarını indiriyoruz. İndirdikten 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.

Eki Görüntüle 2298228

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.

Genişletmek için tıkla...

iKayraOnur dedi:

Arayüz açısından eklenti nasıl, onu da gösterebilir misiniz?

Genişletmek için tıkla...

Ahmet06han dedi:

Eki Görüntüle 2298252

Hocam bu sekilde bir cevap aldim neden?

Genişletmek için tıkla...

{
 "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"
 ]
}

<!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>

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;
}

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;
}

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

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