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
Wielu deweloperów zastosowało w swoich rozszerzeniach funkcje takie jak pasek boczny, dlaczego bardzo się cieszymy, że stało się to standardem naszej platformy. Nowy interfejs Side Panel API umożliwia mogą teraz oferować stały interfejs użytkownika otwierany obok odwiedzanej przez użytkownika strony. Użytkownicy będą na spójne pozycjonowanie i układ rozszerzeń. Ponadto możliwość wyświetlania Interfejs użytkownika bez wysyłania prośby o przyznanie uprawnień hosta stanowi dla użytkowników dużą zaletę ochrony prywatności. korzyści wynikające z ograniczenia liczby ostrzeżeń wyświetlanych w przypadku rozszerzenia w momencie instalacji.
Interfejs Side Panel API eliminuje problemy związane ze wstrzyknięciem treści z niezaufanej strony. Znacznie zmniejsza też konieczność utrzymywania zgodności między różnymi witrynami i przeglądać raporty o błędach dotyczące przypadkowych zakłóceń .
Dodatkowe narzędzie dla użytkowników internetu
Gdy tworzysz nowy panel boczny w ramach rozszerzenia, pamiętaj, aby uwzględnić jeden element. Jak pomagacie użytkownikom w wykonywaniu zadań w internecie? Odpowiedz na kilka pytań, powinien rozważyć:
- 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 w internecie.
- 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. Zmiany te podkreślają, że panel boczny powinien służyć użytkownikom funkcje przeglądania, uzupełniające funkcje. 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 jak każdy inny stronie rozszerzenia. Ikona panelu bocznego zostanie pobrana z rozszerzenia – pamiętaj, by dopracować tę stronę.
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, by panel boczny pojawiał się tylko na określonych stronach, możesz to określić, aby nie pojawiał się 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ę 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, odwiedź grupę dyskusyjną Google dotyczącą rozszerzeń Chromium.
Zdjęcie: Vardan Papikyan, Unsplash