chrome.pageAction

refresh date: 2026-09-25 robots: noindex

Beschrijving

Gebruik de chrome.pageAction API om iconen in de hoofdwerkbalk van Google Chrome te plaatsen, rechts van de adresbalk. Pagina-acties zijn acties die kunnen worden uitgevoerd op de huidige pagina, maar die niet van toepassing zijn op alle pagina's. Pagina-acties worden grijs weergegeven als ze inactief zijn.

Beschikbaarheid

≤ MV2

Enkele voorbeelden:

  • Abonneren op de RSS-feed van deze pagina
  • Maak een diavoorstelling van de foto's op deze pagina

Het RSS-icoon in het volgende screenshot vertegenwoordigt een pagina-actie waarmee je je kunt abonneren op de RSS-feed voor de huidige pagina.

Acties voor verborgen pagina's worden grijs weergegeven. De RSS-feed hieronder is bijvoorbeeld grijs, omdat je je niet kunt abonneren op de feed voor de huidige pagina:

Overweeg in plaats daarvan een browseractie te gebruiken, zodat gebruikers altijd interactie kunnen hebben met je extensie.

Manifest

Registreer je pagina-actie als volgt in het extensiemanifest:

{
  "name": "My extension",
  ...
  "page_action": {
    "default_icon": {                    // optional
      "16": "images/icon16.png",           // optional
      "24": "images/icon24.png",           // optional
      "32": "images/icon32.png"            // optional
    },
    "default_title": "Google Mail",      // optional; shown in tooltip
    "default_popup": "popup.html"        // optional
  },
  ...
}

Omdat apparaten met minder gebruikelijke schaalfactoren zoals 1,5x of 1,2x steeds vaker voorkomen, raden we je aan meerdere formaten voor je iconen te bieden. Chrome selecteert de dichtstbijzijnde en schaalt deze om de ruimte van 16 dip te vullen. Dit zorgt er ook voor dat als de weergavegrootte van het icoon ooit wordt gewijzigd, je geen extra werk hoeft te doen om verschillende iconen te leveren. Als het verschil in grootte te groot is, kan het icoon door deze schaling details verliezen of wazig worden.

De oude syntaxis voor de registratie van het standaardicoon wordt nog steeds ondersteund:

{
  "name": "My extension",
  ...
  "page_action": {
    ...
    "default_icon": "images/icon32.png"  // optional
    // equivalent to "default_icon": { "32": "images/icon32.png" }
  },
  ...
}

Onderdelen van de UI

Net als browserhandelingen kunnen paginahandelingen een icoon, een tooltip en een pop-up hebben. Ze kunnen echter geen badges hebben. Daarnaast kunnen pagina-acties grijs worden weergegeven. Je vindt informatie over iconen, tooltips en pop-ups in de UI voor browseracties.

Je kunt een pagina-actie laten verschijnen en grijs maken met respectievelijk de methoden pageAction.show en pageAction.hide. Standaard wordt een pagina-actie grijs weergegeven. Als je het icoon toont, geef je aan op welk tabblad het icoon moet verschijnen. Het icoon blijft zichtbaar totdat het tabblad wordt gesloten of een andere URL toont (bijvoorbeeld omdat de gebruiker op een link klikt).

Tips

Volg deze richtlijnen voor de beste visuele impact:

  • Gebruik wel pagina-acties voor functies die alleen zinvol zijn voor een paar pagina's.
  • Gebruik geen pagina-acties voor functies die logisch zijn voor de meeste pagina's. Gebruik in plaats daarvan browseracties.
  • Animeer je icoon niet voortdurend. Dat is gewoon irritant.

Typen

ImageDataType

Pixelgegevens voor een afbeelding. Moet een ImageData-object zijn (bijvoorbeeld van een canvas-element).

Type

ImageData

TabDetails

Chrome 88+

Eigenschappen

  • tabId

    number optioneel

    De ID van het tabblad waarvoor je de status wilt opvragen. Als er geen tabblad is opgegeven, wordt de niet-tabbladspecifieke status geretourneerd.

Methoden

getPopup()

Promise 
chrome.pageAction.getPopup(
  details: TabDetails,
  callback?: function,
): Promise<string>

Haalt het HTML-document op dat is ingesteld als de pop-up voor deze pagina-actie.

Parameters

  • details

    TabDetails

  • callback

    functie optioneel

    De parameter callback ziet er zo uit: 

    (result: string) => void

    • resultaat

      tekenreeks

Retourzendingen

  • Promise<string>

    Chrome 101+

    Promises worden alleen ondersteund voor Manifest V3 en hoger. Andere platforms moeten callbacks gebruiken.

getTitle()

Promise 
chrome.pageAction.getTitle(
  details: TabDetails,
  callback?: function,
): Promise<string>

Haalt de titel van de pagina-actie op.

Parameters

  • details

    TabDetails

  • callback

    functie optioneel

    De parameter callback ziet er zo uit: 

    (result: string) => void

    • resultaat

      tekenreeks

Retourzendingen

  • Promise<string>

    Chrome 101+

    Promises worden alleen ondersteund voor Manifest V3 en hoger. Andere platforms moeten callbacks gebruiken.

hide()

Promise 
chrome.pageAction.hide(
  tabId: number,
  callback?: function,
): Promise<void>

Verbergt de pagina-actie. Verborgen pagina-acties worden nog steeds getoond in de Chrome-werkbalk, maar zijn grijs.

