JS ile Uzantı Geliştirme

Search Dokümentasyonu Güncellendi Feb 28, 2026

Artado Uzantıları, JavaScript kullanarak Artado Search platformuna özel işlevler eklemenize olanak tanır. Bu kılavuz, size temel JavaScript kavramlarını anlatacak ve kendi uzantılarınızı geliştirmeniz için adım adım bir süreç sunacaktır.

Başlarken

Artado Search için bir uzantı oluşturmak için temel düzeyde JavaScript bilgisine sahip olmanız gerekir. JavaScript, tarayıcıda çalışan; web sayfalarının içeriğini değiştirmenize, API'lerle etkileşim kurmanıza ve daha fazlasına olanak tanıyan güçlü bir dildir.

Temel JavaScript Kavramları

Uzantı geliştirmeye başlamadan önce bazı temel JavaScript kavramlarını inceleyelim:

Değişkenler (Variables): Veri depolamak için kullanılır.
```
const name = "Artado";
let searchQuery = "JavaScript";
```
Fonksiyonlar (Functions): Belirli görevleri yerine getiren kod bloklarıdır.
```
function greetUser() {
 console.log("Artado Search'e hoş geldiniz!");
}
```

Koşullu İfadeler (Conditionals): Koşullara göre farklı kodlar çalıştırır.

if (searchQuery === "JavaScript") {
 console.log("JavaScript öğreniyorsunuz!");
} else {
 console.log("Başka bir şey arayın.");
}

Döngüler (Loops): Bir kod bloğunu birden çok kez tekrar eder.

for (let i = 0; i < 5; i++) {
 console.log("Döngü iterasyonu " + i);
}

DOM Manipülasyonu: JavaScript, web sayfalarının içeriğini ve görünümünü değiştirmek için Belge Nesne Modeli (DOM) ile etkileşime girebilir.
```
let heading = document.querySelector('h1');
heading.style.color = 'blue';
```

Tarayıcıda JavaScript Test Etme

JavaScript kodunuzu Geliştirici Araçları'nı kullanarak doğrudan tarayıcıda test edebilirsiniz:

Geliştirici Araçlarını Açın:

Web sayfasına sağ tıklayın ve İncele (Inspect) deyin.
Console (Konsol) sekmesine gidin.

JavaScript Çalıştırın:

Konsola JavaScript kodunu yazın ve yürütmek için Enter tuşuna basın.

Örnek:

console.log("Artado Search'ten merhaba!");

Bu, mesajı konsola yazdıracaktır.

Bir Artado Uzantısı Oluşturma

Bir API'den veri çeken ve bunu arama sonuçları sayfasında görüntüleyen basit bir Artado uzantısı oluşturalım.

Örnek: Sözlük Arama Uzantısı

Bu uzantı, arama sorgusunu alacak ve bir sözlük API'si kullanarak kelimenin tanımını getirecektir.

// "i" sorgu dizesi parametresini al
const queryString = window.location.search;
const urlParams = new URLSearchParams(queryString);
const query = urlParams.get('i');

