Rok temu, w maju 2022 roku, dodaliśmy do Chrome panel boczny. Jest to nowa platforma towarzysząca, która umożliwia użytkownikom używanie narzędzi wraz z przeglądanymi treściami. Z przyjemnością informujemy, że od Chrome 114 Twoje rozszerzenie może wyświetlać treści w panelu bocznym.
Lepsze dla użytkowników, łatwiejsze dla programistów
Wielu deweloperów stosuje w swoich rozszerzeniach funkcje przypominające pasek boczny. Cieszymy się, że możemy je udostępnić na platformie. Dzięki nowemu interfejsowi Side Panel API możesz oferować trwały interfejs, który otwiera się wraz ze stroną odwiedzaną przez użytkownika. Spójne pozycjonowanie i układ między rozszerzeniami są korzystne dla użytkowników. Możliwość wyświetlania interfejsu bez pytania o uprawnienia hosta znacznie ułatwia użytkownikom ochronę prywatności, a dodatkowo zmniejsza liczbę ostrzeżeń wyświetlanych podczas instalacji rozszerzenia.
Interfejs Side Panel API eliminuje problemy związane z umieszczaniem treści na niezaufanej stronie. Znacznie zmniejsza też wymaganie zachowania zgodności między różnymi witrynami i sprawdzanie raportów o błędach związanych z przypadkowymi zakłóceniami spowodowanymi przez rozszerzenie.
Aplikacja dla wszystkich użytkowników internetu
Tworząc nowy panel boczny w ramach rozszerzenia, musisz pamiętać o jednej kwestii: jak pomagasz użytkownikom w wykonywaniu zadań w internecie. Warto zadać sobie te pytania:
- W jaki sposób panel boczny może pomóc użytkownikowi?
- Zasada jednego celu dotyczy też Twojego panelu bocznego. Upewnij się, że panel boczny zawiera funkcje, które odnoszą się bezpośrednio do pozostałej części rozszerzenia i celów użytkownika.
- Czy mój panel boczny pojawia się tylko wtedy, gdy jest odpowiedni?
- Interfejs API panelu bocznego pozwala wybrać witryny, w których użytkownicy będą widzieć panel boczny. Dzięki temu unikniesz wyświetlania ich, gdy nie będzie przydatna dla użytkownika lub nie będzie powiązana z treścią przeglądaną przez użytkownika.
- Czy wygląd rozszerzenia jest zgodny z resztą rozszerzenia?
- Twój panel boczny powinien mieć atrakcyjny wizualnie wygląd, który pasuje do logo, kolorów, ikon i czcionek rozszerzenia oraz informacji o aplikacji. Dzięki temu użytkownicy będą mogli korzystać z rozszerzenia w spójny i zrozumiały sposób.
- Jak użytkownicy mogą znaleźć mój panel boczny?
- Przekaż nowym użytkownikom, jak korzystać z panelu bocznego, dostarczając im odpowiednią dokumentację lub odpowiednie szkolenia w rozszerzeniu. Pomoże to zatrzymać użytkowników i uniknąć złych opinii na stronie z informacjami o aplikacji. Pamiętaj, że przed zainstalowaniem rozszerzenia możesz zacząć go uczyć, dodając film w YouTube pokazujący, jak działa dane rozszerzenie na stronie z informacjami o aplikacji.
Zaktualizowaliśmy też nasze Zasady programu o dodatkowe informacje w sekcjach Sprawdzone metody i Wskazówki dotyczące jakości, aby uwzględniały niektóre z tych kwestii. Zmiany te wskazują, że panel boczny powinien pełnić funkcję pomocną podczas przeglądania internetu, zapewniając uzupełniające się funkcje. Wyjaśniają też, że na panelu bocznym nie powinno być niepotrzebnych elementów rozpraszających uwagę.
Omówienie interfejsu API
Aby rozszerzenie wyświetlało się w panelu bocznym, poproś o uprawnienie "sidePanel" w manifeście i dodaj klucz "side_panel" z "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 interfejsy API rozszerzeń połączeń tak samo jak w przypadku każdej innej strony rozszerzeń. Ikona panelu bocznego zostanie pobrana z ikony rozszerzenia – pamiętaj, aby ją dodatkowo dopracować.
Dodatkowe możliwości
Możesz połączyć panel boczny z ikoną działania, aby móc go łatwo otworzyć w dowolnym momencie:
service-worker.js:
await chrome.sidePanel.setPanelBehavior({ openPanelOnActionClick: true });
Jeśli chcesz, aby panel boczny był wyświetlany tylko na określonych stronach, możesz to kontrolować i uniemożliwiać jego wyświetlanie w innych 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ę Side Panel API, z której możesz zacząć korzystać już dziś. Dodaliśmy też do repozytorium chrome-extensions-samples przykłady, dzięki którym dowiesz się, jak interfejs API może być używany w praktyce.
Jak już wspomnieliśmy, zmodyfikowaliśmy też nasze strony z zasadami i sprawdzone metody, aby dodać więcej informacji o tworzeniu panelu bocznego zapewniającego najlepsze wrażenia użytkownikom.
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.
Fot. Vardan Papikyan, Unsplash