Uzantı Geliştirme

Bu rehber, Artado Search için uzantılar oluşturmanıza yardımcı olacaktır. Uzantılar; özel işlevler eklemenize, kullanıcı deneyimini geliştirmenize veya üçüncü taraf hizmetlerini doğrudan Artado Search'e entegre etmenize olanak tanır.

Başlarken

Artado Search için bir uzantı geliştirmek için temel düzeyde HTML, CSS ve 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. JavaScript'in temellerini öğrenmek için ilgili dokümantasyonları inceleyebilirsiniz.

İhtiyacınız Olacak Araçlar

• Metin Düzenleyici veya IDE (İsteğe Bağlı): Visual Studio Code, Sublime Text veya Atom gibi herhangi bir kod düzenleyiciyi kullanın.
• Web Tarayıcısı: Uzantınızı test etmek ve hata ayıklamak (debug) için.

Temeller

İlk Uzantınızı Oluşturma

1. Yeni Bir JavaScript Dosyası Oluşturun:

• Metin düzenleyicinizde yeni bir .js dosyası oluşturarak başlayın.
• Bu dosya, uzantınızın mantığını (logic) içerecektir.

2. Temel Yapı:

• İşte başlamanız için basit bir şablon:

if (window.location.pathname === "/search") { // Kullanıcı arama sayfasındaysa kodu çalıştırır
const urlParams = new URLSearchParams(window.location.search);
const search = urlParams.get('i').replace("+", " ").trim()
   .replace(/[!"#\$%&'\(\)\*\+,-\.\/:;<=>\?@\[\\\]\^_`{\|}~]/g, "").replace(/ +/g, " "); // Aranan sorguyu alır

const searches = [
   "whats my ip",
   "what is my ip",
   "what my ip",
   "my ip",
];

if (searches.includes(search)) { // Sorgunun IP hakkında olup olmadığını kontrol eder
   fetch('https://api.ipify.org?format=json')
       .then(response => response.json())
       .then(data => {
           var element = document.createElement("div"); // Arama sayfasında bir öğe oluşturur
           element.className = "card";
           element.style = "border: 1px solid #bdbdbd; text-transform: none";
           element.innerHTML = `<p>Your IP address is: <code>${data.ip}</code></p>`;

           document.getElementById("web_results").insertBefore(element, document.getElementById("web_results").firstChild);
       });
 }
}

3. Uzantıyı Yükleyin:

• Uzantınızı test etmek için Artado Search'e yükleyin. Bunu, kodunuzu tarayıcının konsoluna yapıştırarak manuel olarak veya betiğinizi Artado Search'e enjekte eden bir tarayıcı uzantısı oluşturarak yapabilirsiniz.

4. Test Etme:

• Tarayıcınızda Artado Search'ü açın.
• Sayfayı incelemek, uzantınızı çalıştırmak ve sorunları gidermek için tarayıcının geliştirici araçlarını (F12 veya Ctrl+Shift+I) kullanın.

Kullanıcı Arayüzünü (UI) Değiştirme

Özel HTML ekleyerek veya mevcut öğeleri değiştirerek Artado Search arayüzünü de modifiye edebilirsiniz:

(function() {
    // Arama çubuğuna özel bir buton ekle
    let button = document.createElement("button");
    button.innerText = "Custom Action";
    button.onclick = function() {
        alert("Button clicked!");
    };
    document.querySelector("#searchbar").appendChild(button);
})();

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

Örnek Uzantılar

İşte Artado topluluğu tarafından geliştirilen birkaç örnek uzantı:

• SecimCountdown: 2024 Türkiye yerel seçimleri için bir geri sayım aracı.
• Dictionary Widget: Artado Search için bir sözlük aracı uzantısı.
• What is my IP: "whats my ip" gibi aramalar için "IP adresim nedir" aracı.

Daha Fazlasını Öğrenin

Daha gelişmiş uzantılar oluşturmak için JavaScript ve web API'leri hakkındaki bilginizi derinleştirmeniz gerekecektir:

• JavaScript Temelleri - JavaScript'in temellerini öğrenin.
• JavaScript.info - Ayrıntılı eğitimler ve rehberler.
• MDN Web Docs - Kapsamlı JavaScript referansı.

Uzantılarınızı Yükleyin

Uzantınız hazır olduğunda, onu Artado Devs üzerinden dünyayla paylaşın:

1. Hesap Oluşturun: Artado Devs'e kaydolun veya giriş yapın.
2. Uzantınızı Yükleyin: Bir açıklama sağlayın, dosyalarınızı yükleyin ve çalışmanızı Artado topluluğuyla paylaşın.

---

Bu rehber, Artado Search için uzantılar geliştirmeye ve paylaşmaya başlamanız için ihtiyacınız olan her şeyi size sağlayacaktır. Artado deneyimini inşa etmekten ve geliştirmekten keyif alın!