Ontwerp een superieure gebruikerservaring met de nieuwe Side Panel API

Oliver Dunk
Amy Steam

Een jaar geleden, in mei 2022, hebben we het zijpaneel aan Chrome toegevoegd. Dit is een nieuw aanvullend scherm waarmee gebruikers tools naast de inhoud die ze bekijken kunnen gebruiken. Vandaag kondigen we met trots aan dat uw extensie vanaf Chrome 114 inhoud in het zijpaneel kan weergeven.

Een woordenboekuitbreiding die de definitie van een geselecteerd woord weergeeft.
Een woordenboekextensie die de definitie van een geselecteerd woord weergeeft. Bekijk de code in de chrome-extensions-samples repository.

Beter voor gebruikers, gemakkelijker voor ontwikkelaars

We hebben al veel ontwikkelaars zijbalkachtige functionaliteiten in hun extensies zien implementeren, en daarom zijn we zo blij dat we dit nu als platformstandaard aanbieden. Met de nieuwe Side Panel API kunt u nu een permanente gebruikersinterface aanbieden die naast de pagina die de gebruiker bezoekt, wordt geopend. Gebruikers profiteren van een consistente positionering en lay-out tussen extensies. Bovendien is de mogelijkheid om de gebruikersinterface weer te geven zonder toestemming van de host aan te vragen een belangrijke winst voor de privacy van gebruikers, met als bijkomend voordeel dat er minder waarschuwingen voor uw extensie worden weergegeven tijdens de installatie.

De Side Panel API verhelpt de problemen die gepaard gaan met het injecteren van content in een onbetrouwbare pagina. Het vermindert ook aanzienlijk de noodzaak om compatibiliteit tussen verschillende sites te waarborgen en om bugrapporten over onbedoelde verstoringen door uw extensie te analyseren.

Een hulpmiddel voor gebruikers op het hele internet.

Bij het ontwikkelen van een nieuw zijpaneel als onderdeel van je extensie, moet je één ding in gedachten houden: hoe help je gebruikers bij het uitvoeren van taken op het web? Hier zijn een paar vragen die je zou moeten overwegen:

Hoe helpt mijn zijpaneel de gebruiker?
Het principe van enkelvoudig doel geldt ook voor uw zijpaneel. Zorg ervoor dat uw zijpaneel functionaliteit biedt die direct verband houdt met de rest van uw extensie en met wat de gebruiker probeert te bereiken.
Verschijnt mijn zijpaneel alleen wanneer dat nodig is?
Met de Side Panel API kunt u kiezen op welke websites uw gebruikers het zijpaneel te zien krijgen. Zo voorkomt u dat het zijpaneel wordt weergegeven wanneer het niet relevant is voor de gebruiker of geen verband houdt met de inhoud die de gebruiker bekijkt.
Past het ontwerp bij de rest van mijn aanbouw?
Je zijpaneel moet een visueel aantrekkelijk ontwerp hebben dat aansluit bij het logo, de kleuren, de pictogrammen en de lettertypen van je extensie en de productvermelding in de store. Dit zorgt voor een consistente en herkenbare gebruikerservaring, waar ze je extensie ook gebruiken.
Hoe ontdekken gebruikers mijn zijpaneel?
Zorg ervoor dat nieuwe gebruikers weten hoe ze je zijpaneel moeten gebruiken door voldoende documentatie of training binnen de extensie aan te bieden. Dit helpt je om gebruikers te behouden en slechte recensies in je winkelpagina te voorkomen. Vergeet niet dat je gebruikers al kunt leren hoe de extensie werkt voordat ze hem installeren, bijvoorbeeld door een YouTube-video in je winkelpagina te plaatsen die laat zien hoe de extensie werkt!

We hebben ook ons ​​programmabeleid bijgewerkt, met aanpassingen aan de secties over beste werkwijzen en kwaliteitsrichtlijnen om een ​​aantal van deze overwegingen te weerspiegelen. Deze wijzigingen benadrukken dat uw zijpaneel een nuttige aanvulling moet zijn op de browse-ervaring van gebruikers door extra functionaliteit te bieden. Ze maken ook duidelijk dat uw zijpaneel geen onnodige afleidingen mag bevatten.

Een overzicht van de API

For your extension to appear in the side panel, request the "sidePanel" permission in your manifest , and add the "side_panel" key with a "default_path" pointing to a page within your extension:

manifest.json:

{
  ...
  "side_panel": {
    "default_path": "sidepanel.html"
  },
  "permissions": [
    "sidePanel"
  ]
  ...
}

Op een zijpaneelpagina kunt u scripts laden en extensie-API's aanroepen, net zoals op elke andere extensiepagina. Het pictogram voor uw zijpaneel wordt overgenomen van het pictogram van uw extensie ; vergeet niet om dit in te stellen voor een netter resultaat.

Extra mogelijkheden

Je kunt het zijpaneel koppelen aan je actie-icoon, zodat je het op elk gewenst moment gemakkelijk kunt openen:

service-worker.js:

await chrome.sidePanel.setPanelBehavior({ openPanelOnActionClick: true });

Als u wilt dat uw zijpaneel alleen op specifieke pagina's verschijnt, kunt u dat instellen en voorkomen dat het verschijnt op plaatsen waar het niet relevant is voor de gebruiker:

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 });
  }
});

Leer meer

We hebben de API-documentatie voor het zijpaneel gepubliceerd, die je vandaag nog kunt lezen. We hebben ook voorbeelden toegevoegd aan de chrome-extensions-samples repository, een uitstekende plek om te zien hoe de API in de praktijk gebruikt kan worden.

Zoals eerder vermeld, zijn onze beleidspagina's en best practices ook herzien om meer informatie te geven over hoe je een zijpaneel kunt bouwen dat de beste ervaring voor je gebruikers biedt.

Je kunt op de hoogte blijven van het laatste nieuws over Chrome-extensies door onze pagina 'Wat is nieuw' te bezoeken. Als je vragen hebt of hulp nodig hebt met de Side Panel API, kun je terecht in de Google Groep voor Chromium-extensies .