recursal/MDN huggingface dataset:
fill-opacity
============

L'attribut **`fill-opacity`** définit l'opacité du remplissage (*couleur, dégradé, motif*, etc) appliqué à une forme.

**Note :** `fill-opacity` étant un attribut de présentation, il peut être utilisé comme propriété CSS.

Cet attribut peut être appliqué sur tous les éléments, en revanche il n'aura d'effet que sur les éléments suivants: `<altGlyph>`, `<circle>`, `<ellipse>`, `<path>`, `<polygon>`, `<polyline>`, `<rect>`, `<text>`, `<textPath>` (en-US), `<tref>` (en-US), et `<tspan>`

Exemple
-------
```

html,
body,
svg {
  height: 100%;
}
```



```html
<svg viewBox="0 0 400 100" xmlns="http://www.w3.org/2000/svg">
  <!-- Opacité par défaut: 1 -->
  <circle cx="50" cy="50" r="40" />

  <!-- Définit l'opacité avec un nombre -->
  <circle cx="150" cy="50" r="40" fill-opacity="0.7" />

  <!-- Définit l'opaité avec un pourcentage -->
  <circle cx="250" cy="50" r="40" fill-opacity="50%" />

  <!-- Définit l'opacité avec une propriété CSS -->
  <circle cx="350" cy="50" r="40" style="fill-opacity: .25;" />
</svg>
```

Notes d'utilisation
-------------------

|  |  |
| --- | --- |
| Valeur | `[0-1]` |
 **<percentage>** |
| Valeur par défaut | `1` |
| Animation | Oui |

**Note :** SVG2 introduit les valeurs en pourcentage pour `fill-opacity`. Cependant, ce n'est pas souvent pris en charge pour le moment (*Voir la section Compatibilité des navigateurs ci-dessous*). Il est par conséquent recommandé d'utiliser les valeurs de l'intervalle `[0-1]`.

Spécifications
--------------

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # FillOpacity |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
Contenu embarqué dans le SVG
============================

* « Précédent
* Suivant »

En plus des formes graphiques simples comme les rectangles et les cercles, le format SVG permet d'ajouter d'autres types de contenu aux images.

### Embarquer des images

De la même façon qu'il est possible d'utiliser la balise **img** en HTML, le format SVG possède un élément **`image`** qui a la même utilité. Vous pouvez l'utiliser pour insérer des images bitmap ou vectorielles dans votre image SVG. La spécification définit que les formats PNG, JPEG et SVG au moins doivent être supportés.

L'image embarquée devient un élément SVG normal. Cela implique que vous pouvez utiliser le découpage, les masques, les filtres, les rotations et toute la panoplie des outils svg sur ce contenu embarqué :


```html
<svg
 version="1.1"
 xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink"
 width="200"
 height="200">
  <image
 x="90"
 y="-65"
 width="128"
 height="146"
 transform="rotate(45)"
 xlink:href="https://developer.mozilla.org/fr/docs/Web/SVG/Element/image/mdn\_logo\_only\_color.png" />
</svg>
```

### Embarquer du contenu XML quelconque

Étant donné que le SVG est un document XML, il est toujours possible d'adjoindre un contenu XML quelconque n'importe où dans le document. Mais il n'y a évidemment aucun moyen de savoir comment l'élément SVG encadrant votre contenu réagira à ce qui aura été inséré. En fait, un lecteur SVG correct ne réagira d'aucune façon particulière et ignorera purement et simplement ce contenu. Si la spécification ajoute l'élément SVG `foreignObject`,son utilité est essentiellement d'être une coquille pour d'autres balises et de permettre d'adjoindre des attributs de style (comme par exemple la *largeur* et la *hauteur* de l'objet embarqué afin de définir la place que celui-ci occupera).

L'élément **`foreignObject`** est donc la bonne méthode pour embarquer du **XHTML** dans du SVG. Si le SVG doit contenir du texte de longueur conséquente, la disposition HTML est bien plus pratique et utilisable que l'élément SVG `text`. Une autre utilisation bien pratique de cet élément est l'adjonction de formules avec MathML. Pour des applications scientifiques utilisant le SVG, c'est un bon moyen de permettre la communication entre ces deux univers.

**Note :** Gardez à l'esprit que le contenu du `foreignObject` doit pouvoir être analysé et pris en compte par votre lecteur SVG. Il y a peu de chances qu'un lecteur SVG autonome soit capable de restituer du contenu HTML or MathML.

