Yeni Side Panel API ile üstün bir kullanıcı deneyimi tasarlayın

Bir yıl önce, Mayıs 2022'de Chrome'a yan paneli ekledik. Bu yeni yardımcı yüzey, kullanıcıların göz attıkları içeriklerin yanında araçları kullanmalarına olanak tanır. Bugün, Chrome 114'ten itibaren uzantınızın yan panelde içerik göstermeye başlayabileceğini duyurmaktan heyecan duyuyoruz.

Seçili bir kelimenin tanımını gösteren sözlük uzantısı
Seçilen kelimenin tanımını gösteren bir sözlük uzantısı. chrome-extensions-samples deposundaki koda bakın.

Kullanıcılar için daha iyi, geliştiriciler için daha kolay

Birçok geliştiricinin, uzantılarına kenar çubuğu benzeri deneyimler eklediğini gördük. Bu nedenle, bu özelliği platform standardı haline getirmekten heyecan duyuyoruz. Yeni Side Panel API ile artık kullanıcının ziyaret ettiği bir sayfanın yanında açılan kalıcı bir kullanıcı arayüzü sunabilirsiniz. Kullanıcılar, uzantılar arasında tutarlı konumlandırma ve düzenden yararlanır. Ayrıca, kullanıcı arayüzünü ana makine izinleri istemeden gösterebilme özelliği, kullanıcılar için önemli bir gizlilik avantajı sunar. Bu özellik, uzantınızın yükleme sırasında gösterilen uyarı sayısını azaltma gibi ek bir avantaj da sağlar.

Side Panel API, içeriğin güvenilmeyen bir sayfaya yerleştirilmesiyle ilgili sorunları ortadan kaldırır. Ayrıca, farklı sitelerde uyumluluğu koruma ve uzantınızın neden olduğu kazara kesintilerle ilgili hata raporlarını inceleme gereksinimini önemli ölçüde azaltır.

Web'deki kullanıcılar için bir yardımcı

Uzantınızın bir parçası olarak yeni bir yan panel deneyimi oluştururken aklınızda bulundurmanız gereken bir şey var: Kullanıcıların web'deki görevleri tamamlamasına nasıl yardımcı oluyorsunuz? Göz önünde bulundurmanız gereken bazı sorular:

Yan panelim kullanıcılara nasıl yardımcı oluyor?
Tek amaçlı politika, yan paneliniz için de geçerlidir. Yan panelinizin, uzantınızın geri kalanıyla ve kullanıcının ulaşmaya çalıştığı hedefle doğrudan ilişkili işlevler sunduğundan emin olun.
Yan panelim yalnızca alakalı olduğunda mı görünüyor?
Yan Panel API, kullanıcılarınızın yan paneli hangi sitelerde göreceğini seçmenize olanak tanır. Bu sayede, kullanıcı için alakalı olmayan veya kullanıcının göz attığı içerikle ilgili olmayan durumlarda reklamı göstermeyebilirsiniz.
Tasarım, uzantımın geri kalanıyla tutarlı mı?
Yan paneliniz, uzantınızın ve mağaza girişinizin logosu, renkleri, simgeleri ve yazı tipleriyle eşleşen, görsel olarak çekici bir tasarıma sahip olmalıdır. Bu sayede, kullanıcılar uzantınızı nerede kullanırsa kullansın tutarlı ve tanınabilir bir deneyim yaşar.
Kullanıcılar yan panelimi nasıl keşfeder?
Uzantıda yeterli doküman veya eğitim sağlayarak yeni kullanıcılara yan panelinizi nasıl kullanacaklarını bildirin. Bu sayede kullanıcıları elde tutabilir ve mağaza girişinizde kötü yorumlar almaktan kaçınabilirsiniz. Mağaza girişinize, uzantınızın nasıl çalıştığını gösteren bir YouTube videosu ekleyerek kullanıcıları uzantıyı yüklemeden önce eğitmeye başlayabileceğinizi unutmayın.

Ayrıca, bu hususlardan bazılarını yansıtmak için Program Politikalarımızı güncelledik. En İyi Uygulamalar ve Kalite Yönergeleri bölümlerimizde de güncellemeler yaptık. Bu değişiklikler, yan panelinizin tamamlayıcı işlevler sunarak kullanıcıların göz atma deneyimlerine yardımcı bir eşlikçi olarak hizmet etmesi gerektiğini vurguluyor. Ayrıca, yan panelinizde gereksiz dikkat dağıtıcı unsurlar olmaması gerektiğini de belirtirler.

API'ye genel bakış

Uzantınızın yan panelde görünmesi için manifest dosyanızda "sidePanel" iznini isteyin ve uzantınızdaki bir sayfayı işaret eden "default_path" ile birlikte "side_panel" anahtarını ekleyin:

manifest.json:

{
  ...
  "side_panel": {
    "default_path": "sidepanel.html"
  },
  "permissions": [
    "sidePanel"
  ]
  ...
}

Bir yan panel sayfasında, diğer tüm uzantı sayfalarında olduğu gibi komut dosyaları yükleyebilir ve uzantı API'lerini çağırabilirsiniz. Yan panelinizin simgesi, uzantınızın simgesinden alınır. Bu simgeyi ayarlayarak yan panelinize daha şık bir görünüm kazandırmayı unutmayın.

Ek özellikler

Yan paneli işlem simgenize bağlayarak istediğiniz zaman kolayca açabilirsiniz:

service-worker.js:

await chrome.sidePanel.setPanelBehavior({ openPanelOnActionClick: true });

Yan panelinizin yalnızca belirli sayfalarda görünmesini istiyorsanız bunu kontrol edebilir ve kullanıcı için alakalı olmadığı diğer yerlerde görünmesini engelleyebilirsiniz:

service-worker.js:

chrome.tabs.onUpdated.addListener((tabId, info, tab) => {
  if (!tab.url) return;

  const url = new URL(tab.url);

  if (url.origin === 'https://example.com') {
    chrome.sidePanel.setOptions({ tabId, path: 'sidepanel.html', enabled: true });
  } else {
    chrome.sidePanel.setOptions({ tabId, enabled: false });
  }
});

Daha fazla bilgi

Yan Panel API dokümanlarını yayınladık. Bu dokümanları okumaya bugün başlayabilirsiniz. Ayrıca, API'nin pratikte nasıl kullanılabileceğini görmek için harika bir yer olan chrome-extensions-samples deposuna örnekler ekledik.

Belirtildiği gibi, politikalarımız ve en iyi uygulamalarımızla ilgili sayfalar da kullanıcılarınıza en iyi deneyimi sunan bir yan panel oluşturma hakkında daha fazla bilgi paylaşmak için revize edildi.

Chrome uzantılarıyla ilgili haberleri Yenilikler sayfamızı ziyaret ederek takip edebilirsiniz. Yan panel API'si ile ilgili sorularınız varsa veya yardıma ihtiyacınız olursa Chromium uzantıları Google Grubu'nu ziyaret edebilirsiniz.