Setahun yang lalu, pada Mei 2022, kami menambahkan panel samping ke Chrome. Platform ini adalah platform pendamping baru yang memungkinkan pengguna menggunakan alat bersama konten yang mereka jelajahi. Hari ini, dengan senang hati kami umumkan bahwa ekstensi Anda dapat mulai menampilkan konten di panel samping, mulai Chrome 114.
Lebih baik bagi pengguna, lebih mudah bagi developer
Kami sudah melihat banyak developer menerapkan pengalaman seperti sidebar ke dalam ekstensi mereka. Itulah sebabnya kami senang bisa menjadikannya standar platform. Dengan Side Panel API yang baru, kini Anda dapat menawarkan UI persisten yang akan 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 solusi privasi yang signifikan bagi pengguna, dengan manfaat tambahan yaitu mengurangi jumlah peringatan yang ditampilkan untuk ekstensi Anda pada waktu penginstalan.
Side Panel API mengeliminasi kesulitan yang terkait dengan memasukkan konten ke halaman yang tidak tepercaya. Fitur ini juga secara signifikan mengurangi persyaratan untuk mempertahankan kompatibilitas di berbagai situs dan menyaring laporan bug tentang gangguan tidak disengaja yang disebabkan oleh ekstensi Anda.
Pendamping bagi pengguna di seluruh web
Saat membuat pengalaman panel samping baru sebagai bagian dari ekstensi, Anda perlu mengingat satu hal: bagaimana Anda membantu pengguna menyelesaikan tugas di seluruh web? Berikut ini beberapa pertanyaan yang harus Anda pertimbangkan:
- Bagaimana cara 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 relevan?
- Side Panel API memungkinkan Anda memilih situs yang akan dilihat pengguna di panel samping. Dengan demikian, Anda dapat menghindari menampilkannya jika tidak relevan bagi pengguna atau tidak terkait dengan konten yang dijelajahi pengguna.
- Apakah desainnya konsisten dengan ekstensi lainnya?
- Panel samping Anda harus memiliki desain yang menarik secara visual yang sesuai dengan logo, warna, ikon, serta font ekstensi dan listingan Play Store Anda. Hal ini akan memberi pengguna pengalaman yang konsisten dan dapat dikenali di mana pun mereka menggunakan ekstensi Anda.
- Bagaimana cara pengguna menemukan panel samping saya?
- Beri tahu pengguna baru cara menggunakan panel samping dengan memberikan dokumentasi atau pelatihan yang memadai dalam ekstensi. 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 di listingan Play Store Anda.
Kami juga telah memperbarui Kebijakan Program kami, dengan pembaruan pada bagian Praktik Terbaik dan Pedoman Kualitas untuk mencerminkan beberapa pertimbangan ini. Perubahan ini menyoroti bahwa panel samping Anda harus bertindak sebagai pendamping yang membantu untuk pengalaman penjelajahan pengguna dengan memberikan fungsi pelengkap. Ikon ini juga memperjelas bahwa panel samping Anda tidak boleh memiliki gangguan yang tidak perlu.
Ringkasan API
Agar ekstensi Anda muncul di panel samping, minta izin "sidePanel" di manifes, dan 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 API ekstensi panggilan seperti yang Anda lakukan pada halaman ekstensi lainnya. Ikon untuk panel samping akan diambil dari ikon ekstensi - jangan lupa untuk menyetelnya untuk sedikit polesan.
Kemampuan ekstra
Anda dapat menautkan panel samping ke ikon tindakan, sehingga 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 hari ini. Kami juga telah menambahkan sampel ke repositori chrome-extensions-samples, yang merupakan tempat yang tepat untuk melihat bagaimana API dapat digunakan dalam praktiknya.
Seperti yang telah disebutkan, halaman kebijakan dan praktik terbaik kami juga telah direvisi untuk memberikan penjelasan selengkapnya tentang cara membuat panel samping yang memberikan pengalaman terbaik bagi pengguna.
Anda dapat terus mengikuti berita ekstensi Chrome dengan mengunjungi Halaman apa yang baru kami, dan jika Anda memiliki pertanyaan atau memerlukan bantuan terkait Side Panel API, Anda dapat mengunjungi Google Grup ekstensi Chromium.
Foto oleh Vardan Papikyan di Unsplash