Etant donné que le `foreignObject` est un élément SVG comme un autre, vous pouvez, comme dans le case de l'élément `image`, utiliser toute la panoplie des attributs SVG qui pourrait s'appliquer au contenu embarqué.

* « Précédent
* Suivant »
SVG: Elément image
==================

* « Précédent
* Suivant »

L'élément SVG `<image>` permet d'afficher des images pixélisées au sein d'un objet SVG.

Dans cet exemple basique, une image JPG liée par l'attribut `xlink:href (en-US)` sera rendue à l'intérieur d'un objet SVG.


```xml
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="5cm" height="4cm" version="1.1"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink">
  <image xlink:href="firefox.jpg" x="0" y="0" height="50px" width="50px"/>
</svg>
```


Il faut prendre note de quelques point essentiels (donnés par les spécifications W3):

* Si les attributs x ou y ne sont pas spécifiés, ils vaudront 0.
* Si les attributs height ou width ne sont pas spécifiés, ils vaudront 0.
* Si l'attribut height ou l'attribut width est initialisé à 0, cela désactivera l'affichage de l'image.
* « Précédent
* Suivant »
Développer des WebExtensions pour Thunderbird
=============================================

Vous aborderez le codage d'une extension pour Thunderbird de la même manière que pour une extension Firefox ; en utilisant un éditeur de texte ou un outil de votre choix pour écrire le code.

Différences des API
-------------------

**Note :** Voir la documentation de l'API WebExtension de ReadTheDocs pour Thunderbird.

Étant tous deux basés sur Gecko, Thunderbird supporte plusieurs des APIs que Firefox supporte, avec quelques différences, voir la compatibilité du navigateur pour manifest.json et le support du navigateur pour les APIs JavaScript pour les détails.

Voir aussi
----------

* Thunderbird specific WebExtension API documentation
* Browser support for JavaScript APIs
* Browser compatibility for manifest.json
Aperçu du flux de travail Firefox
=================================

|  |  |  |  |  |
| --- | --- | --- | --- | --- |
|  |  |  |  |  |
| * Choisissez une version Firefox pour le développement d'extensions
web
* Choisissez votre IDE ou votre éditeur de code
* Installer web-ext
* Créer votre échanfaudage d'extension
* Familiarisez-vous avec les
 apolitiques des extensions et l'accord du développeur
 | * Codez your extension
* Testez votre extension avec le
 lanceur web-ext
 ou
 about: debugging)
* Tester les fonctions persistantes et redémarrer
* Déboguer avec la
 fenêtre de débogage de votre extension
 | * Packager votre extension avec la brique web-ext
* Créer un compte
 addons.mozilla.org
* Soumettre votre extension
* Soumettre votre code source
 (si nécessaire)
* Créer une liste attrayante
 | * Répondu à l'examen de l'extension de Mozilla
* Promouvoir votre extension
* Proposez votre extensions pour qu'elle soit mise en avant
* Mettre à jour et améliorer votre extension
 | * Retirez votre extension
 |

\* Ou distribuez votre extension pour le chargement latéral, les applications de bureaux, ou dans une enteprise.

**Vous avez une extension que vous souhaitez porter à Firefox?** Nous fournissons des conseils, des directives et des outils pour vous aider à rendre le portage simple. Pour commencer, visitez Portage d'une extension Google Chrome.
actions utilisateurs
====================

Certaines API WebExtension exécutent des fonctions qui sont généralement exécutées à la suite d'une action utilisateur. Par exemple:

* une action du navigateur avec un popup affichera le popup lorsque l'utilisateur clique dessus, mais il y a aussi une API `browserAction.openPopup` permettant à une extension d'ouvrir le popup en programmation.
* si une extension ajoute une barre latérale, elle est généralement ouverte par l'utilisateur via une partie de l'interface utilisateur intégrée du navigateur, comme le menu Affichage/Barre latérale. Mais il y a aussi une API `sidebarAction.open` permettant à une extension d'ouvrir leur barre latérale en programmation.

Pour suivre le principe de "pas de surprises", des APIs comme celle-ci ne peuvent être appelées que de l'intérieur du gestionnaire pour une action de l'utilisateur. Les actions de l'utilisateur comprennent ce qui suit :

* Cliquez sur l'action du navigateur ou de la page de l'extension.
* Sélection d'un élément de menu contextuel défini par l'extension.
* Activation d'un raccourci clavier défini par l'extension (traité uniquement comme une action utilisateur à partir de Firefox 63).
* Cliquer sur un bouton dans une page fournie avec l'extension.