Parameters

  • tabId

    getal

    De ID van het tabblad waarvoor je de pagina-actie wilt aanpassen.

  • callback

    functie optioneel

    Chrome 67+

    De parameter callback ziet er zo uit: 

    () => void

Retourzendingen

  • Promise<void>

    Chrome 101+

    Promises worden alleen ondersteund voor Manifest V3 en hoger. Andere platforms moeten callbacks gebruiken.

setIcon()

Promise 
chrome.pageAction.setIcon(
  details: object,
  callback?: function,
): Promise<void>

Hiermee stel je het icoon voor de pagina-actie in. Het icoon kan worden gespecificeerd als het pad naar een afbeeldingsbestand of als de pixelgegevens van een canvaselement, of als woordenboek van een van beide. De property path of imageData moet worden opgegeven.

Parameters

  • details

    object

    • iconIndex

      number optioneel

      Beëindigd. Dit argument wordt genegeerd.

    • imageData

      ImageData | object optioneel

      Een ImageData-object of een woordenboek {size -> ImageData} dat het icoon vertegenwoordigt dat moet worden ingesteld. Als het icoon is gespecificeerd als een woordenboek, wordt de daadwerkelijke afbeelding die wordt gebruikt, gekozen op basis van de pixeldichtheid van het scherm. Als het aantal afbeeldingspixels dat in één schermruimte-eenheid past gelijk is aan scale, wordt de afbeelding met de grootte scale * n geselecteerd, waarbij n de grootte van het icoon in de UI is. Er moet minstens één afbeelding worden ingevoerd. Let op: 'details.imageData = foo' is gelijk aan 'details.imageData = {'16': foo}'

    • pad

      string | object optioneel

      Een relatief afbeeldingspad of een woordenboek {size -> relative image path} dat verwijst naar het icoon dat moet worden ingesteld. Als het icoon is gespecificeerd als een woordenboek, wordt de daadwerkelijke afbeelding die wordt gebruikt, gekozen op basis van de pixeldichtheid van het scherm. Als het aantal afbeeldingspixels dat in één schermruimte-eenheid past gelijk is aan scale, wordt de afbeelding met de grootte scale * n geselecteerd, waarbij n de grootte van het icoon in de UI is. Er moet minstens één afbeelding worden ingevoerd. 'details.path = foo' is gelijk aan 'details.path = {'16': foo}'

    • tabId

      getal

      De ID van het tabblad waarvoor je de pagina-actie wilt aanpassen.

  • callback

    functie optioneel

    De parameter callback ziet er zo uit: 

    () => void

Retourzendingen

  • Promise<void>

    Chrome 101+

    Promises worden alleen ondersteund voor Manifest V3 en hoger. Andere platforms moeten callbacks gebruiken.

setPopup()

Promise 
chrome.pageAction.setPopup(
  details: object,
  callback?: function,
): Promise<void>

Stelt het HTML-document in dat als pop-up moet worden geopend als de gebruiker op het icoon van de pagina-actie klikt.

Parameters

  • details

    object

    • pop-up

      tekenreeks

      Het relatieve pad naar het HTML-bestand dat in een pop-up moet worden getoond. Als je dit beleid instelt op de lege tekenreeks (''), wordt er geen pop-up getoond.

    • tabId

      getal

      De ID van het tabblad waarvoor je de pagina-actie wilt aanpassen.

  • callback

    functie optioneel

    Chrome 67+

    De parameter callback ziet er zo uit: 

    () => void

Retourzendingen

  • Promise<void>

    Chrome 101+

    Promises worden alleen ondersteund voor Manifest V3 en hoger. Andere platforms moeten callbacks gebruiken.

setTitle()

Promise 
chrome.pageAction.setTitle(
  details: object,
  callback?: function,
): Promise<void>

Hiermee wordt de titel van de pagina-actie ingesteld. Deze wordt getoond in een tooltip boven de pagina-actie.

Parameters

  • details

    object

    • tabId

      getal

      De ID van het tabblad waarvoor je de pagina-actie wilt aanpassen.

    • titel

      tekenreeks

      De tekenreeks van de tooltip.

  • callback

    functie optioneel

    Chrome 67+

    De parameter callback ziet er zo uit: 

    () => void

Retourzendingen

  • Promise<void>

    Chrome 101+

    Promises worden alleen ondersteund voor Manifest V3 en hoger. Andere platforms moeten callbacks gebruiken.

show()

Promise 
chrome.pageAction.show(
  tabId: number,
  callback?: function,
): Promise<void>

Toont de pagina-actie. De pagina-actie wordt getoond wanneer het tabblad is geselecteerd.

Parameters

  • tabId

    getal

    De ID van het tabblad waarvoor je de pagina-actie wilt aanpassen.

  • callback

    functie optioneel

    Chrome 67+

    De parameter callback ziet er zo uit: 

    () => void

Retourzendingen

  • Promise<void>

    Chrome 101+

    Promises worden alleen ondersteund voor Manifest V3 en hoger. Andere platforms moeten callbacks gebruiken.

Evenementen

onClicked

chrome.pageAction.onClicked.addListener(
  callback: function,
)

Wordt geactiveerd als er op een pagina-actie-icoon wordt geklikt. Deze gebeurtenis wordt niet geactiveerd als de paginahandeling een pop-up heeft.

Parameters

  • callback

    functie

    De parameter callback ziet er zo uit: 

    (tab: tabs.Tab) => void