// Bir sorgu olup olmadığını kontrol et
if (query) {
    const apiUrl = `https://api.dictionaryapi.dev/api/v2/entries/en/${query}`;

    // Sonuçları görüntülemek için yeni bir öğe oluştur
    const resultElement = document.createElement('div');
    resultElement.id = 'result';
    resultElement.style.textAlign = 'left';
    resultElement.style.marginLeft = '100px';
    resultElement.style.maxWidth = '500px';
    resultElement.style.backgroundColor = 'transparent';
    resultElement.style.border = "1px solid #bdbdbd";
    resultElement.style.borderRadius = "10px";
    resultElement.style.lineHeight = "20px";
    resultElement.style.padding = "10px";

    // Küçük ekranlar için medya sorgusu
    const mediaQuery = window.matchMedia('(max-width: 768px)');
    if (mediaQuery.matches) {
        resultElement.style.marginRight = 'auto';
        resultElement.style.marginLeft = 'auto';
    }

    // API'ye istek gönder
    fetch(apiUrl)
        .then(response => response.json())
        .then(data => {
            // JSON yanıtını işle
            const wordData = data[0];
            const word = wordData.word;
            const phonetics = wordData.phonetics;
            const meanings = wordData.meanings;

            // HTML temsilini oluştur
            let html = `<h2>${word}</h2>`;

            if (phonetics && phonetics.length > 0) {
                html += '<h3>Fonetik</h3>';
                phonetics.forEach(phonetic => {
                    html += `<p>${phonetic.text}</p>`;
                    if (phonetic.audio) {
                        html += `<audio controls><source src="${phonetic.audio}" type="audio/mpeg"></audio>`;
                    }
                });
            }

            if (meanings && meanings.length > 0) {
                html += '<h3>Anlamlar</h3>';
                meanings.forEach(meaning => {
                    html += `<p><strong>${meaning.partOfSpeech}</strong></p>`;
                    meaning.definitions.forEach(definition => {
                        html += `<p>${definition.definition}</p>`;
                    });
                });
            }

            // Oluşturulan HTML içeriğini ayarla
            resultElement.innerHTML = html;

            // resultElement'i sayfaya yerleştir
            const buttons = document.getElementById('buttons_r');
            buttons.insertAdjacentElement('afterend', resultElement);
        })
        .catch(error => {
            console.error('Veri çekme hatası:', error);
        });
}

Kodu Anlamak

Sorgu Dizesini Al: Kullanıcı tarafından girilen arama terimi olan i parametresini alarak başlıyoruz.
Sorgu Varlığını Kontrol Et: Bir arama terimi varsa, sözlük API'sinden veri çekme işlemine geçiyoruz.
Sonuç Öğesi Oluştur: Sayfada sonuçları göstermek için yeni bir div öğesi oluşturuyoruz.
API'den Veri Çek: fetch fonksiyonunu kullanarak tanımları almak için sözlük API'sine bir istek gönderiyoruz.
Veriyi İşle ve Görüntüle: Veriyi aldığımızda, HTML içeriği oluşturup sayfaya enjekte ediyoruz.

Uzantınızı Test Etme

Uzantı kodunuzu yayınlamadan önce doğrudan tarayıcı konsolunda test edebilirsiniz:

Geliştirici Araçlarını Açın: Artado Search sayfasında sağ tıklayın ve İncele deyin.
Konsola Gidin: Console sekmesine gidin.
Kodunuzu Yapıştırın ve Çalıştırın: Uzantı kodunuzu kopyalayıp konsola yapıştırın ve Enter'a basın.

Bu, uzantınızın nasıl çalıştığını görmenize ve gerekirse ayarlamalar yapmanıza olanak tanır.

Uzantınızı Yayınlama

Uzantınızdan memnun kaldığınızda, Artado Search üzerinde kullanılmak üzere yayınlayabilirsiniz.

Uzantınızı Yükleyin

Uzantınızı Artado Devs adresine yükleyerek Artado topluluğuyla paylaşabilirsiniz:

Hesap Oluşturun: Artado Devs'e kaydolun veya giriş yapın.
Uzantınızı Yükleyin: Bir açıklama sağlayın, JavaScript dosyanızı yükleyin ve uzantınızı paylaşın.

Daha Fazlasını Öğrenin

JavaScript çok yönlü bir dildir ve her zaman öğrenilecek daha fazla şey vardır. İşte bilginizi derinleştirmek için bazı kaynaklar:

JavaScript Temelleri (W3Schools)
JavaScript.info - Ayrıntılı eğitimler.
MDN Web Docs - Kapsamlı JavaScript dokümantasyonu.

Sonuç

Artado Search için uzantılar oluşturmak, deneyiminizi kişiselleştirmek ve yeni işlevler eklemek için harika bir yoldur. Sadece biraz JavaScript bilgisiyle, arama deneyiminizi geliştiren güçlü araçlar oluşturabilir ve bunları toplulukla paylaşabilirsiniz. İyi kodlamalar!