Sinema Modu

Sinema Modu, bir web sayfasında okumak istediğiniz alanı sahnede aydınlık bırakıp sayfanın geri kalanını karartan bir tarayıcı eklentisidir. Chrome ve Firefox için Manifest V3 ile yazdım ve Cem Emir Yüksektepe ile birlikte geliştirdik. Eklenti tamamen çevrimdışı çalışıyor, hiçbir veri toplamıyor ve hiçbir ağ isteği yapmıyor.

Amaç

Uzun bir makaleyi, belgeyi ya da bir kod örneğini okurken sayfanın kenarlarındaki menüler, öneri kutuları ve hareketli öğeler dikkatimi sürekli dağıtıyordu. Okuma modları ise çoğu zaman sayfanın düzenini bozuyor, tabloları ya da kod bloklarını kaybediyordu. Ben sayfaya hiç dokunmadan yalnızca odaklanmak istediğim yeri öne çıkaran, sinema salonundaki gibi çevreyi karartan bir araç istedim. Sinema Modu bu ihtiyaçtan çıktı.

Nasıl çalışır

Alt+Shift+S kısayoluna bastığınızda ya da araç çubuğundaki simgeye tıkladığınızda eklenti seçim moduna geçer. Bu modda fareyi gezdirdiğiniz öğe canlı olarak önizlenir, yani karartma yarı koyulukta uygulanır ve imlecin altındaki alan aydınlık kalır. Bir alana tıkladığınızda o alan sahnede kalır, ekranın geri kalanı ise kararır.

Karartma tek bir sabit katmandan oluşuyor. Bu katmanın içine clip-path ile, seçtiğiniz öğenin boyutlarında ve köşeleri yuvarlatılmış bir delik açılıyor. clip-path, bir öğenin yalnızca belirli bir şekil içindeki kısmının görünmesini sağlayan bir CSS özelliğidir. Deliğin olduğu yerde tıklamalar ve metin seçimi sayfaya geçer, karanlık bölgede ise geçmez. Sayfayı kaydırdığınızda ya da öğenin boyutu değiştiğinde delik yeni konumuna yumuşak bir geçişle kayar. Seçtiğiniz öğe sayfadan silinirse mod kendiliğinden kapanır.

Öne çıkan özellikler

• W ve S tuşlarıyla seçili alanı bir üst ya da bir alt öğeye genişletip daraltabiliyorsunuz.
• Q ve E tuşlarıyla karartmanın koyuluğunu artırıp azaltabiliyorsunuz.
• R tuşuna basarak ya da karanlık bölgeye tıklayarak yeni bir alan seçebiliyorsunuz.
• C tuşu seçili alanı ekranın ortasına getiriyor.
• Virgül ve nokta tuşlarıyla alanın çevresindeki nefes payını azaltıp artırabiliyorsunuz.
• H tuşu ekrandaki küçük bilgi panelini gizliyor, Esc ise moddan çıkıyor.
• Simgeye sağ tıklayarak açılan ayarlar sayfasından karartma ve nefes payını değiştirebiliyorsunuz. Değişiklikler açık sekmelere anında yansıyor.
• Sayfada sağ tıklama menüsüne de modu açıp kapatan bir öğe ekledim.
• Arayüz Türkçe ve İngilizce.

Teknik altyapı

Eklentinin Chrome ve Firefox için iki ayrı klasörü var. Chrome sürümü bir servis çalışanıyla, Firefox sürümü ise Firefox'un browser.* adlı promise tabanlı API'si ve olay sayfasıyla çalışıyor. Firefox sürümü Android için de tanımlı.

Eklentinin kendi arayüz öğelerini Shadow DOM içine yerleştirdim. Shadow DOM, bir bileşenin stillerini sayfanın geri kalanından yalıtan bir tarayıcı özelliğidir. Böylece ziyaret ettiğiniz sitenin CSS'i eklentinin görünümünü bozamıyor, eklenti de sitenin görünümüne karışmıyor. Çizim döngüsü requestAnimationFrame ile çalışıyor ve deliğin yeni konuma kayması her karede hedefe doğru küçük bir adım atılarak hesaplanıyor.

İlk sürümde içerik betiği her sayfaya otomatik yükleniyordu ve bu, tüm sitelere erişim izni gerektiriyordu. Sonradan bunu değiştirdim. Betik artık yalnızca siz kısayola bastığınızda activeTab izniyle o sekmeye enjekte ediliyor. Bu sayede geniş site izinlerine gerek kalmadı ve mağaza incelemesi de kolaylaştı.

Paketleme bir kabuk betiğiyle yapılıyor. Betik Chrome ve Firefox için ayrı zip dosyaları üretiyor ve her pakete sürüm numarasını tarih ile saatten otomatik olarak basıyor.

Gizlilik ve güvenlik

Eklenti ziyaret ettiğiniz sayfaların içeriğini okumuyor, kaydetmiyor ve hiçbir yere göndermiyor. Sakladığı tek veri, seçtiğiniz iki görsel tercih olan karartma koyuluğu ve nefes payı. Bu değerler yalnızca kendi tarayıcınızın yerel depolama alanında tutuluyor. İstenen izinler activeTab, scripting, storage ve contextMenus ile sınırlı. Firefox manifestinde de veri toplanmadığını açıkça bildirdim.

Kullanım alanları

• Uzun makaleleri, haberleri ya da belgeleri dikkat dağılmadan okumak isteyenler için kullanışlıdır.
• Ekran paylaşımı ya da sunum sırasında izleyicinin dikkatini sayfanın belirli bir bölümüne çekmek için kullanılabilir.
• Dikkat dağınıklığı yaşayan ya da kalabalık sayfalarda odaklanmakta zorlanan kullanıcılara yardımcı olur.
• Kod örneklerini, tabloları ya da formları tek tek incelerken çevredeki gürültüyü azaltır.

Durum

Chrome Web Store ve Firefox eklenti mağazası için mağaza metinlerini, tanıtım görsellerini ve ekran görüntülerini hazırladık. Eklenti geliştirici modunda her iki tarayıcıya da yüklenebiliyor.