initial commit

4 files changed, 418 insertions, 0 deletions

diff --git a/files/fr/mozilla/add-ons/webextensions/api/find/find/index.html b/files/fr/mozilla/add-ons/webextensions/api/find/find/index.html
new file mode 100644
index 0000000000..e51d5330c0
--- /dev/null
+++ b/files/fr/mozilla/add-ons/webextensions/api/find/find/index.html
@@ -0,0 +1,292 @@
+---
+title: find.find()
+slug: Mozilla/Add-ons/WebExtensions/API/find/find
+tags:
+  - API
+  - Add-ons
+  - Extensions
+  - Method
+  - Reference
+  - WebExtensions
+  - find
+translation_of: Mozilla/Add-ons/WebExtensions/API/find/find
+---
+<div>{{AddonSidebar()}}</div>
+
+<p>Recherche du texte dans un onglet.</p>
+
+<p>Vous pouvez utiliser cette fonction pour rechercher des pages Web HTTP(S) normales. Il recherche un seul onglet : vous pouvez spécifier l'ID d'un onglet particulier à rechercher, ou il recherchera l'onglet actif par défaut. Il recherche toutes les images de l'onglet..</p>
+
+<p>Vous pouvez rendre la recherche sensible à la casse et la faire correspondre uniquement à des mots entiers.</p>
+
+<p>Par défaut, la fonction renvoie juste le nombre de correspondances trouvées. En transmettant les options <code>includeRangeData</code> et  <code>includeRectData</code>, vous pouvez obtenir plus d'informations sur l'emplacement des correspondances dans l'onglet cible.</p>
+
+<p>Cette fonction stocke les résultats en interne, donc la prochaine fois qu'une extension appelle {{WebExtAPIRef("find.highlightResults()")}}, alors les résultats de cet appel <em>find</em> seront mis en surbrillance, jusqu'à ce que quelqu'un appelle <code>find()</code>.</p>
+
+<p>C'est une fonction asynchrone qui renvoie une <code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise">Promise</a></code>.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox brush:js">browser.find.find(
+  queryphrase,       // string
+  options            // optional object
+)
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl class="reference-values">
+ <dt><code>queryphrase</code></dt>
+ <dd><code>string</code>. Le texte à rechercher</dd>
+ <dt><code>options</code>{{optional_inline}}</dt>
+ <dd>
+ <p><code>object</code>. Un objet spécifiant des options supplémentaires. Il peut prendre l'une des propriétés suivantes, toutes facultatives :</p>
+
+ <dl class="reference-values">
+  <dt><code>tabId</code></dt>
+  <dd><code>integer</code>. ID de l'onglet à rechercher. Par défaut à l'onglet actif</dd>
+  <dt><code>caseSensitive</code></dt>
+  <dd><code>boolean</code>. Si true, la recherche est sensible à la casse. Par défault à  <code>false</code>.</dd>
+  <dt><code>entireWord</code></dt>
+  <dd><code>boolean</code>. Comparaison seulement entre les mots entiers : ainsi "Tok" ne sera pas comparé dans "Tokyo". Par défaut à <code>false</code>.</dd>
+  <dt><code>includeRangeData</code></dt>
+  <dd><code>boolean</code>. Inclure les groupes de données dans la réponse, which describe where in the page DOM the match was found. Defaults to <code>false</code>.</dd>
+  <dt><code>includeRectData</code></dt>
+  <dd><code>boolean</code>. Inclure les données de rectangle dans la réponse, qui décrit où la correspondance a été trouvée dans la page de rendu. Par défaut à <code>false</code>.</dd>
+ </dl>
+ </dd>
+</dl>
+
+<h3 id="Valeur_retournée">Valeur retournée</h3>
+
+<p>  Une <code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise">Promise</a></code> qui sera remplie avec un objet contenant jusqu'à trois propriétés :</p>
+
+<dl class="reference-values">
+ <dt><code>count</code></dt>
+ <dd><code>integer</code>. Le nombre de résultat trouvés.</dd>
+ <dt><code>rangeData</code>{{optional_inline}}</dt>
+ <dd>
+ <p><code>array</code>. Si <code>includeRangeData</code> a été donné dans le paramètre  <code>options</code>, cette propriété sera incluse. Il est fourni sous la forme d'un tableau d'objets <code>RangeData</code>, un pour chaque correspondance. Chaque objet <code>RangeData</code> décrit où la correspondance a été trouvée dans l'arborescence DOM. Cela permettrait, par exemple, une extension pour obtenir le texte entourant chaque correspondance, afin d'afficher le contexte pour les correspondances.</p>
+
+ <p>Les élements correspondent aux éléments données dans <code>rectData</code>, donc <code>rangeData[i]</code> décrit la même correspondance que  <code>rectData[i]</code>.</p>
+
+ <p>Chaque <code>RangeData</code> contient les propriétés suivantes :</p>
+
+ <dl class="reference-values">
+  <dt><code>framePos</code></dt>
+  <dd>L'index de l'image contenant la correspondance. 0 correspond à une fenêtre parente. Notez que l'ordre des objets dans un tableau  <code>rangeData</code> s'alignera séquentiellement avec l'ordre des index d'images : par exemple, <code>framePos</code> pour la première séquence d'objets <code>rangeData</code> sera 0, <code>framePos</code> pour la séquence suivante sera 1, et ainsi de suite.</dd>
+  <dt><code>startTextNodePos</code></dt>
+  <dd>La position ordinale du noeud de texte dans lequel la correspondance a démarrée.</dd>
+  <dt><code>endTextNodePos</code></dt>
+  <dd>La position ordinale du noeud de texte dans lequel la correspondance s'est terminée.</dd>
+  <dt><code>startOffset</code></dt>
+  <dd>La position de la chaîne de caractères ordinale du début du mot correspondant dans le noeud texte de début.</dd>
+  <dt><code>endOffset</code></dt>
+  <dd>La position de la chaîne de caractères ordinale de la fin du mot trouvé dans le nœud de texte final.</dd>
+ </dl>
+ </dd>
+ <dt><code>rectData</code>{{optional_inline}}</dt>
+ <dd>
+ <p><code>array</code>. Si <code>includeRectData</code> a été donné dans les paramètres des <code>options</code>, cette propriété sera incluse. C'est un tableau d'objets <code>RectData</code> . Il contient des rectangles clients pour tout le texte correspondant à la recherche, par rapport à la partie supérieure gauche de la fenêtre. Les extensions peuvent l'utiliser pour fournir une mise en évidence personnalisée les résultats..</p>
+
+ <p>Chaque objet <code>RectData</code> contient des données rectangle pour une seule correspondance. Il a deux propriétés :</p>
+
+ <dl class="reference-values">
+  <dt><code>rectsAndTexts</code></dt>
+  <dd>Un objet contenant deux propriétés, les deux tableaux :
+  <ul>
+   <li><code>rectList</code>: un tableau d'objets ayant chacun quatre propriétés entières : <code>top</code>, <code>left</code>, <code>bottom</code>, <code>right</code>. Ceux-ci décrivent un rectangle par rapport à la partie supérieure gauche de la fenêtre.</li>
+   <li><code>textList</code>:  un tableau de chaînes, correspondant au tableau  <code>rectList</code>. L'entrée de <code>textList[i]</code> contient la partie du match délimitée par le rectangle de <code>rectList[i]</code>.</li>
+  </ul>
+
+  <p>Par exemple, considérons une partie d'une page Web qui ressemble à ceci :</p>
+
+  <p><img alt="" src="https://mdn.mozillademos.org/files/15582/rects-1.png" style="display: block; height: 227px; margin-left: auto; margin-right: auto; width: 488px;">Si vous recherchez "You may", la comparaison doit être décrit par deux rectangles :</p>
+
+  <p><img alt="" src="https://mdn.mozillademos.org/files/15583/rects-2.png" style="display: block; height: 227px; margin-left: auto; margin-right: auto; width: 488px;">Dans le cas, dans le <code>RectData</code> qui décrit cette correspondance, <code>rectsAndTexts.rectList</code> et <code>rectsAndTexts.textList</code> auront chacun 2 éléments.</p>
+
+  <ul>
+   <li><code>textList[0]</code> contiendra "You ", et <code>rectList[0]</code> contiendra son rectangle de délimitation.</li>
+   <li><code>textList[1]</code> contiendra "may", et <code>rectList[1]</code> contiendra son rectangle de délimitation.</li>
+  </ul>
+  </dd>
+  <dt><code>text</code></dt>
+  <dd>Le texte complet de comparaison, "You may" dans l'exemple ci-dessus.</dd>
+ </dl>
+ </dd>
+</dl>
+
+<h2 id="Compatibilité_du_navigateur">Compatibilité du navigateur</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("webextensions.api.find.find", 10)}}</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Exemples_basics">Exemples basics</h3>
+
+<p>Recherchez "banana" dans l'onglet actif, log le nombre de correspondances et mettez-les en surbrillance :</p>
+
+<pre class="brush: js">function found(results) {
+  console.log(`There were: ${results.count} matches.`);
+  if (results.count &gt; 0) {
+    browser.find.highlightResults();
+  }
+}
+
+browser.find.find("banana").then(found);</pre>
+
+<p>Rechercher "banana" dans tous les onglets (notez que cela nécessite la  <a href="/fr/Add-ons/WebExtensions/manifest.json/permissions">permission</a> "tabs", car il accède à <code>tab.url</code>):</p>
+
+<pre class="brush: js">async function findInAllTabs(allTabs) {
+  for (let tab of allTabs) {
+    let results = await browser.find.find("banana", {tabId: tab.id});
+    console.log(`In page "${tab.url}": ${results.count} matches.`)
+  }
+}
+
+browser.tabs.query({}).then(findInAllTabs);</pre>
+
+<h3 id="Utilisation_de_rangeData">Utilisation de rangeData</h3>
+
+<p>Dans cet exemple, l'extension utilise <code>rangeData</code> pour obtenir le contexte dans lequel la correspondance a été trouvée. Le contexte est le  <code>textContent</code> complet du noeud dans lequel la correspondance a été trouvée. Si la correspondance s'étend sur des noeuds, le contexte est la concaténation du <code>textContent</code> de tous les noeuds étendus.</p>
+
+<p>Notez que pour des raisons de simplicité, cet exemple ne gère pas les pages contenant des cadres. Pour cela, vous devez divisez <code>rangeData</code> en groupes, un par frame, et executer le script dans chaque image.</p>
+
+<p>Le script d'arrière plan :</p>
+
+<pre class="brush: js">// background.js
+
+async function getContexts(matches) {
+
+  // get the active tab ID
+  let activeTabArray = await browser.tabs.query({
+    active: true, currentWindow: true
+  });
+  let tabId = activeTabArray[0].id;
+
+  // execute the content script in the active tab
+  await browser.tabs.executeScript(tabId, {file: "get-context.js"});
+  // ask the content script to get the contexts for us
+  let contexts = await browser.tabs.sendMessage(tabId, {
+    ranges: matches.rangeData
+  });
+  for (let context of contexts) {
+    console.log(context);
+  }
+
+}
+
+browser.browserAction.onClicked.addListener((tab) =&gt; {
+  browser.find.find("example", {includeRangeData: true}).then(getContexts);
+});
+</pre>
+
+<p>Le script de contenu :</p>
+
+<pre class="brush: js">/**
+ * Get all the text nodes into a single array
+ */
+function getNodes() {
+  let walker = document.createTreeWalker(document, window.NodeFilter.SHOW_TEXT, null, false);
+  let nodes = [];
+  while(node = walker.nextNode()) {
+    nodes.push(node);
+  }
+
+  return nodes;
+}
+
+/**
+ * Gets all text nodes in the document, then for each match, return the
+ * complete text content of nodes that contained the match.
+ * If a match spanned more than one node, concatenate the textContent
+ * of each node.
+ */
+function getContexts(ranges) {
+
+  let contexts = [];
+  let nodes = getNodes();
+
+  for (let range of ranges) {
+    let context = nodes[range.startTextNodePos].textContent;
+    let pos = range.startTextNodePos;
+    while (pos &lt; range.endTextNodePos) {
+      pos++;
+      context += nodes[pos].textContent;
+    }
+    contexts.push(context);
+  }
+  return contexts;
+}
+
+browser.runtime.onMessage.addListener((message, sender, sendResponse) =&gt; {
+  sendResponse(getContexts(message.ranges));
+});
+</pre>
+
+<h3 id="Utiliser_rectData">Utiliser rectData</h3>
+
+<p>Dans cet exemple, l'extensions utilise <code>rectData</code> pour comparer "redact", en ajoutant des DIVs noires au dessus de leurs rectangles de délimitation :</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15584/redacted.png" style="display: block; height: 416px; margin-left: auto; margin-right: auto; width: 625px;">Notez qu'il y a plusieurs façons, c'est une mauvaise façon d'atteindre les pages.</p>
+
+<p>Le script d'arrière-plan :</p>
+
+<pre class="brush: js">// background.js
+
+async function redact(matches) {
+
+  // get the active tab ID
+  let activeTabArray = await browser.tabs.query({
+    active: true, currentWindow: true
+  });
+  let tabId = activeTabArray[0].id;
+
+  // execute the content script in the active tab
+  await browser.tabs.executeScript(tabId, {file: "redact.js"});
+  // ask the content script to redact matches for us
+  await browser.tabs.sendMessage(tabId, {rects: matches.rectData});
+}
+
+browser.browserAction.onClicked.addListener((tab) =&gt; {
+  browser.find.find("banana", {includeRectData: true}).then(redact);
+});
+</pre>
+
+<p>Le script de contenu :</p>
+
+<pre class="brush: js">// redact.js
+
+/**
+ * Add a black DIV where the rect is.
+ */
+function redactRect(rect) {
+  var redaction = document.createElement("div");
+  redaction.style.backgroundColor = "black";
+  redaction.style.position = "absolute";
+  redaction.style.top = `${rect.top}px`;
+  redaction.style.left = `${rect.left}px`;
+  redaction.style.width = `${rect.right-rect.left}px`;
+  redaction.style.height = `${rect.bottom-rect.top}px`;
+  document.body.appendChild(redaction);
+}
+
+/**
+ * Go through every rect, redacting them.
+ */
+function redactAll(rectData) {
+  for (match of rectData) {
+    for (rect of match.rectsAndTexts.rectList) {
+      redactRect(rect);
+    }
+  }
+}
+
+browser.runtime.onMessage.addListener((message) =&gt; {
+  redactAll(message.rects);
+});
+</pre>
+
+<p>{{WebExtExamples}}</p>
diff --git a/files/fr/mozilla/add-ons/webextensions/api/find/highlightresults/index.html b/files/fr/mozilla/add-ons/webextensions/api/find/highlightresults/index.html
new file mode 100644
index 0000000000..cf5ad19d07
--- /dev/null
+++ b/files/fr/mozilla/add-ons/webextensions/api/find/highlightresults/index.html
@@ -0,0 +1,53 @@
+---
+title: find.highlightResults()
+slug: Mozilla/Add-ons/WebExtensions/API/find/highlightResults
+tags:
+  - API
+  - Add-ons
+  - Extensions
+  - Method
+  - Reference
+  - WebExtensions
+  - find
+  - highlightResults
+translation_of: Mozilla/Add-ons/WebExtensions/API/find/highlightResults
+---
+<div>{{AddonSidebar()}}</div>
+
+<p>Souligne les résultats d'un précédent appel à {{WebExtAPIRef("find.find()")}}.</p>
+
+<p>Lorsqu'une extension appelle <code>find()</code>, les correspondances ne sont pas automatiquement mises en surbrillance, mais elles sont stockées par le navigateur. Appelez <code>highlightResults()</code> pour les mettre en surbrillance.</p>
+
+<p>Notez que les résultats stockés sont globaux pour toutes les extensions, par exemple, si l'extension appelle <code>find("apple")</code>, alors si l'extensions B appelle <code>find("banana")</code>, alors si l'extensions A appelle  <code>highlightResults()</code>, le résultat pour "banana" sera mis en évidence.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox brush:js">browser.find.highlightResults()
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<p>Aucun.</p>
+
+<h3 id="Valeur_retournée">Valeur retournée</h3>
+
+<p>Aucune.</p>
+
+<h2 id="Compatibilité_du_navigateur">Compatibilité du navigateur</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("webextensions.api.find.highlightResults", 10)}}</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Recherchez "banana" dans l'onglet actif, notez le nombre de correspondances et mettez-les en surbrillance :</p>
+
+<pre class="brush: js">function found(results) {
+  console.log(`There were: ${results.count} matches.`);
+  if (results.count &gt; 0) {
+    browser.find.highlightResults();
+  }
+}
+
+browser.find.find("banana").then(found);</pre>
diff --git a/files/fr/mozilla/add-ons/webextensions/api/find/index.html b/files/fr/mozilla/add-ons/webextensions/api/find/index.html
new file mode 100644
index 0000000000..98ce0ae4f0
--- /dev/null
+++ b/files/fr/mozilla/add-ons/webextensions/api/find/index.html
@@ -0,0 +1,32 @@
+---
+title: find
+slug: Mozilla/Add-ons/WebExtensions/API/find
+tags:
+  - API
+  - Add-ons
+  - Extensions
+  - Reference
+  - WebExtensions
+  - find
+translation_of: Mozilla/Add-ons/WebExtensions/API/find
+---
+<div>{{AddonSidebar}}</div>
+
+<p>Trouve un texte dans une page web, et met en évidence les correspondances.</p>
+
+<p>Pour utiliser cette API, vous devez disposez de la <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions">permission</a> "find".</p>
+
+<h2 id="Fonctions">Fonctions</h2>
+
+<dl>
+ <dt>{{WebExtAPIRef("find.find()")}}</dt>
+ <dd>Trouver du texte dans une page web.</dd>
+ <dt>{{WebExtAPIRef("find.highlightResults()")}}</dt>
+ <dd>Mettez en surbrillance le dernier jeu de correspondance trouvé.</dd>
+ <dt>{{WebExtAPIRef("find.removeHighlighting()")}}</dt>
+ <dd>Supprimez toute mise en évidence.</dd>
+</dl>
+
+<h2 id="Compatibilité_du_navigateur">Compatibilité du navigateur</h2>
+
+<p>{{Compat("webextensions.api.find", 1, 1)}} {{WebExtExamples("h2")}}</p>
diff --git a/files/fr/mozilla/add-ons/webextensions/api/find/removehighlighting/index.html b/files/fr/mozilla/add-ons/webextensions/api/find/removehighlighting/index.html
new file mode 100644
index 0000000000..5e51362135
--- /dev/null
+++ b/files/fr/mozilla/add-ons/webextensions/api/find/removehighlighting/index.html
@@ -0,0 +1,41 @@
+---
+title: find.removeHighlighting()
+slug: Mozilla/Add-ons/WebExtensions/API/find/removeHighlighting
+tags:
+  - API
+  - Add-ons
+  - Extensions
+  - Method
+  - Reference
+  - WebExtensions
+  - find
+  - removeHighlighting
+translation_of: Mozilla/Add-ons/WebExtensions/API/find/removeHighlighting
+---
+<div>{{AddonSidebar()}}</div>
+
+<p>Supprimer toute mise en évidence d'une recherche précédente qui a été appliquée par un appel précédent à {{WebExtAPIRef("highlightResults()")}}, ou par l'interface utilisateur native du navigateur.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox brush:js">browser.find.removeHighlighting()
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<p>Aucun</p>
+
+<h3 id="Valeur_retournée">Valeur retournée</h3>
+
+<p>Aucune.</p>
+
+<h2 id="Compatibilité_du_navigateur">Compatibilité du navigateur</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("webextensions.api.find.removeHighlighting", 10)}}</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">browser.find.removeHighlighting();
+</pre>