Par exemple:


```js
function handleClick() {
  browser.sidebarAction.open();
}

browser.browserAction.onClicked.addListener(handleClick);
```


Notez que les actions de l'utilisateur dans les pages Web normales ne sont pas traitées comme des actions de l'utilisateur à cette fin. Par exemple, si un utilisateur clique sur un bouton dans une page Web normale et qu'un script de contenu a ajouté un gestionnaire de clic pour ce bouton et que ce gestionnaire envoie un message à la page d'arrière-plan de l'extension, alors le gestionnaire de message de page d'arrière-plan n'est pas considéré comme traitant une action utilisateur.

De plus, si un gestionnaire d'entrée utilisateur attend une promise, alors son statut de gestionnaire d'entrée utilisateur est perdu. Par exemple :


```js
async function handleClick() {
  let result = await someAsyncFunction();

  // this will fail, because the handler lost its "user action handler" status
  browser.sidebarAction.open();
}

browser.browserAction.onClicked.addListener(handleClick);
```
Browser compatibility for manifest.json
=======================================

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Voir aussi
----------

* Prise en charge du navigateur pour les API JavaScript
Options page
============

Une page Option vous permet de définir des préférences pour votre WebExtension que vos utilisateurs peuvent modifier. Les utilisateurs peuvent accéder à la page d'options de l'extension à partir du gestionnaire des add-ons du navigateur:

La façon dont les utilisateurs accèdent à la page et la manière dont elle est intégrée à l'interface utilisateur du navigateur varient d'un navigateur à l'autre.

Vous pouvez ouvrir la page en programmant en appelant `runtime.openOptionsPage()`.

Les pages d'options ont une politique de sécurité de contenu qui restreint les sources à partir de laquelle elles peuvent charger des ressources et interdit certaines pratiques dangereuses telles que l'utilisation `eval()`. Voir la politique de sécurité de contenu pour plus de détails.

Spécification de la page d'options
----------------------------------

Pour créer une page d'options, écrivez un fichier HTML définissant la page. Cette page peut inclure des fichiers CSS et JavaScript, comme une page Web normale. Cette page, contine un exemple dans favourite-colour, comprend un fichier :


```html
<!doctype html>

<html>
  <head>
    <meta charset="utf-8" />
  </head>

  <body>
    <form>
      <label>Favourite colour</label>
      <input type="text" id="colour" />
      <button type="submit">Save</button>
    </form>
    <script src="options.js"></script>
  </body>
</html>
```


JavaScript en cours d'exécution dans la page peut utiliser toutes les APIs des WebExtension auxquelles l'extension a des permissions. En particulier, vous pouvez utiliser l'API `storage` pour conserver les préférences.

Insérez les fichiers de la page dans votre extension.

Vous devez également inclure une clé `options_ui` dans votre fichier manifest.json, en lui donnant l'URL de la page.


```json
"options\_ui": {
  "page": "options.html",
  "browser\_style": true
},
```


**Note :** **Google Chrome** et **Opera** utilisent `chrome_style` au lieu de `browser_style`, donc si vous souhaitez les prendre en charge, vous devez ajouter les deux clés.

Voir la page `options_ui` pour les **options de partage** entre votre page d'options et les scripts d'arrière-plan ou de contenu.

Options de conception de contenu
--------------------------------

Pour plus de détails sur la façon de concevoir le contenu de vos options en fonction du style de Firefox, voir le system de conception Photon et les styles de navigateur documentation.

Exemples
--------

Le depot webextensions-examples sur GitHub contient plusieurs exemples de WebExtensions qui utilisent les options de page :

* favourite-colour utilise les options de page
Notifications
=============

Les notifications vous permettent d'afficher des informations sur votre extension ou son contenu en utilisant le système d'exploitation sous-jacent.

![](/fr/docs/Mozilla/Add-ons/WebExtensions/user_interface/Notifications/notify-shadowed.png)

Les notifications peuvent inclure un appel d'action pour l'utilisateur, et votre extension peut écouter l'utilisateur en cliquant sur la notification ou la fermeture de la notification.

Spécification des notifications
-------------------------------

Vous gérez les notifications en programmant, en utilisant l'API `notifications`. Pour utiliser cette API, vous devez demander la permission de notification dans votre manifest.json :


```json
"permissions": ["notifications"]
```


Vous utilisez ensuite `notifications.create` pour créer vos notifications, comme dans cet exemple de notify-link-clicks-i18n :


