GitHub Sorun Zaman Çizelgelerindeki Gürültüyü Gizleyen Bir Chrome Uzantısı Oluşturmak (Copilot CLI ile)

GitHub Sorun Zaman Çizelgelerindeki Gürültüyü Gizleyen Bir Chrome Uzantısı Oluşturmak (Copilot CLI ile)

GitHub, geliştiriciler için vazgeçilmez bir platform olsa da, sorun (issue) zaman çizelgeleri bazen gereksiz veya “gürültülü” olaylarla dolabilir. Atanan kişilerin değişmesi, etiket eklenip çıkarılması, durum güncellemeleri gibi otomatik bildirimler, önemli tartışmaları veya kod değişikliklerini gözden kaçırmamıza neden olabilir. Bu makalede, bu tür gürültülü olayları gizleyerek daha temiz ve odaklanmış bir GitHub deneyimi sunan bir Chrome uzantısını nasıl geliştirdiğimizi, özellikle de Copilot CLI’ın bu süreçteki rolünü detaylıca inceleyeceğiz.

GitHub Sorun Zaman Çizelgelerindeki Gürültüyü Anlamak

GitHub sorun zaman çizelgeleri, bir sorunla ilgili tüm etkinliklerin kronolojik bir kaydını sunar. Ancak bu kayıt, bazen aşırı bilgi yüküne yol açabilir.

Neden Gürültülü Olaylar Bir Sorun Teşkil Eder?

Geliştiriciler olarak, bir sorunun özüne inmek ve ilgili tartışmaları, kod değişikliklerini veya önemli kararları hızlıca görmek isteriz. Gürültülü olaylar, bu akışı bozar ve değerli bilgilerin arasında kaybolmasına neden olur. Sürekli etiket, atama veya durum değişiklikleri, asıl konudan uzaklaştırır ve zaman kaybına yol açar.

Tipik Gürültülü Olay Türleri

GitHub zaman çizelgesinde sıkça karşılaşılan ve genellikle gizlemek isteyebileceğimiz olay türleri şunlardır:

• Atanan kişinin değişmesi (assigned/unassigned)
• Etiketlerin eklenmesi veya çıkarılması (labeled/unlabeled)
• Milestone değişiklikleri (milestoned/demilestoned)
• Durum değişiklikleri (closed/reopened, locked/unlocked)
• Referanslar (örneğin, başka bir pull request’ten veya commit’ten referanslar)
• Bazı bot bildirimleri veya otomatikleştirilmiş yorumlar

Geliştirici Verimliliğine Etkileri

Gürültülü zaman çizelgeleri, geliştiricilerin sorunları anlama ve çözme süreçlerini yavaşlatır. Sürekli olarak alakasız bildirimleri filtrelemek zorunda kalmak, bilişsel yükü artırır ve odaklanmayı zorlaştırır. Bu da genel verimlilikte düşüşe ve potansiyel olarak önemli bilgilerin gözden kaçırılmasına yol açabilir.

Çözüm: Chrome Uzantısı Fikri ve Temel Yaklaşım

Bu soruna yönelik en pratik çözümlerden biri, tarayıcı tabanlı bir uzantı geliştirmektir. Chrome uzantıları, web sayfalarının içeriğini anında değiştirebilme yeteneği sayesinde bu tür bir manipülasyon için idealdir.

Uzantının Amacı ve Hedefleri

Uzantımızın temel amacı, GitHub sorun zaman çizelgelerindeki belirli “gürültülü” olay türlerini otomatik olarak gizleyerek, kullanıcıya daha sade ve odaklanmış bir görünüm sunmaktır. Hedefimiz, minimum yapılandırma ile maksimum fayda sağlamak ve kullanıcı deneyimini iyileştirmektir.

Temel Çalışma Prensibi: DOM Manipülasyonu

