Setahun yang lalu, pada Mei 2022, kami menambahkan panel samping ke Chrome. Ini adalah platform pendamping baru yang memungkinkan pengguna menggunakan alat bersama konten yang mereka jelajahi. Hari ini, kami dengan senang hati mengumumkan bahwa ekstensi Anda dapat mulai menampilkan konten di panel samping, mulai Chrome 114.
Lebih baik bagi pengguna, lebih mudah bagi developer
Kami telah melihat banyak developer menerapkan pengalaman seperti sidebar ke dalam ekstensi mereka, itulah sebabnya kami sangat senang menjadikannya standar platform. Dengan Side Panel API baru, Anda kini dapat menawarkan UI persisten yang terbuka bersama halaman yang dikunjungi pengguna. Pengguna akan mendapatkan manfaat dari penempatan dan tata letak yang konsisten di antara ekstensi. Selain itu, kemampuan untuk menampilkan UI tanpa meminta izin host merupakan kemenangan privasi yang signifikan bagi pengguna, dengan manfaat tambahan berupa mengurangi jumlah peringatan yang ditampilkan untuk ekstensi Anda pada waktu penginstalan.
Dengan Side Panel API, Anda dapat mengatasi masalah terkait memasukkan konten ke halaman yang tidak tepercaya. Fitur ini juga mengurangi persyaratan untuk mempertahankan kompatibilitas di berbagai situs secara signifikan dan menyaring laporan bug tentang gangguan tidak disengaja yang disebabkan oleh ekstensi Anda.
Pendamping untuk pengguna di seluruh web
Saat mem-build pengalaman panel samping baru sebagai bagian dari ekstensi, Anda perlu memperhatikan satu hal: bagaimana Anda membantu pengguna menyelesaikan tugas di seluruh web? Berikut adalah beberapa pertanyaan yang harus Anda pertimbangkan:
- Bagaimana panel samping saya membantu pengguna?
- Kebijakan satu tujuan juga berlaku untuk panel samping Anda. Pastikan panel samping Anda menyediakan fungsi yang berkaitan langsung dengan ekstensi lainnya dan hal yang ingin dicapai pengguna.
- Apakah panel samping saya hanya muncul jika diperlukan?
- Side Panel API memungkinkan Anda memilih di situs mana pengguna akan melihat panel samping. Dengan demikian, Anda tidak perlu menampilkannya jika tidak relevan dengan pengguna atau tidak terkait dengan konten yang dijelajahi pengguna.
- Apakah desainnya konsisten dengan keseluruhan ekstensi saya?
- Panel samping Anda harus memiliki desain menarik secara visual yang sesuai dengan logo, warna, ikon, dan font ekstensi serta listingan Play Store Anda. Hal ini memberikan pengalaman yang konsisten dan mudah dikenali kepada pengguna di mana pun mereka menggunakan ekstensi Anda.
- Bagaimana cara pengguna menemukan panel samping saya?
- Beri tahu pengguna baru cara menggunakan panel samping Anda dengan memberikan dokumentasi atau pelatihan yang memadai dalam ekstensi tersebut. Hal ini akan membantu Anda mempertahankan pengguna dan menghindari ulasan buruk di listingan Play Store Anda. Ingat, Anda dapat mulai mengajari pengguna sebelum mereka menginstal ekstensi dengan menyertakan video YouTube yang menunjukkan cara kerja ekstensi Anda di listingan Play Store.
Kami juga telah memperbarui Kebijakan Program, dengan pembaruan pada bagian Praktik Terbaik dan Pedoman Kualitas untuk mencerminkan beberapa pertimbangan ini. Perubahan ini menyoroti bahwa panel samping Anda akan berfungsi sebagai pendamping yang membantu pengalaman penjelajahan pengguna dengan menyediakan fungsi pelengkap. Ikon juga memperjelas bahwa panel samping Anda seharusnya tidak terganggu oleh gangguan yang tidak perlu.
Ringkasan API
Agar ekstensi Anda muncul di panel samping, minta izin "sidePanel" dalam manifes, lalu tambahkan kunci "side_panel" dengan "default_path" yang mengarah ke halaman dalam ekstensi Anda:
manifest.json:
{
...
"side_panel": {
"default_path": "sidepanel.html"
},
"permissions": [
"sidePanel"
]
...
}
Di halaman panel samping, Anda dapat memuat skrip dan memanggil API ekstensi seperti yang biasa Anda lakukan di halaman ekstensi lainnya. Ikon untuk panel samping akan diambil dari ikon ekstensi Anda - jangan lupa menetapkannya untuk sedikit polesan tambahan.
Kemampuan ekstra
Anda dapat menautkan panel samping ke ikon tindakan agar dapat dibuka dengan mudah kapan saja:
service-worker.js:
await chrome.sidePanel.setPanelBehavior({ openPanelOnActionClick: true });
Jika hanya ingin panel samping muncul di halaman tertentu, Anda dapat mengontrolnya dan mencegahnya muncul di tempat lain yang tidak relevan bagi pengguna:
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 });
}
});
Pelajari lebih lanjut
Kami telah memublikasikan dokumentasi Side Panel API yang dapat Anda mulai baca sekarang. Kami juga telah menambahkan contoh ke repositori contoh ekstensi chrome, yang merupakan tempat yang tepat untuk melihat cara penggunaan API dalam praktiknya.
Seperti yang telah disebutkan, halaman kebijakan dan praktik terbaik kami juga telah direvisi untuk menjelaskan lebih lanjut cara membuat panel samping yang memberikan pengalaman terbaik bagi pengguna.
Anda dapat terus mengikuti berita ekstensi Chrome dengan mengunjungi Halaman yang baru kami, dan jika Anda memiliki pertanyaan atau memerlukan bantuan terkait Side Panel API, buka Google Grup ekstensi Chromium.
Foto oleh Vardan Papikyan di Unsplash