chrome.browserAction

Vernieuwingsdatum: 2026-09-25 robots: noindex

Beschrijving

Beschikbaarheid

In de volgende afbeelding is het veelkleurige vierkantje rechts van de adresbalk het pictogram voor een browseractie. Onder het pictogram bevindt zich een pop-upvenster.

Als je een pictogram wilt maken dat niet altijd actief is, gebruik dan een pagina-actie in plaats van een browseractie.

Manifest

Registreer je browseractie in het extensiemanifest als volgt:

{
  "name": "My extension",
  ...
  "browser_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
  },
  ...
}

Je kunt een pictogram van elk gewenst formaat opgeven voor gebruik in Chrome. Chrome selecteert dan het dichtstbijzijnde formaat en schaalt het naar de juiste grootte om de ruimte van 16 dips te vullen. Als het exacte formaat echter niet wordt opgegeven, kan deze schaling ervoor zorgen dat het pictogram details verliest of er wazig uitziet.

Omdat apparaten met minder gangbare schaalfactoren zoals 1,5x of 1,2x steeds vaker voorkomen, is het raadzaam om meerdere formaten voor uw pictogrammen aan te bieden. Dit zorgt er ook voor dat u geen extra werk hoeft te verrichten om andere pictogrammen aan te leveren als de weergavegrootte van het pictogram ooit verandert!

De oude syntax voor het registreren van het standaardpictogram wordt nog steeds ondersteund:

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

Onderdelen van de gebruikersinterface

Een browseractie kan een pictogram , een tooltip , een badge en een pop-up hebben.

Icon

De actiepictogrammen in Chrome zijn 16 dips (apparaat-onafhankelijke pixels) breed en hoog. Grotere pictogrammen worden aangepast aan de afmetingen, maar voor het beste resultaat kunt u het beste een vierkant pictogram van 16 dips gebruiken.

Je kunt het pictogram op twee manieren instellen: met een statische afbeelding of met het HTML5 canvas-element . Het gebruik van statische afbeeldingen is eenvoudiger voor simpele applicaties, maar met het canvas-element kun je dynamischere gebruikersinterfaces creëren, zoals vloeiende animaties.

Statische afbeeldingen kunnen elk formaat hebben dat WebKit kan weergeven, waaronder BMP, GIF, ICO, JPEG of PNG. Voor uitgepakte extensies moeten afbeeldingen in PNG-formaat zijn.

Om het pictogram in te stellen, gebruikt u het veld default_icon van browser_action in het manifest , of roept u de methode browserAction.setIcon aan.

Om een ​​pictogram correct weer te geven wanneer de schermpixeldichtheid (verhouding size_in_pixel / size_in_dip ) anders is dan 1, kan het pictogram worden gedefinieerd als een set afbeeldingen met verschillende formaten. De daadwerkelijke afbeelding die moet worden weergegeven, wordt uit de set geselecteerd op basis van de grootte die het beste past bij een pixelgrootte van 16 dip. De pictogramset kan elke gewenste grootte bevatten en Chrome selecteert de meest geschikte afbeelding.

Tooltip

Om de tooltip in te stellen, gebruikt u het veld default_title van browser_action in het manifest , of roept u de methode browserAction.setTitle aan. U kunt taalspecifieke tekenreeksen opgeven voor het veld default_title ; zie Internationalisering voor meer informatie.

Badge

Browseracties kunnen optioneel een badge weergeven: een stukje tekst dat over het pictogram heen wordt geplaatst. Badges maken het eenvoudig om de browseractie bij te werken en een kleine hoeveelheid informatie over de status van de extensie weer te geven.

Omdat er beperkte ruimte is voor het insigne, mag het maximaal 4 tekens bevatten.

Stel de tekst en kleur van de badge in met respectievelijk browserAction.setBadgeText en browserAction.setBadgeBackgroundColor .

Pop-up

Als een browseractie een pop-up heeft, verschijnt deze wanneer de gebruiker op het pictogram van de extensie klikt. De pop-up kan willekeurige HTML-inhoud bevatten en wordt automatisch aangepast aan de inhoud. De pop-up mag niet kleiner zijn dan 25x25 en niet groter dan 800x600.

Om een ​​pop-up aan je browseractie toe te voegen, maak je een HTML-bestand met de inhoud van de pop-up. Specificeer het HTML-bestand in het veld default_popup van browser_action in het manifest , of roep de methode browserAction.setPopup aan.

Tips

Volg deze richtlijnen voor het beste visuele effect:

• Gebruik browseracties voor functies die op de meeste pagina's zinvol zijn.
• Gebruik geen browseracties voor functies die slechts op een paar pagina's zinvol zijn. Gebruik in plaats daarvan pagina-acties .
• Gebruik grote, kleurrijke pictogrammen die de beschikbare ruimte van 16x16 pixels optimaal benutten. Pictogrammen voor browseracties moeten iets groter en opvallender lijken dan pictogrammen voor pagina-acties.
• Probeer niet het monochrome menu-icoon van Google Chrome na te bootsen. Dat werkt niet goed met thema's, en bovendien moeten extensies een beetje opvallen.
• Gebruik alfa-transparantie om zachte randen aan je pictogram toe te voegen. Omdat veel mensen thema's gebruiken, moet je pictogram er mooi uitzien op verschillende achtergrondkleuren.
• Animeer je icoontje niet constant. Dat is gewoon irritant.

Voorbeelden

Eenvoudige voorbeelden van het gebruik van browseracties vindt u in de map examples/api/browserAction . Voor andere voorbeelden en hulp bij het bekijken van de broncode, zie Voorbeelden .

chrome.browserAction.disable(
  tabId?: number,
  callback?: function,
): Promise<void>

chrome.browserAction.enable(
  tabId?: number,
  callback?: function,
): Promise<void>

chrome.browserAction.getBadgeBackgroundColor(
  details: TabDetails,
  callback?: function,
): Promise<extensionTypes.ColorArray>

chrome.browserAction.getBadgeText(
  details: TabDetails,
  callback?: function,
): Promise<string>

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

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

chrome.browserAction.setBadgeBackgroundColor(
  details: object,
  callback?: function,
): Promise<void>

chrome.browserAction.setBadgeText(
  details: object,
  callback?: function,
): Promise<void>

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

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

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

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