Chrome eklentileri ile SPA'leri desteklemek

Chrome eklentileri ile sayfa içeriğini modifiye edebilir ve belirli sınırlar dahilinde sayfa içeriğine müdahale edebilirsiniz. Chrome eklentileri content-script adı verilen dosyalar ile DOM API üzerinden değişiklikler yapmanıza olanacak sağlar.

Örneğin bir sayfa içerisindeki bütün linkleri bularak bunların renklerini content-scriptler ile değiştirebilirsiniz.

Normal sayfalarda basitçe DOMContentLoaded olayını (event) yakalayarak işlemimizi yapabiliriz. Aşağıdaki örnekte basitçe "load" olayını yakalarayarak sayfada işlemler gerçekleştirebilirsiniz.

window.addEventListener ("load", function () { 
    // Kodunuz
}, false);

Peki SPA'ler

SPA'lerde sayfa ilk yüklendiğinde content-script'imiz çalışacaktır. Yine link rengi değiştirme örneğinden gidecek olursak sayfa yüklendiğinde o sayfa içerisindeki bütün linklerin rengini değiştirecektir ancak başka sayfalara geçtiğinizde linklerinin renginin değişmediğini göreceksiniz.

Peki çözüm nedir?

Eminim bu problem için birden fazla çözüm vardır ancak ben size kendi kullandığım yöntemden bahsedeceğim.

Çözüm için birkaç aşamaya ihtiyacımız var. İlk olarak arka plan komut dosyası kullanacağız. Arka plan komut dosyası, yeni bir sayfaya gitme, bir sayfayı kapatma vb. gibi bir tarayıcının tetiklediği olayları izlemek için arka planda çalışan bir programdır.

Bunun için manifest.json dosyamıza, aşakğıdaki bölümü ve background.js'i eklenti dosyalarımız arasına eklememiz gerekiyor.

"background": {
  "scripts": ["background.js"],
  "persistent": true
}

Bu aşamada SPA sayfa değişimlerini yakalamamız için webNavigation API'ı kullanmamız gerek. Bunun içinse izinlerimizin arasına webNavigation eklememiz gerekiyor.

"permissions": ["tabs", "webNavigation"]

Artık background.js içerisinde adres değişikliklerini takip edebiliriz

chrome.webNavigation.onHistoryStateUpdated.addListener(details => {
  tabId = details.tabId;
  chrome.tabs.sendMessage(tabId, {name: 'page_changed'});
});

Basitçe bu kod parçası Chrome'da geçmiş güncellendiğinde gerçekleşen olayı yakalayarak değişikliğin yapıldığı taba dilediğimiz mesajı yolluyor.

Artık content-scriptimizde bu mesajı dinleyerek dilediğimiz işlemi yapabiliriz. Unutmayın chrome.runtime.onMessage birçok mesaj alacaktır bu yüzden mesajınıza bir isim vermenizde bu ismi filtreleyerek işleminizi gerçekleştirmenizde yarar olacaktır.

chrome.runtime.onMessage.addListener(function(request, _sender, _sendResponse) {
  if (request && request.name === 'page_changed') {
    convertLinks()
  }
});