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ç kullanmalarına olanak tanıyan yeni bir tamamlayıcı yüzeydir. Bugün, uzantınızın Chrome 114'ten itibaren yan panelde içerik göstermeye başlayabileceğini duyurmanın heyecanını yaşıyoruz.
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 uyguladığını gördük. Bu nedenle, uygulamayı bir platform standardı haline getirmekten heyecan duyuyoruz. Yeni Side Panel API ile artık kullanıcının ziyaret ettiği bir sayfayla birlikte açılan kalıcı bir kullanıcı arayüzü sunabilirsiniz. Uzantılar arasındaki tutarlı konumlandırma ve düzenden kullanıcılar faydalanır. Ayrıca, ana makine izinleri istemeden kullanıcı arayüzünü gösterme imkanı, kullanıcılar için önemli bir gizlilik kazancıdır. Ayrıca yükleme sırasında uzantınız için gösterilen uyarıların sayısını azaltır.
Side Panel API, güvenilmeyen bir sayfaya içerik yerleştirmeyle ilgili sorunları ortadan kaldırır. Ayrıca, farklı siteler arasında uyumluluğu koruma ve uzantınızın neden olduğu kazara meydana gelen aksaklıklarla ilgili hata raporlarını inceleme gereksinimini de önemli ölçüde azaltır.
Web'de kullanıcıların tamamlayıcısı
Uzantınızın bir parçası olarak yeni bir yan panel deneyimi oluştururken bir noktayı aklınızda bulundurmanız gerekir: Kullanıcıların web'de görevleri tamamlamalarına nasıl yardımcı oluyorsunuz? Üzerinde düşünmeniz gereken birkaç soru şöyle:
- Yan panelim kullanıcıya nasıl yardımcı oluyor?
- Tek amaç politikası, yan paneliniz için de geçerlidir. Yan panelinizin, uzantınızın geri kalanı ve kullanıcının gerçekleştirmeye çalıştığı şeyle doğrudan alakalı işlevler sunduğundan emin olun.
- Yan panelim yalnızca alakalı olduğunda mı görünüyor?
- Yan Panel API'si, kullanıcılarınızın yan paneli hangi sitelerde göreceğini seçmenize olanak tanır. Bu sayede, içerik kullanıcıyla alakalı olmadığında veya kullanıcının göz attığı içerikle alakalı olmadığında gösterilmesini engelleyebilirsiniz.
- Tasarım, uzantımın geri kalanıyla tutarlı mı?
- Yan paneliniz, uzantınızdaki ve mağaza girişinizin logosu, renkleri, simgeleri ve yazı tipleriyle uyumlu, görsel olarak ilgi çekici bir tasarıma sahip olmalıdır. Bu sayede, kullanıcılara uzantınızı nerede kullanırlarsa kullansınlar tutarlı ve akılda kalacak bir deneyim sunabilirsiniz.
- Kullanıcılar yan panelimi nasıl keşfeder?
- Uzantı kapsamında yeterli doküman veya eğitim sağlayarak yeni kullanıcıların yan panelinizi nasıl kullanacaklarını öğrenmelerini sağlayın. Bu, kullanıcıları elde tutmanıza ve mağaza girişinizde kötü yorumları önlemenize yardımcı olur. Uzantıyı yüklemeden önce kullanıcılara uzantınızın mağaza girişinizde nasıl çalıştığını gösteren bir YouTube videosu ekleyerek eğitim vermeye başlayabileceğinizi unutmayın.
Ayrıca, Program Politikalarımızı güncelleyerek En İyi Uygulamaları ve Kalite Yönergeleri bölümlerimizi bu noktalardan bazılarını yansıtacak şekilde güncelledik. Bu değişiklikler, yan panelinizin tamamlayıcı işlevler sunarak kullanıcıların web'de gezinme deneyimlerinde yardımcı olacak bir tamamlayıcı görevi gördüğünü vurgular. Ayrıca, yan panelinizde gereksiz dikkat dağıtıcı öğelerin bulunmaması gerektiğini de belirtir.
API'ye genel bakış
Uzantınızın yan panelde görünmesi için manifestinizde "sidePanel" iznini isteyin ve "side_panel" anahtarını, uzantınızdaki bir sayfaya işaret eden "default_path" ile ekleyin:
manifest.json:
{
...
"side_panel": {
"default_path": "sidepanel.html"
},
"permissions": [
"sidePanel"
]
...
}
Bir yan panel sayfasında, komut dosyalarını ve telefon uzantısı API'lerini diğer herhangi bir uzantı sayfasında olduğu gibi yükleyebilirsiniz. Yan panelinizin simgesi, uzantınızın simgesinden alınır. Bu simgeyi daha güzel hale getirmek için ayarlamayı unutmayın.
Ek özellikler
İstediğiniz zaman kolayca açabilmek için yan paneli işlem simgenize bağlayabilirsiniz:
service-worker.js:
await chrome.sidePanel.setPanelBehavior({ openPanelOnActionClick: true });
Yan panelinizin yalnızca belirli sayfalarda görünmesini istiyorsanız bunu denetleyebilir ve kullanıcı için alakalı olmayan başka bir yerde 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
Hemen okumaya başlayabileceğiniz Side Panel API dokümanlarını yayınladık. Ayrıca, API'nin pratikte nasıl kullanılabileceğini görmek için chrome-extensions-samples deposuna samples [örnekler] de ekledik.
Daha önce de bahsedildiği gibi, politika sayfalarımız ve en iyi uygulamalarımız da kullanıcılarınıza en iyi deneyimi sağlayacak yan panelin nasıl oluşturulacağı hakkında daha fazla bilgi içerecek şekilde revize edilmiştir.
Yenilikler sayfamızı ziyaret ederek Chrome uzantısıyla ilgili haberleri alabilirsiniz. Ayrıca, Side Panel API'siyle ilgili sorularınız veya yardıma ihtiyacınız varsa Chromium uzantıları Google Grubu'nu ziyaret edebilirsiniz.
Fotoğrafçı: Vardan Papikyan Unsplash'te