Chrome uzantısı, GitHub sayfasının Yükleme tamamlandıktan sonra devreye girecek bir content script kullanacaktır. Bu script, sayfanın Belge Nesne Modeli’ni (DOM) tarayacak, belirlenen gürültülü olayları temsil eden HTML elementlerini tespit edecek ve bunları CSS aracılığıyla gizleyecektir (örneğin, display: none; uygulayarak).

Kullanıcı Deneyimi Beklentileri

Uzantı, kullanıcının GitHub deneyimini kesintiye uğratmadan arka planda sorunsuz bir şekilde çalışmalıdır. İdeal olarak, kullanıcı uzantıyı kurduktan sonra herhangi bir ek ayar yapmadan faydalarını görmeye başlamalıdır. İlerleyen aşamalarda, hangi olayların gizleneceğini seçebileceği basit bir arayüz de eklenebilir.

Copilot CLI ile Hızlı Prototipleme ve Geliştirme

Proje geliştirme sürecinde Copilot CLI’ın gücünden faydalanmak, özellikle boilerplate kodları oluşturma ve belirli görevler için hızlıca kod parçacıkları üretme konusunda büyük avantajlar sağladı.

Copilot CLI Nedir ve Neden Tercih Edildi?

Copilot CLI, terminalde doğal dil komutları kullanarak kod ve komut satırı çıktıları oluşturmanıza yardımcı olan bir yapay zeka aracıdır. Bu proje için tercih edilmesinin başlıca nedenleri şunlardı:

• Hız: Manifest dosyası, temel JavaScript yapıları gibi tekrar eden kodları saniyeler içinde oluşturabilmesi.
• Verimlilik: DOM manipülasyonu için gerekli CSS seçicilerini veya JavaScript fonksiyonlarını hızlıca önerebilmesi.
• Öğrenme: Farklı yaklaşımları denemek ve en uygun çözümü bulmak için hızlı prototipleme imkanı sunması.

İlk Adımlar: Proje Yapısını Oluşturma

Bir Chrome uzantısı için temel dosya yapısı şunları içerir: manifest.json, content.js, popup.html, popup.js ve isteğe bağlı olarak CSS dosyaları. Copilot CLI’a “Chrome uzantısı için temel bir manifest.json dosyası oluştur” veya “content script için boilerplate kod yaz” gibi komutlar vererek bu başlangıç dosyalarını hızla oluşturduk.

# Copilot CLI ile manifest.json oluşturma örneği
gh copilot suggest "Chrome extension manifest.json for content script that runs on github.com"

Bu komut, bize temel izinleri ve content_scripts tanımını içeren bir JSON yapısı önerecektir.

Kod Üretimi ve Otomasyon: Manifest ve Temel Scriptler

Copilot CLI, özellikle manifest.json dosyasını doğru izinlerle ("activeTab", "storage", "https://github.com/*") ve content_scripts tanımlarıyla oluşturmada çok yardımcı oldu. Ayrıca, GitHub DOM yapısı içinde belirli elementleri hedeflemek için kullanacağımız temel JavaScript fonksiyonları ve CSS seçicileri için de öneriler aldık. Örneğin, "GitHub issue timeline'da assignee change event'ini gizlemek için JavaScript kodu yaz" gibi bir komut, bize potansiyel DOM elementlerini ve gizleme mantığını sunabilirdi.

Hızlı İterasyon ve Hata Ayıklama

Copilot CLI, belirli bir DOM elementini hedeflemek için doğru CSS seçicisini bulmakta zorlandığımızda veya bir JavaScript döngüsü yazmamız gerektiğinde hızlıca öneriler sunarak geliştirme döngüsünü hızlandırdı. Küçük kod parçacıklarını anında test etme ve değiştirme yeteneği, hata ayıklama sürecini de kolaylaştırdı.

Uzantının Mimari Yapısı ve Temel Bileşenleri

Her Chrome uzantısı gibi, bizim uzantımız da belirli bir mimariye ve temel bileşenlere sahiptir.

manifest.json Dosyası: Uzantının Kimlik Kartı

