Rok temu w maju 2022 roku dodaliśmy panel boczny do Chrome. To nowa platforma towarzysząca, która umożliwia użytkownikom korzystanie z narzędzi do przeglądania treści. Z przyjemnością informujemy, że od wersji Chrome 114 Twoje rozszerzenie może zacząć wyświetlać treści w panelu bocznym.
Z myślą o użytkownikach, dla deweloperów
Wiemy, że wielu deweloperów wdraża w swoich rozszerzeniach funkcje podobne do paska bocznego, dlatego tak cieszymy się, że stały się one standardem platformy. Nowy interfejs Side Panel API umożliwia oferowanie trwałego interfejsu, który otwiera się obok odwiedzanej przez użytkownika strony. Użytkownicy skorzystają na spójnym pozycjonowaniu i układzie rozszerzeń. Poza tym możliwość wyświetlania interfejsu bez wysyłania prośby o przyznanie uprawnień hosta znacznie zwiększa ochronę prywatności użytkowników, a dodatkową zaletą jest zmniejszenie liczby ostrzeżeń wyświetlanych w czasie instalacji rozszerzenia.
Interfejs Side Panel API eliminuje problemy związane z wstawianiem treści na niezaufanej stronie. Znacznie zmniejsza też konieczność utrzymywania zgodności w różnych witrynach oraz przeglądania raportów o błędach dotyczących przypadkowych zakłóceń spowodowanych przez rozszerzenie.
Dodatkowe narzędzie dla użytkowników internetu
Tworząc nowy panel boczny w ramach rozszerzenia, musisz pamiętać o jednej rzeczy: w jaki sposób pomagasz użytkownikom w wykonywaniu zadań w internecie? Odpowiedz sobie na te pytania:
- Jak panel boczny pomaga użytkownikowi?
- Zasada jednego celu dotyczy również panelu bocznego. Upewnij się, że panel boczny zawiera funkcje, które są bezpośrednio związane z resztą rozszerzenia i celami użytkownika.
- Czy mój panel boczny pojawia się tylko wtedy, gdy jest odpowiedni?
- Interfejs Side Panel API pozwala wybrać witryny, na których użytkownicy będą widzieć panel boczny. Dzięki temu unikniesz wyświetlania jej, gdy będzie nieprzydatna lub niezwiązana z treścią przeglądaną przez niego.
- Czy projekt jest zgodny z resztą rozszerzenia?
- Panel boczny powinien mieć atrakcyjny wizualnie projekt dopasowany do logo, kolorów, ikon oraz czcionek rozszerzenia i informacji o aplikacji. Dzięki temu użytkownicy mogą korzystać z rozszerzenia w spójny i rozpoznawalny sposób.
- Jak użytkownicy mogą znaleźć mój panel boczny?
- Poinformuj nowych użytkowników, jak korzystać z panelu bocznego, udostępniając wystarczającą dokumentację lub szkolenie w rozszerzeniu. Pomoże Ci to zatrzymać użytkowników i uniknąć złych opinii na stronie z informacjami o aplikacji. Pamiętaj, że możesz zacząć uczyć użytkowników przed zainstalowaniem rozszerzenia, dodając na stronie z informacjami o aplikacji film w YouTube, który pokazuje, jak ono działa.
Zaktualizowaliśmy też Zasady programu o zaktualizowaliśmy sekcje Sprawdzone metody i Wskazówki dotyczące jakości, aby uwzględnić te kwestie. Z tych zmian wynika, że panel boczny powinien pomagać użytkownikom w przeglądaniu internetu, zapewniając im funkcje uzupełniające. Jasno pokazują też, że panel boczny nie powinien zawierać niepotrzebnych zakłóceń.
Omówienie interfejsu API
Aby rozszerzenie było widoczne w panelu bocznym, poproś o uprawnienie "sidePanel" w manifeście i dodaj klucz "side_panel" z parametrem "default_path" wskazującym stronę w rozszerzeniu:
manifest.json:
{
...
"side_panel": {
"default_path": "sidepanel.html"
},
"permissions": [
"sidePanel"
]
...
}
Na stronie panelu bocznego możesz ładować skrypty i interfejsy API rozszerzeń połączeń tak samo jak na innych stronach rozszerzeń. Ikona panelu bocznego zostanie pobrana z ikony rozszerzenia – pamiętaj, aby ją dopracować.
Dodatkowe możliwości
Panel boczny możesz połączyć z ikoną działania, dzięki czemu będzie można go łatwo otworzyć w każdej chwili:
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 określić lub zapobiec wyświetlaniu go w miejscach, które nie są istotne 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. Możesz ją przeczytać już dziś. Dodaliśmy też przykłady do repozytorium chrome-extensions-samples, które jest świetnym miejscem, aby zobaczyć, jak używać interfejsu API w praktyce.
Jak już wspomnieliśmy, zmieniliśmy również strony z zasadami i sprawdzone metody, aby podać więcej informacji o tworzeniu panelu bocznego zapewniającego najlepsze wrażenia użytkowników.
Najnowsze informacje o rozszerzeniach do Chrome znajdziesz na stronie „Co nowego”. Jeśli masz pytania lub potrzebujesz pomocy dotyczącej interfejsu API panelu bocznego, możesz odwiedzić grupę dyskusyjną Google dotyczącą rozszerzeń Chromium.
Zdjęcie: Vardan Papikyan, Unsplash