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, kullanıcıların göz attıkları içerikle birlikte araçları kullanmalarına olanak tanıyan yeni bir tamamlayıcı yüzeydir. Bugün, uzantınızın Chrome 114 sürümünden itibaren yan panelde içerik göstermeye başlayabileceğini duyurmaktan heyecan duyuyoruz.

Seçilen bir kelimenin tanımını gösteren sözlük uzantısı
Seçilen bir kelimenin tanımını gösteren sözlük uzantısı. chrome-extensions-samples deposundaki koda göz atı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 Yan Panel API ile artık kullanıcının ziyaret ettiği 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, ana makine izinleri istemeden kullanıcı arayüzü gösterme özelliği, kullanıcılar için önemli bir gizlilik kazanımıdır. Bu özellik, yükleme sırasında eklentiniz için gösterilen uyarı sayısını azaltma avantajına da sahiptir.

Yan Panel API, güvenilmeyen bir sayfaya içerik eklemeyle ilgili sorunları ortadan kaldırır. Ayrıca, farklı siteler ile uyumluluğu koruma ve uzantınızdan kaynaklanan kazara aksaklıklarla ilgili hata raporlarını inceleme gereksinimini de önemli ölçüde azaltır.

Web genelindeki kullanıcılar için bir tamamlayıcı

Uzantı kapsamında yeni bir yan panel deneyimi oluştururken şunu göz önünde bulundurmanız gerekir: Kullanıcıların web'de görevleri tamamlamasına nasıl yardımcı oluyorsunuz? Üzerinde düşünmeniz gereken birkaç soru şöyle olabilir:

Yan panelim kullanıcıya nasıl yardımcı olur?
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 yapmaya çalıştığı şeyle doğrudan alakalı işlevler sağladığından emin olun.
Yan panelim yalnızca alakalı olduğunda mı gösterilir?
Side Panel API, kullanıcılarınızın yan paneli hangi sitelerde göreceğini seçmenize olanak tanır. Bu sayede, kullanıcıyla alakalı olmadığında veya kullanıcının göz atmakta olduğu içerikle alakalı olmadığında reklamı göstermekten kaçınabilirsiniz.
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 uyumlu, görsel açıdan ilgi çekici bir tasarıma sahip olmalıdır. Bu sayede kullanıcılar, uzantınızı nerede kullanırlarsa kullansınlar tutarlı ve tanınabilir bir deneyim yaşarlar.
Kullanıcılar yan panelimi nasıl keşfeder?
Uzantı içinde yeterli doküman veya eğitim sağlayarak yeni kullanıcılara yan panelinizi nasıl kullanacaklarını bildirin. Bu, kullanıcıları elde tutmanıza ve mağaza girişinizde kötü yorumların önüne geçmenize yardımcı olur. Mağaza girişinize uzantınızın nasıl çalıştığını gösteren bir YouTube videosu ekleyerek kullanıcılara uzantıyı yüklemeden önce öğretmeye başlayabileceğinizi unutmayın.

Ayrıca, Program Politikalarımızı da güncelledik. En İyi Uygulamalar ve Kalite Yönergeleri bölümlerinde bu hususların bazılarını yansıtacak şekilde güncellemeler yaptık. Bu değişiklikler, yan panelinizin tamamlayıcı işlevler sağlayarak kullanıcıların göz atma deneyimlerinde yardımcı bir tamamlayıcı işlevi görmesi gerektiğini vurgular. Ayrıca, yan panelinizde gereksiz dikkat dağıtıcı öğeler bulunmaması gerektiğini de açıkça 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 bir "default_path" ile "side_panel" anahtarını ekleyin:

manifest.json:

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

Yan panel sayfasında, diğer tüm uzantı sayfalarında yaptığınız gibi komut dosyaları yükleyebilir ve uzantı API'lerini çağırabilirsiniz. Yan panelinizdeki simge, uzantınızın simgesinden alınır. Daha fazla gösterişlilik için bu simgeyi ayarlamayı 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ıyla alakalı olmayan başka 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

Side Panel API dokümanlarını yayınladık. Bu belgeleri hemen okumaya başlayabilirsiniz. Ayrıca, chrome-extensions-samples deposuna örnek ekledik. Bu depoda, API'nin pratikte nasıl kullanılabileceğini görebilirsiniz.

Daha önce de belirtildiği gibi, politika sayfalarımız ve en iyi uygulamalarımız da kullanıcılarınıza en iyi deneyimi sunan bir yan panelin nasıl oluşturulacağı hakkında daha fazla bilgi paylaşmak için düzeltildi.

Yenilikler sayfamızı ziyaret ederek Chrome uzantılarıyla ilgili gelişmeleri takip edebilirsiniz. Yan Panel API ile ilgili sorularınız veya yardıma ihtiyacınız varsa Chromium uzantıları Google grubunu ziyaret edebilirsiniz.


Unsplash'taki Vardan Papikyan tarafından çekilen fotoğraf