manifest.json, uzantımızın adı, sürümü, izinleri ve hangi scriptlerin nerede çalışacağını tanımlayan merkezi bir dosyadır. İşte projemiz için önemli bazı alanlar:

{
  "manifest_version": 3,
  "name": "GitHub Timeline Temizleyici",
  "version": "1.0",
  "description": "GitHub sorun zaman çizelgelerindeki gürültülü olayları gizler.",
  "permissions": ["storage"],
  "host_permissions": ["https://github.com/*"],
  "content_scripts": [
    {
      "matches": ["https://github.com/*/issues/*"],
      "js": ["content.js"],
      "run_at": "document_idle"
    }
  ],
  "action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "icons/icon16.png",
      "48": "icons/icon48.png",
      "128": "icons/icon128.png"
    }
  }
}

"host_permissions", uzantımızın hangi URL'lerde çalışabileceğini belirtir. "content_scripts" ise content.js dosyamızın sadece GitHub sorun sayfalarında (/issues/ içeren URL'ler) çalışmasını sağlar.

content.js: GitHub Sayfasını Manipüle Eden Kalp

Bu script, uzantının ana mantığını içerir. GitHub sayfasının DOM'una erişir, gürültülü olayları tespit eder ve bunları gizler. Bu script, sayfa yüklendikten sonra çalışır ve sayfa içeriğindeki değişiklikleri dinleyebilir.

popup.html ve popup.js: Kullanıcı Arayüzü ve Ayarlar

Uzantının tarayıcı çubuğundaki simgesine tıklandığında açılan küçük bir penceredir. Bu pencere, kullanıcının hangi olay türlerinin gizleneceğini seçebileceği veya uzantıyı etkinleştirip devre dışı bırakabileceği bir arayüz sunar. popup.js ise bu arayüzün etkileşim mantığını yönetir ve kullanıcı tercihlerini Chrome'un depolama API'si (chrome.storage) aracılığıyla kaydeder.

Arka Plan Scriptleri (Opsiyonel)

Bu proje için zorunlu olmasa da, daha karmaşık uzantılar için background.js dosyaları kullanılabilir. Bu scriptler, tarayıcı olaylarını dinleyebilir (örneğin, sekme açma/kapatma), uzun süreli işlemler yapabilir ve content script'ler ile iletişim kurabilir.

Gürültülü Olayları Tespit Etme ve Gizleme Mekanizması

Bu, uzantının en kritik teknik bölümüdür. Doğru DOM elementlerini hedeflemek ve onları etkili bir şekilde gizlemek esastır.

GitHub DOM Yapısını İnceleme

İlk adım, GitHub sorun zaman çizelgesinin HTML yapısını anlamaktır. Tarayıcının Geliştirici Araçları (Developer Tools) ile sayfa incelenerek, farklı olay türlerinin hangi HTML etiketleri, sınıflar veya veri nitelikleri (data attributes) ile temsil edildiği bulunur. Örneğin, her bir zaman çizelgesi olayı genellikle belirli bir

  

    
      
    
    @kullanici
     assigned 
    @baskakullanici
  
  

const noisyEvents = document.querySelectorAll('.TimelineItem-body:has(.TimelineItem-badge-text[title*="assigned"])');
noisyEvents.forEach(event => {
  event.style.display = 'none';
});

const observer = new MutationObserver(mutations => {
  mutations.forEach(mutation => {
    if (mutation.type === 'childList' && mutation.addedNodes.length > 0) {
      mutation.addedNodes.forEach(node => {
        if (node.nodeType === 1 && node.classList.contains('TimelineItem')) {
          // Yeni eklenen TimelineItem'ı kontrol et ve gizle
          if (node.querySelector('.TimelineItem-badge-text[title*="assigned"]')) {
            node.style.display = 'none';
          }
        }
      });
    }
  });
});

observer.observe(document.querySelector('.js-timeline-item-container'), { childList: true, subtree: true });