```js
var title = browser.i18n.getMessage("notificationTitle");
var content = browser.i18n.getMessage("notificationContent", message.url);
browser.notifications.create({
  type: "basic",
  iconUrl: browser.extension.getURL("icons/link-48.png"),
  title: title,
  message: content,
});
```


Ce code crée une notification avec un icône, un titre et un message.

Si la notification inclut un appel à l'action, vous pouvez écouter l'utilisateur en cliquant sur la notification pour appeler la fonction pour gérer l'action:


```js
browser.notifications.onClicked.addListener(handleClick);
```


Si vous émettez des appels à l'action par le biais de notifications, vous souhaitez également définir l'ID de notification facultatif, afin de déterminer quel appel à l'action a sélectionné.

Icônes
------

Pour plus d'informations sur la création d'icônes à utiliser avec votre notification, reportez-vous à la section Iconography dans la documentation Photon Design System.

Exemples
--------

Le dépôt webextensions-examples sur GitHub contient plusieurs exemples de WebExtensions qui utilise la création de notifications :

* notify-link-clicks-i18n utilise la création de notifications.
Actions du navigateur
=====================

Une action du navigateur est un bouton que vous pouvez ajouter à la barre d'outils du navigateur. Les utilisateurs peuvent cliquer sur le bouton pour interagir avec votre extension.

![](/fr/docs/Mozilla/Add-ons/WebExtensions/user_interface/Toolbar_button/browser-action.png)

Il existe deux façons de spécifier une action du navigateur : avec une fenêtre contextuelle, ou sans fenêtre contextuelle.

Si vous ne spécifiez pas de popup, alors lorsque l'utilisateur clique sur le bouton, un événement est envoyé à l'extension, que vous pouvez écouter à l'aide de `browserAction.onClicked`:


```js
browser.browserAction.onClicked.addListener(handleClick);
```


Si vous spécifiez un popup, l'événement click n'est pas distribué : au lieu de cela, le popup sera affiché lorsque l'utilisateur clique sur le bouton. L'utilisateur pourra interagir avec le popup et il se fermera automatiquement lorsque l'utilisateur clique à l'extérieur.

Notez que votre extension ne peut avoir qu'une seule action du navigateur.

Specification de l'action de navigateur
---------------------------------------

Vous définissez les propriétés de l'action du navigateur - icône, titre, popup - en utilisant la clé `browser_action` dans manifest.json:


```json
"browser\_action": {
  "default\_icon": {
    "19": "button/geo-19.png",
    "38": "button/geo-38.png"
  },
  "default\_title": "Whereami?",
  "default\_popup": "popup/geo.html"
}
```


La seule clé obligatoire est `default_icon`. Vous pouvez changer n'importe laquelle de ces propriétés par programme à l'aide de l'API `browserAction` .

Exemples
--------

Le repo webextensions-examples sur GitHub contient plusieurs exemples d'extensions qui utilisent les actions du navigateur :

* bookmark-it utilise une action de navigateur sans popup
* beastify utilise une action de navigateur avec une fenêtre popup
panneaux devtools
=================

**Note :** Cette fonctionnalité deviendra disponible dans Firefox 54.

Lorsqu'une extension fournit des outils utiles aux développeurs, il est possible d'ajouter une interface utilisateur pour les outils de développement du navigateur en tant que nouveau panneau.

![](/fr/docs/Mozilla/Add-ons/WebExtensions/user_interface/devtools_panels/developer_panel_tab.png)

Spécification d'un panneau d'outils de développement
----------------------------------------------------

Un panneau d'outils de développement est ajouté à l'aide de l'API `devtools.panels`, qui, à son tour, doit être exécutée à partir d'une page spéciale devtools.

Ajoutez la page devtools en incluant la clé `devtools_page` dans l'extension manifest.json et fournissez l'emplacement du fichier de la page HTML dans l'extension :


```json
"devtools\_page": "devtools-page.html"
```


Dans la page des devtools, appelez un script qui ajoutera un panneau dans devtools:


```html
<body>
  <script src="devtools.js"></script>
</body>
```


Dans le script, créez un panneau devtools en spécifiant le titre, l'icône et le fichier HTML du panneau qui fournit le contenu du panneau:


```js
function handleShown() {
  console.log("panel is being shown");
}

function handleHidden() {
  console.log("panel is being hidden");
}

browser.devtools.panels
  .create(
    "My Panel", // title
    "icons/star.png", // icon
    "devtools/panel/panel.html", // content
  )
  .then((newPanel) => {
    newPanel.onShown.addListener(handleShown);
    newPanel.onHidden.addListener(handleHidden);
  });
```


