chrome.browserAction

Mantieni tutto organizzato con le raccolte Salva e classifica i contenuti in base alle tue preferenze.

Descrizione

Disponibilità

Nella figura seguente, il quadrato multicolore a destra della barra degli indirizzi è l'icona di un'azione del browser. Sotto l'icona è presente un popup.

Se vuoi creare un'icona non sempre attiva, utilizza un'azione di pagina anziché un'azione del browser.

Manifest

Registra l'azione del browser nel manifest dell'estensione come segue:

{
  "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
  },
  ...
}

Puoi fornire un'icona di qualsiasi dimensione da utilizzare in Chrome, che selezionerà quella più simile e la ridimensionerà in base alle dimensioni appropriate per riempire lo spazio di 16 dp. Tuttavia, se non vengono fornite le dimensioni esatte, questo scaling può causare la perdita di dettagli o l'aspetto sfocato dell'icona.

Poiché i dispositivi con fattori di scala meno comuni, come 1,5x o 1,2x, stanno diventando sempre più diffusi, ti consigliamo di fornire più dimensioni per le icone. In questo modo, se le dimensioni di visualizzazione delle icone vengono modificate, non dovrai fare altro per fornire icone diverse.

La vecchia sintassi per la registrazione dell'icona predefinita è ancora supportata:

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

Parti dell'interfaccia utente

Un'azione del browser può avere un'icona, una descrizione comando, un badge e un popup.

Icona

Le icone delle azioni del browser in Chrome sono larghe e alte 16 dip (pixel indipendenti dal dispositivo). Le icone più grandi vengono ridimensionate per adattarsi, ma per risultati ottimali, utilizza un'icona quadrata di 16 pixel.

Puoi impostare l'icona in due modi: utilizzando un'immagine statica o l'elemento canvas HTML5. L'utilizzo di immagini statiche è più semplice per le applicazioni semplici, ma puoi creare UI più dinamiche, ad esempio animazioni fluide, utilizzando l'elemento canvas.

Le immagini statiche possono essere in qualsiasi formato visualizzato da WebKit, inclusi BMP, GIF, ICO, JPEG o PNG. Per le estensioni scompattate, le immagini devono essere in formato PNG.

Per impostare l'icona, utilizza il campo default_icon di browser_action nel file manifest o chiama il metodo browserAction.setIcon.

Per visualizzare correttamente l'icona quando la densità di pixel dello schermo (rapporto size_in_pixel / size_in_dip) è diversa da 1, l'icona può essere definita come insieme di immagini con dimensioni diverse. L'immagine effettiva da visualizzare verrà selezionata dal set in modo da adattarsi al meglio alle dimensioni dei pixel di 16 dpi. L'insieme di icone può contenere specifiche di icone di qualsiasi dimensione e Chrome ne selezionerà la più appropriata.

Descrizione comando

Per impostare la descrizione comando, utilizza il campo default_title di browser_action nel manifest o chiama il metodo browserAction.setTitle. Puoi specificare stringhe specifiche per le impostazioni internazionali per il campo default_title. Per maggiori dettagli, consulta la sezione Internazionalizzazione.

Badge

Facoltativamente, le azioni del browser possono mostrare un badge, ovvero un breve testo sovrapposto all'icona. I badge semplificano l'aggiornamento dell'azione del browser per visualizzare una piccola quantità di informazioni sullo stato dell'estensione.

Poiché lo spazio del badge è limitato, deve contenere al massimo 4 caratteri.

Imposta il testo e il colore del badge utilizzando rispettivamente browserAction.setBadgeText e browserAction.setBadgeBackgroundColor.

Popup

Se un'azione del browser ha un popup, questo viene visualizzato quando l'utente fa clic sull'icona dell'estensione. Il popup può contenere qualsiasi contenuto HTML e viene ridimensionato automaticamente in base ai contenuti. Il popup non può essere più piccolo di 25 x 25 e non può essere più grande di 800 x 600.

Per aggiungere un popup all'azione del browser, crea un file HTML con i contenuti del popup. Specifica il file HTML nel campo default_popup di browser_action nel manifest o chiama il metodo browserAction.setPopup.

Suggerimenti

Per un impatto visivo ottimale, segui queste linee guida:

• Devi utilizzare le azioni del browser per le funzionalità che hanno senso nella maggior parte delle pagine.
• Non utilizzare le azioni del browser per funzionalità che hanno senso solo per alcune pagine. Utilizza invece page actions.
• Devi utilizzare icone grandi e colorate che sfruttano al meglio lo spazio di 16 x 16 pixel. Le icone delle azioni del browser devono sembrare un po' più grandi e più scure rispetto alle icone delle azioni della pagina.
• Non tentare di imitare l'icona del menu monocromatica di Google Chrome. Questo non funziona bene con i temi e, in ogni caso, le estensioni devono risaltare un po'.
• Devi utilizzare la trasparenza alpha per aggiungere bordi morbidi all'icona. Poiché molte persone utilizzano temi, l'icona deve avere un aspetto gradevole su una serie di colori di sfondo.
• Non animare costantemente l'icona. È solo fastidioso.

Esempi

Puoi trovare semplici esempi di utilizzo delle azioni del browser nella directory examples/api/browserAction. Per altri esempi e per assistenza nella visualizzazione del codice sorgente, consulta Samples.

chrome.browserAction.disable(
  tabId?: number,
  callback?: function,
)

chrome.browserAction.enable(
  tabId?: number,
  callback?: function,
)

chrome.browserAction.getBadgeBackgroundColor(
  details: TabDetails,
  callback?: function,
)

chrome.browserAction.getBadgeText(
  details: TabDetails,
  callback?: function,
)

chrome.browserAction.getPopup(
  details: TabDetails,
  callback?: function,
)

chrome.browserAction.getTitle(
  details: TabDetails,
  callback?: function,
)

chrome.browserAction.setBadgeBackgroundColor(
  details: object,
  callback?: function,
)

chrome.browserAction.setBadgeText(
  details: object,
  callback?: function,
)

chrome.browserAction.setIcon(
  details: object,
  callback?: function,
)

chrome.browserAction.setPopup(
  details: object,
  callback?: function,
)

chrome.browserAction.setTitle(
  details: object,
  callback?: function,
)

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