Rok temu, w maju 2022 r., dodaliśmy panel boczny do Chrome. Jest to nowa platforma towarzysząca, która umożliwia użytkownikom korzystanie z narzędzi podczas przeglądania treści. Z przyjemnością informujemy, że od Chrome 114 rozszerzenie może wyświetlać treści w panelu bocznym.
Lepsze dla użytkowników, łatwiejsze dla deweloperów
Wielu deweloperów wdrożyło już w swoich rozszerzeniach funkcje podobne do paska bocznego, dlatego z przyjemnością wprowadzamy je jako standard platformy. Dzięki nowemu interfejsowi Side Panel API możesz teraz oferować trwały interfejs, który otwiera się obok strony odwiedzanej przez użytkownika. Użytkownicy będą mogli korzystać z jednolitego pozycjonowania i układu rozszerzeń. Dodatkowo możliwość wyświetlania interfejsu bez żądania uprawnień hosta to dla użytkowników znaczne zwiększenie prywatności, a dla Ciebie dodatkowa korzyść w postaci zmniejszenia liczby ostrzeżeń wyświetlanych w momencie instalacji rozszerzenia.
Interfejs Side Panel API eliminuje problemy związane z wstrzykiwaniem treści na niezaufaną stronę. Znacznie zmniejsza też konieczność zachowania zgodności z różnymi witrynami i przeglądania raportów o błędach dotyczących przypadkowych zakłóceń spowodowanych przez rozszerzenie.
Pomocnik dla użytkowników w internecie
Podczas tworzenia nowego panelu bocznego w ramach rozszerzenia musisz pamiętać o jednej rzeczy: jak pomagasz użytkownikom w wykonywaniu zadań w internecie? Oto kilka pytań, które warto sobie zadać:
- Jak panel boczny pomaga użytkownikowi?
- Do panelu bocznego mają też zastosowanie zasady dotyczące jednego celu. Upewnij się, że panel boczny zapewnia funkcje, które są bezpośrednio powiązane z pozostałą częścią rozszerzenia i z tym, co użytkownik chce osiągnąć.
- Czy panel boczny wyświetla się tylko wtedy, gdy jest to istotne?
- Side Panel API umożliwia wybór witryn, w których użytkownicy będą widzieć panel boczny. Dzięki temu możesz uniknąć wyświetlania reklamy, gdy nie jest ona istotna dla użytkownika lub nie jest powiązana z treściami, które przegląda.
- Czy wygląd jest spójny z pozostałą częścią rozszerzenia?
- Panel boczny powinien mieć atrakcyjny wygląd, który pasuje do logo, kolorów, ikon i czcionek rozszerzenia oraz informacji o nim w sklepie. Zapewnia to użytkownikom spójne i rozpoznawalne wrażenia, niezależnie od tego, gdzie korzystają z rozszerzenia.
- Jak użytkownicy mogą znaleźć mój panel boczny?
- Poinformuj nowych użytkowników, jak korzystać z panelu bocznego, udostępniając w rozszerzeniu odpowiednią dokumentację lub szkolenie. Pomoże Ci to utrzymać użytkowników i uniknąć negatywnych opinii na stronie aplikacji. Pamiętaj, że możesz zacząć uczyć użytkowników, zanim zainstalują rozszerzenie. W tym celu dodaj do informacji o rozszerzeniu w sklepie film na YouTube, który pokazuje, jak działa Twoje rozszerzenie.
Zaktualizowaliśmy też nasze zasady programu, w tym sekcje Sprawdzone metody i Wskazówki dotyczące jakości, aby uwzględnić niektóre z tych kwestii. Te zmiany podkreślają, że panel boczny powinien być przydatnym dodatkiem do przeglądania stron przez użytkowników, ponieważ zapewnia dodatkowe funkcje. Wyraźnie wskazują też, że panel boczny nie powinien zawierać niepotrzebnych elementów odciągających uwagę.
Omówienie interfejsu API
Aby rozszerzenie wyświetlało się w panelu bocznym, poproś o uprawnienie "sidePanel" w pliku manifestu i dodaj klucz "side_panel" ze wskaźnikiem "default_path" wskazującym stronę w rozszerzeniu:
manifest.json:
{
...
"side_panel": {
"default_path": "sidepanel.html"
},
"permissions": [
"sidePanel"
]
...
}
Na stronie panelu bocznego możesz wczytywać skrypty i wywoływać interfejsy API rozszerzeń tak samo jak na każdej innej stronie rozszerzenia. Ikona panelu bocznego zostanie pobrana z ikony rozszerzenia. Nie zapomnij jej ustawić, aby nadać panelowi dodatkowy szlif.
Dodatkowe możliwości
Możesz połączyć panel boczny z ikoną działania, aby można go było łatwo otworzyć w dowolnym momencie:
service-worker.js:
await chrome.sidePanel.setPanelBehavior({ openPanelOnActionClick: true });
Jeśli chcesz, aby panel boczny wyświetlał się tylko na określonych stronach, możesz to kontrolować i zapobiegać jego wyświetlaniu w innych miejscach, w których nie jest on istotny dla użytkownika:
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 });
}
});
Więcej informacji
Opublikowaliśmy dokumentację interfejsu Side Panel API, z którą możesz zapoznać się już dziś. Dodaliśmy też przykłady do repozytorium chrome-extensions-samples, w którym możesz zobaczyć, jak można używać interfejsu API w praktyce.
Jak już wspomnieliśmy, zaktualizowaliśmy też strony z zasadami i sprawdzonymi metodami, aby przekazać więcej informacji o tym, jak tworzyć panel boczny, który zapewnia użytkownikom najlepsze wrażenia.
Aby być na bieżąco z nowościami dotyczącymi rozszerzeń do Chrome, odwiedź naszą stronę z informacjami o nowościach. Jeśli masz pytania lub potrzebujesz pomocy w zakresie interfejsu Side Panel API, możesz odwiedzić grupę dyskusyjną Chromium extensions w Google.