L'extension peut maintenant exécuter un code dans la fenêtre inspectée à l'aide de `devtools`.inspectedWindow.eval() ou en injectant un script de contenu via le script en arrière en passant un message. Vous pouvez trouver plus de détails sur la façon de procéder dans l'Extension des outils de développement.

Conception du panneau de développement
--------------------------------------

Pour plus de détails sur la façon de concevoir la page Web de votre panneau de développeurs pour qu'elle corresponde au style de Firefox, consultez la documentation Photon Design System.

Icônes
------

Pour plus de détails sur la création d'icônes à utiliser avec votre panneau d'outils de développement, voir Iconographie dans la documentation du Photon Design System.

Exemples
--------

Le depot webextensions-examples sur GitHub contient plusieurs exemples de WebExtensions qui utilisent les panneaux devtools:

* devtools-panels utilise la création d'un panneau dans devtools
Extension pages
===============

Vous pouvez inclure des pages HTML dans votre extension sous la forme de formulaires, d'aide ou tout autre contenu dont votre extension a besoin.

![](/fr/docs/Mozilla/Add-ons/WebExtensions/user_interface/Extension_pages/bundled_page_as_panel_small.png)

Ces pages ont également accès aux mêmes API JavaScript privilégiées qui sont disponibles pour les scripts d'arrière‐plan de votre extension, mais elles sont dans leur propre onglet, leur propre file d'attente d'événements JavaScript, leurs propres globales etc.

Pensez à la page d'arrière-plan comme une « page cachée d'extension ».

Spécification des pages d'extension
-----------------------------------

Vous pouvez inclure des fichiers HTML - et les fichiers CSS ou JavaScript associés - dans votre extension. Les fichiers peuvent être inclus à la racine ou organisés dans des sous‐dossiers.
```

/my-extension
    /manifest.json
    /my-page.html
    /my-page.js
```

Affichage des pages d'extension
-------------------------------

Il existe deux options pour afficher des pages d'extension : `windows.create()` et `tabs.create()`.

À l'aide de `windows.create()`, vous pouvez ouvrir une page HTML intégrée dans un panneau détaché (une fenêtre sans l'interface utilisateur de la barre d'la barre de signet et similaire) pour créer une expérience utilisateur semblable à une boîte de dialogue :


```js
var createData = {
  type: "detached\_panel",
  url: "panel.html",
  width: 250,
  height: 100,
};
var creating = browser.windows.create(createData);
```


Lorsque la fenêtre n'est plus nécessaire, elle peut être fermée par programme.

Par exemple, après que l'utilisateur a cliqué sur un bouton, en passant l'ID de la fenêtre actuelle à `windows.remove()` :


```js
document.getElementById("closeme").addEventListener("click", function () {
  let winId = browser.windows.WINDOW\_ID\_CURRENT;
  let removing = browser.windows.remove(winId);
});
```

Pages d'extension et historique
-------------------------------

Par défaut, les pages que vous ouvrez de cette manière seront stockées dans l'historique de l'utilisateur, comme les pages Web normales. Si vous ne voulez pas avoir ce comportement, utilisez `history.deleteUrl()` pour supprimer l'enregistrement du navigateur :


```js
function onVisited(historyItem) {
  if (historyItem.url == browser.extension.getURL(myPage)) {
    browser.history.deleteUrl({ url: historyItem.url });
  }
}

browser.history.onVisited.addListener(onVisited);
```


Pour utiliser l'API historique, vous devez demander la permission « `history` » dans votre fichier `manifest.json`.

Conception des pages Web
------------------------

Pour plus de détails sur la façon de concevoir votre page Web pour correspondre au style de Firefox, voir la documentation sur le système de conception Photon et les styles de navigateur.

Exemples
--------

Le dépôt webextensions-examples sur GitHub contient plusieurs exemples de WebExtensions qui utilise une action de navigateur :

* window-manipulator utilise les options pour créer une fenêtre
search
======

Récupère les moteurs de recherche et lance une recherche avec un moteur de recherche spécifique

Pour utiliser cette API, vous devez avoir la permission "search".

Fonctions
---------

`search.get()`

Récupérer tous les moteurs de recherche

`search.search()`

Recherche à l'aide du moteur de recherche spécifié.

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Example extensions
------------------

* menu-search