diff options
Diffstat (limited to 'files/fr/mozilla/add-ons/sdk')
19 files changed, 0 insertions, 4948 deletions
diff --git a/files/fr/mozilla/add-ons/sdk/high-level_apis/base64/index.html b/files/fr/mozilla/add-ons/sdk/high-level_apis/base64/index.html deleted file mode 100644 index f4d71166d9..0000000000 --- a/files/fr/mozilla/add-ons/sdk/high-level_apis/base64/index.html +++ /dev/null @@ -1,111 +0,0 @@ ---- -title: base64 -slug: Mozilla/Add-ons/SDK/High-Level_APIs/base64 -translation_of: Archive/Add-ons/Add-on_SDK/High-Level_APIs/base64 ---- -<p> <span id="result_box" lang="fr"><span class="hps">Le codage des données</span> <span class="hps">et le décodage</span> <span class="hps">en utilisant des algorithmes</span> <span class="hps">Base64</span><span>.</span><br> - <br> - <span class="hps">var</span> <span class="hps">base64</span> <span class="hps">=</span> <span class="atn hps">require (</span><span class="atn hps">"</span><span>sdk</span> <span class="hps">/</span> <span class="hps">base64</span><span>"</span><span>)</span><span>;</span><br> - <br> - <span class="hps">var</span> <span class="hps">encodedData</span> <span class="hps">=</span> <span class="hps">base64.encode</span> <span class="atn hps">(</span><span class="atn hps">"</span><span>Bonjour,</span> <span class="hps">monde»</span><span>)</span><span>;</span><br> - <span class="hps">var</span> <span class="hps">decodedData</span> <span class="hps">=</span> <span class="hps">base64.decode</span> <span class="atn hps">(</span><span>encodedData</span><span>)</span><span>;</span></span></p> - -<div class="almost_half_cell" id="gt-res-content"> -<div dir="ltr" style="zoom: 1;"><span id="result_box" lang="fr"><span class="hps">Les fonctions</span><br> -<span class="atn hps">encode (</span><span>données</span><span>,</span> <span class="hps">charset)</span><br> -<br> -<span class="hps">Crée une</span> <span class="hps">chaîne de caractères ASCII</span> <span class="hps">de base</span> <span class="hps">64</span> <span class="hps">codé</span> <span class="hps">à partir d'une</span> <span class="hps">chaîne de données</span> <span class="hps">binaires</span><span>.</span><br> -<span class="hps">Paramètres</span><br> -<br> -<span class="hps">données</span><span>: string</span><br> -<span class="hps">Les données</span> <span class="hps">pour coder</span><br> -<br> -<span class="hps">charset</span><span>: string</span><br> -<span class="hps">Le</span> <span class="hps">charset</span> <span class="hps">de la chaîne à</span> <span class="hps">coder</span> <span class="hps">(en option</span><span>)</span><span>.</span> <span class="hps">La seule valeur</span> <span class="hps">acceptée est</span> <span class="atn hps">"</span><span>utf-8"</span><span>.</span> <span class="hps">Pour</span> <span class="hps">coder et décoder</span> <span class="hps">les chaînes Unicode</span><span>,</span> <span class="hps">le paramètre charset</span> <span class="hps">doit être réglé</span><span>:</span><br> -<br> -<span class="hps">var</span> <span class="hps">base64</span> <span class="hps">=</span> <span class="atn hps">require (</span><span class="atn hps">"</span><span>sdk</span> <span class="hps">/</span> <span class="hps">base64</span><span>"</span><span>)</span><span>;</span><br> -<br> -<span class="hps">var</span> <span class="hps">encodedData</span> <span class="hps">=</span> <span class="hps">base64.encode</span> <span class="atn hps">(</span><span>UnicodeString</span><span>,</span> <span class="atn hps">"</span><span>utf-8"</span><span>)</span><span>;</span><br> -<br> -<span class="hps">résultats</span><br> -<br> -<span class="hps">string:</span> <span class="hps">La chaîne</span> <span class="hps">codée</span><br> -<span class="atn hps">decode (</span><span>données</span><span>,</span> <span class="hps">charset)</span><br> -<br> -<span class="hps">Décode</span> <span class="hps">une chaîne de données</span> <span class="hps">qui a été codé</span> <span class="hps">en utilisant la base</span> <span class="hps">64</span> <span class="hps">codage.</span><br> -<span class="hps">Paramètres</span><br> -<br> -<span class="hps">données</span><span>: string</span><br> -<span class="hps">Les données codées</span><br> -<br> -<span class="hps">charset</span><span>: string</span><br> -<span class="hps">Le</span> <span class="hps">charset</span> <span class="hps">de la chaîne à</span> <span class="hps">coder</span> <span class="hps">(en option</span><span>)</span><span>.</span> <span class="hps">La seule valeur</span> <span class="hps">acceptée est</span> <span class="atn hps">"</span><span>utf-8"</span><span>.</span> <span class="hps">Pour</span> <span class="hps">coder et décoder</span> <span class="hps">les chaînes Unicode</span><span>,</span> <span class="hps">le paramètre charset</span> <span class="hps">doit être réglé</span><span>:</span><br> -<br> -<span class="hps">var</span> <span class="hps">base64</span> <span class="hps">=</span> <span class="atn hps">require (</span><span class="atn hps">"</span><span>sdk</span> <span class="hps">/</span> <span class="hps">base64</span><span>"</span><span>)</span><span>;</span><br> -<br> -<span class="hps">var</span> <span class="hps">decodedData</span> <span class="hps">=</span> <span class="hps">base64.decode</span> <span class="atn hps">(</span><span>encodedData</span><span>,</span> <span class="atn hps">"</span><span>utf-8"</span><span>)</span><span>;</span><br> -<br> -<span class="hps">résultats</span><br> -<br> -<span class="hps">string:</span> <span class="hps">La chaîne</span> <span class="hps">décodée</span> <span class="atn hps">(</span><span>encodedData</span><span>)</span><span>;</span></span></div> -</div> - -<div class="note"> -<p>{{AddonSidebar}}</p> -</div> - -<div class="note"> -<p>Unstable</p> -</div> - -<p>Data encoding and decoding using Base64 algorithms.</p> - -<pre class="brush: js">var base64 = require("sdk/base64"); - -var encodedData = base64.encode("Hello, World"); -var decodedData = base64.decode(encodedData);</pre> - -<h2 id="Globals">Globals</h2> - -<h3 id="Functions">Functions</h3> - -<h4 class="addon-sdk-api-name" id="encode(data_charset)"><code>encode(data, charset)</code></h4> - -<p>Creates a base-64 encoded ASCII string from a string of binary data.</p> - -<h5 id="Parameters">Parameters</h5> - -<p><strong>data : string</strong><br> - The data to encode</p> - -<p><strong>charset : string</strong><br> - The charset of the string to encode (optional). The only accepted value is <code>"utf-8"</code>. In order to encode and decode Unicode strings, the charset parameter needs to be set:</p> - -<pre class="brush: js">var base64 = require("sdk/base64"); - -var encodedData = base64.encode(unicodeString, "utf-8"); -</pre> - -<h5 id="Returns">Returns</h5> - -<p><strong>string</strong> : The encoded string</p> - -<h4 class="addon-sdk-api-name" id="decode(data_charset)"><code>decode(data, charset)</code></h4> - -<p>Decodes a string of data which has been encoded using base-64 encoding.</p> - -<h5 id="Parameters_2">Parameters</h5> - -<p><strong>data : string</strong><br> - The encoded data</p> - -<p><strong>charset : string</strong><br> - The charset of the string to encode (optional). The only accepted value is <code>"utf-8"</code>. In order to encode and decode Unicode strings, the charset parameter needs to be set:</p> - -<pre class="brush: js">var base64 = require("sdk/base64"); - -var decodedData = base64.decode(encodedData, "utf-8");</pre> - -<h5 id="Returns_2">Returns</h5> - -<p><strong>string</strong> : The decoded string</p> diff --git a/files/fr/mozilla/add-ons/sdk/high-level_apis/context-menu/index.html b/files/fr/mozilla/add-ons/sdk/high-level_apis/context-menu/index.html deleted file mode 100644 index 9af486cc64..0000000000 --- a/files/fr/mozilla/add-ons/sdk/high-level_apis/context-menu/index.html +++ /dev/null @@ -1,833 +0,0 @@ ---- -title: context-menu -slug: Mozilla/Add-ons/SDK/High-Level_APIs/context-menu -translation_of: Archive/Add-ons/Add-on_SDK/High-Level_APIs/context-menu ---- -<p>{{AddonSidebar}}</p> - -<div class="note"> -<p>Stable</p> -</div> - -<p><span class="seoSummary">Ajouez des éléments, sous-menus et des séparateurs au menu contextuel.</span></p> - -<h2 id="Usage">Usage</h2> - -<p>Instead of manually adding items when particular contexts occur and then removing them when those contexts go away, you <em>bind</em> items to contexts, and the adding and removing is automatically handled for you. Items are bound to contexts in much the same way that event listeners are bound to events. When the user invokes the context menu, all of the items bound to the current context are automatically added to the menu. If no items are bound, none are added. Likewise, any items that were previously in the menu but are not bound to the current context are automatically removed from the menu. You never need to manually remove your items from the menu unless you want them to never appear again.</p> - -<p>For example, if your add-on needs to add a context menu item whenever the user visits a certain page, don't create the item when that page loads, and don't remove it when the page unloads. Rather, create your item only once and supply a context that matches the target URL.</p> - -<p>Context menu items are displayed in the order created or in the case of sub menus the order added to the sub menu. Menu items for each add-on will be grouped together automatically. If the total number of menu items in the main context menu from all add-ons exceeds a certain number (normally 10 but configurable with the <code>extensions.addon-sdk.context-menu.overflowThreshold</code> preference) all of the menu items will instead appear in an overflow menu to avoid making the context menu too large.</p> - -<h3 id="Specifying_contexts">Specifying contexts</h3> - -<p>As its name implies, the context menu should be reserved for the occurrence of specific contexts. Contexts can be related to page content or the page itself, but they should never be external to the page.</p> - -<p>For example, a good use of the menu would be to show an "Edit Image" item when the user right-clicks an image in the page. A bad use would be to show a submenu that listed all the user's tabs, since tabs aren't related to the page or the node the user clicked to open the menu.</p> - -<h4 id="The_page_context">The page context</h4> - -<p>First of all, you may not need to specify a context at all. When a top-level item does not specify a context, the page context applies. An item that is in a submenu is visible unless you specify a context.</p> - -<p>The <em>page context</em> occurs when the user invokes the context menu on a non-interactive portion of the page. Try right-clicking a blank spot in this page, or on text. Make sure that no text is selected. The menu that appears should contain the items "Back", "Forward", "Reload", "Stop", and so on. This is the page context.</p> - -<p>The page context is appropriate when your item acts on the page as a whole. It does not occur when the user invokes the context menu on a link, image, or other non-text node, or while a selection exists.</p> - -<h4 id="Declarative_contexts">Declarative contexts</h4> - -<p>You can specify some simple, declarative contexts when you create a menu item by setting the <code>context</code> property of the options object passed to its constructor, like this:</p> - -<pre class="brush: js">var cm = require("sdk/context-menu"); -cm.Item({ - label: "My Menu Item", - context: cm.URLContext("*.mozilla.org") -});</pre> - -<table class="standard-table"> - <tbody> - <tr> - <th>Constructor</th> - <th>Description</th> - </tr> - <tr> - <td><code>PageContext() </code></td> - <td>The page context.</td> - </tr> - <tr> - <td><code>SelectionContext() </code></td> - <td>This context occurs when the menu is invoked on a page in which the user has made a selection.</td> - </tr> - <tr> - <td><code>SelectorContext(selector) </code></td> - <td>This context occurs when the menu is invoked on a node that either matches <code>selector</code>, a CSS selector, or has an ancestor that matches. <code>selector</code> may include multiple selectors separated by commas, e.g., <code>"a[href], img"</code>.</td> - </tr> - <tr> - <td><code>URLContext(matchPattern) </code></td> - <td>This context occurs when the menu is invoked on pages with particular URLs. <code>matchPattern</code> is a match pattern string or an array of match pattern strings. When <code>matchPattern</code> is an array, the context occurs when the menu is invoked on a page whose URL matches any of the patterns. These are the same match pattern strings that you use with the <a href="/en-US/Add-ons/SDK/High-Level_APIs/page-mod"><code>page-mod</code></a> <code>include</code> property. <a href="/en-US/Add-ons/SDK/Low-Level_APIs/util_match-pattern">Read more about patterns</a>.</td> - </tr> - <tr> - <td><code>PredicateContext(predicateFunction)</code></td> - <td><code>predicateFunction</code> is called when the menu is invoked, and the context occurs when the function returns a true value. The function is passed an object with properties describing the menu invocaton context.</td> - </tr> - <tr> - <td>array</td> - <td>An array of any of the other types. This context occurs when all contexts in the array occur.</td> - </tr> - </tbody> -</table> - -<p>Menu items also have a <code>context</code> property that can be used to add and remove declarative contexts after construction. For example:</p> - -<pre class="brush: js">var context = require("sdk/context-menu").SelectorContext("img"); -myMenuItem.context.add(context); -myMenuItem.context.remove(context);</pre> - -<p>When a menu item is bound to more than one context, it appears in the menu when all of those contexts occur.</p> - -<h3 id="In_content_scripts">In content scripts</h3> - -<p>The declarative contexts are handy but not very powerful. For instance, you might want your menu item to appear for any page that has at least one image, but declarative contexts won't help you there.</p> - -<p>When you need more control over the context in which your menu items are shown, you can use content scripts. Like other APIs in the SDK, the <code>context-menu</code> API uses <a href="/en-US/Add-ons/SDK/Guides/Content_Scripts">content scripts</a> to let your add-on interact with pages in the browser. Each menu item you create in the top-level context menu can have a content script.</p> - -<p>A special event named <code>"context"</code> is emitted in your content scripts whenever the context menu is about to be shown. If you register a listener function for this event and it returns true, the menu item associated with the listener's content script is shown in the menu.</p> - -<p>For example, this item appears whenever the context menu is invoked on a page that contains at least one image:</p> - -<pre class="brush: js">require("sdk/context-menu").Item({ - label: "This Page Has Images", - contentScript: 'self.on("context", function (node) {' + - ' return !!document.querySelector("img");' + - '});' -});</pre> - -<p>Note that the listener function has a parameter called <code>node</code>. This is the node in the page that the user context-clicked to invoke the menu. You can use it to determine whether your item should be shown.</p> - -<p>You can both specify declarative contexts and listen for contexts in a content script. Your context listener is called even if any declarative contexts are not current (since Firefox 36).</p> - -<p>If you combine <code>SelectorContext</code> and the <code>"context"</code> event, be aware that the <code>node</code> argument passed to the <code>"context"</code> event will not always match the type specified in <code>SelectorContext</code>.</p> - -<p><code>SelectorContext</code> will match if the menu is invoked on the node specified <em>or any descendant of that node</em>, but the <code>"context"</code> event handler is passed <em>the actual node</em> on which the menu was invoked. The example above works because <code><IMG></code> elements can't contain other elements, but in the example below, <code>node.nodeName</code> is not guaranteed to be "P" - for example, it won't be "P" if the user context-clicked a link inside a paragraph:</p> - -<pre class="brush: js">var cm = require("sdk/context-menu"); -cm.Item({ - label: "A Paragraph", - context: cm.SelectorContext("p"), - contentScript: 'self.on("context", function (node) {' + - ' console.log(node.nodeName);' + - ' return true;' + - '});' -});</pre> - -<p>The content script is executed for every page that a context menu is shown for. It will be executed the first time it is needed (i.e. when the context menu is first shown and all of the declarative contexts for your item are current) and then remains active until you destroy your context menu item or the page is unloaded.</p> - -<h3 id="Handling_menu_item_clicks">Handling menu item clicks</h3> - -<p>In addition to using content scripts to listen for the <code>"context"</code> event as described above, you can use content scripts to handle item clicks. When the user clicks your menu item, an event named <code>"click"</code> is emitted in the item's content script.</p> - -<p>Therefore, to handle an item click, listen for the <code>"click"</code> event in that item's content script like so:</p> - -<pre class="brush: js">require("sdk/context-menu").Item({ - label: "My Item", - contentScript: 'self.on("click", function (node, data) {' + - ' console.log("Item clicked!");' + - '});' -});</pre> - -<p>Note that the listener function has parameters called <code>node</code> and <code>data</code>.</p> - -<h4 id="The_node_argument">The "node" argument</h4> - -<p><code>node</code> is the node that the user context-clicked to invoke the menu.</p> - -<ul> - <li>If you did not use <code>SelectorContext</code> to decide whether to show the menu item, then this is the actual node clicked.</li> - <li>If you did use <code>SelectorContext</code>, then this is the node that matched your selector.</li> -</ul> - -<p>For example, suppose your add-on looks like this:</p> - -<pre class="brush: js">var script = "self.on('click', function (node, data) {" + - " console.log('clicked: ' + node.nodeName);" + - "});"; - -var cm = require("sdk/context-menu"); - -cm.Item({ - label: "body context", - context: cm.SelectorContext("body"), - contentScript: script -});</pre> - -<p>This add-on creates a context-menu item that uses <code>SelectorContext</code> to display the item whenever the context menu is activated on any descendant of the <code><BODY></code> element. When clicked, the item just logs the <a href="https://developer.mozilla.org/en-US/docs/DOM/Node.nodeName"><code>nodeName</code></a> property for the node passed to the click handler.</p> - -<p>If you run this add-on you'll see that it always logs "BODY", even if you click on a paragraph element inside the page:</p> - -<pre>info: contextmenu-example: clicked: BODY</pre> - -<p>By contrast, this add-on uses the <code>PageContext</code>:</p> - -<pre class="brush: js">var script = "self.on('click', function (node, data) {" + - " console.log('clicked: ' + node.nodeName);" + - "});"; - -var cm = require("sdk/context-menu"); - -cm.Item({ - label: "body context", - context: cm.PageContext(), - contentScript: script -});</pre> - -<p>It will log the name of the actual node clicked:</p> - -<pre>info: contextmenu-example: clicked: P</pre> - -<h4 id="The_data_Argument">The "data" Argument</h4> - -<p><code>data</code> is the <code>data</code> property of the menu item that was clicked. Note that when you have a hierarchy of menu items the click event will be sent to the content script of the item clicked and all ancestors so be sure to verify that the <code>data</code> value passed matches the item you expect. You can use this to simplify click handling by providing just a single click listener on a <code>Menu</code> that reacts to clicks for any child items.:</p> - -<pre class="brush: js">var cm = require("sdk/context-menu"); -cm.Menu({ - label: "My Menu", - contentScript: 'self.on("click", function (node, data) {' + - ' console.log("You clicked " + data);' + - '});', - items: [ - cm.Item({ label: "Item 1", data: "item1" }), - cm.Item({ label: "Item 2", data: "item2" }), - cm.Item({ label: "Item 3", data: "item3" }) - ] -}); -</pre> - -<h4 id="Communicating_With_the_Add-on">Communicating With the Add-on</h4> - -<p>Often you will need to collect some kind of information in the click listener and perform an action unrelated to content. To communicate to the menu item associated with the content script, the content script can call the <code>postMessage</code> function attached to the global <code>self</code> object, passing it some JSON-able data. The menu item's <code>"message"</code> event listener will be called with that data.</p> - -<pre class="brush: js">var cm = require("sdk/context-menu"); -cm.Item({ - label: "Edit Image", - context: cm.SelectorContext("img"), - contentScript: 'self.on("click", function (node, data) {' + - ' self.postMessage(node.src);' + - '});', - onMessage: function (imgSrc) { - openImageEditor(imgSrc); - } -});</pre> - -<h3 id="Updating_a_menu_item's_label">Updating a menu item's label</h3> - -<p>Each menu item must be created with a label, but you can change its label later using a couple of methods.</p> - -<p>The simplest method is to set the menu item's <code>label</code> property. This example updates the item's label based on the number of times it's been clicked:</p> - -<pre class="brush: js">var numClicks = 0; -var myItem = require("sdk/context-menu").Item({ - label: "Click Me: " + numClicks, - contentScript: 'self.on("click", self.postMessage);', - onMessage: function () { - numClicks++; - this.label = "Click Me: " + numClicks; - // Setting myItem.label is equivalent. - } -});</pre> - -<p>Sometimes you might want to update the label based on the context. For instance, if your item performs a search with the user's selected text, it would be nice to display the text in the item to provide feedback to the user. In these cases you can use the second method. Recall that your content scripts can listen for the <code>"context"</code> event and if your listeners return true, the items associated with the content scripts are shown in the menu. In addition to returning true, your <code>"context"</code> listeners can also return strings. When a <code>"context"</code> listener returns a string, it becomes the item's new label.</p> - -<p>This item implements the aforementioned search example:</p> - -<pre class="brush: js">var cm = require("sdk/context-menu"); -cm.Item({ - label: "Search Google", - context: cm.SelectionContext(), - contentScript: 'self.on("context", function () {' + - ' var text = window.getSelection().toString();' + - ' if (text.length > 20)' + - ' text = text.substr(0, 20) + "...";' + - ' return "Search Google for " + text;' + - '});' -});</pre> - -<p>The <code>"context"</code> listener gets the window's current selection, truncating it if it's too long, and includes it in the returned string. When the item is shown, its label will be "Search Google for <code>text</code>", where <code>text</code> is the truncated selection.</p> - -<p>You can also get the selected text using the High Level <code><a href="/en-US/Add-ons/SDK/High-Level_APIs/selection">selection</a></code> API.</p> - -<pre class="brush: js">var selection = require("sdk/selection");</pre> - -<p>and within the contentScript, reference the selected text as <code>selection.text</code></p> - -<h3 id="Private_windows">Private windows</h3> - -<p>If your add-on has not opted into private browsing, then any menus or menu items that you add will not appear in context menus belonging to private browser windows.</p> - -<p>To learn more about private windows, how to opt into private browsing, and how to support private browsing, refer to the <a href="/en-US/Add-ons/SDK/High-Level_APIs/private-browsing">documentation for the <code>private-browsing</code> module</a>.</p> - -<h3 id="More_examples">More examples</h3> - -<p>For conciseness, these examples create their content scripts as strings and use the <code>contentScript</code> property. In your own add-on, you will probably want to create your content scripts in separate files and pass their URLs using the <code>contentScriptFile</code> property. See <a href="/en-US/Add-ons/SDK/Guides/Content_Scripts">Working with Content Scripts</a> for more information.</p> - -<div class="warning"> -<p><strong>Warning:</strong> Unless your content script is extremely simple and consists only of a static string, don't use <code>contentScript</code>: if you do, you may have problems getting your add-on approved on AMO.</p> - -<p>Instead, keep the script in a separate file and load it using <code>contentScriptFile</code>. This makes your code easier to maintain, secure, debug and review.</p> -</div> - -<p>Show an "Edit Page Source" item when the user right-clicks a non-interactive part of the page:</p> - -<pre class="brush: js">require("sdk/context-menu").Item({ - label: "Edit Page Source", - contentScript: 'self.on("click", function (node, data) {' + - ' self.postMessage(document.URL);' + - '});', - onMessage: function (pageURL) { - editSource(pageURL); - } -});</pre> - -<p>Show an "Edit Image" item when the menu is invoked on an image:</p> - -<pre class="brush: js">var cm = require("sdk/context-menu"); -cm.Item({ - label: "Edit Image", - context: cm.SelectorContext("img"), - contentScript: 'self.on("click", function (node, data) {' + - ' self.postMessage(node.src);' + - '});', - onMessage: function (imgSrc) { - openImageEditor(imgSrc); - } -});</pre> - -<p>Show an "Edit Mozilla Image" item when the menu is invoked on an image in a mozilla.org or mozilla.com page:</p> - -<pre class="brush: js">var cm = require("sdk/context-menu"); -cm.Item({ - label: "Edit Mozilla Image", - context: [ - cm.URLContext(["*.mozilla.org", "*.mozilla.com"]), - cm.SelectorContext("img") - ], - contentScript: 'self.on("click", function (node, data) {' + - ' self.postMessage(node.src);' + - '});', - onMessage: function (imgSrc) { - openImageEditor(imgSrc); - } -});</pre> - -<p>Show an "Edit Page Images" item when the page contains at least one image:</p> - -<pre class="brush: js">var cm = require("sdk/context-menu"); -cm.Item({ - label: "Edit Page Images", - // This ensures the item only appears during the page context. - context: cm.PageContext(), - contentScript: 'self.on("context", function (node) {' + - ' var pageHasImgs = !!document.querySelector("img");' + - ' return pageHasImgs;' + - '});' + - 'self.on("click", function (node, data) {' + - ' var imgs = document.querySelectorAll("img");' + - ' var imgSrcs = [];' + - ' for (var i = 0 ; i < imgs.length; i++)' + - ' imgSrcs.push(imgs[i].src);' + - ' self.postMessage(imgSrcs);' + - '});', - onMessage: function (imgSrcs) { - openImageEditor(imgSrcs); - } -});</pre> - -<p>Show a "Search With" menu when the user right-clicks an anchor that searches Google or Wikipedia with the text contained in the anchor:</p> - -<pre class="brush: js">var cm = require("sdk/context-menu"); -var googleItem = cm.Item({ - label: "Google", - data: "http://www.google.com/search?q=" -}); -var wikipediaItem = cm.Item({ - label: "Wikipedia", - data: "http://en.wikipedia.org/wiki/Special:Search?search=" -}); -var searchMenu = cm.Menu({ - label: "Search With", - context: cm.SelectorContext("a[href]"), - contentScript: 'self.on("click", function (node, data) {' + - ' var searchURL = data + node.textContent;' + - ' window.location.href = searchURL;' + - '});', - items: [googleItem, wikipediaItem] -});</pre> - -<p>To create sub-menus, one of the items in your main menu must be defined as a menu.</p> - -<pre class="brush: js">var cm = require("sdk/context-menu"); -var googleItem = cm.Item({ - label: "Google", - data: "http://www.google.com/search?q=" -}); -var wikipediaItem = cm.Item({ - label: "Wikipedia", - data: "http://en.wikipedia.org/wiki/Special:Search?search=" -}); -var bingItem = cm.Item({ - label: "Bing", - data: "http://www.bing.com/search?q=" -}); -var yahooItem = cm.Item({ - label: "Yahoo", - data: "https://search.yahoo.com/search?p=" -}); -var moreMenu = cm.Menu({ - label: "More Search", - items: [bingItem, yahooItem] -}); -var searchMenu = cm.Menu({ - label: "Search With", - context: cm.SelectorContext("a[href]"), - contentScript: 'self.on("click", function (node, data) {' + - ' var searchURL = data + node.textContent;' + - ' window.location.href = searchURL;' + - '});', - items: [googleItem, wikipediaItem, moreMenu] -});</pre> - -<p>If you need a <strong>tooltip</strong>:</p> - -<p><img alt="tooltip" src="https://github.com/vitaly-zdanevich/extension-firefox-yandex-translate/raw/master/screenshot-hover.png" style="height: 500px; width: 800px;"></p> - -<p>First you need a dummy menu item that will serve as a trigger and subsequently will add the tooltips to the actual menu items.</p> - -<p>It is easy to find out which menu items are constructed by the addon-sdk module because they have the class <code>addon-context-menu-item</code>. The difficult part it to identify those that belong to your extension.</p> - -<p>One way to achieve this it to utilize the <code>data</code> attribute of <code>Item</code> class constructor, which conveniently maps to the <code>value</code> attribute of the underlying xul element.</p> - -<p>So if <code>data</code> consists of unique prefix and the desired tooltip text, it is just a matter of kicking in the right moment.</p> - -<pre><code>const { getMostRecentBrowserWindow } = require("sdk/window/utils"); - -var cm = require("sdk/context-menu"); -var uuid = require('sdk/util/uuid').uuid(); -var uuidstr = uuid.number.substring(1,37); - -cm.Item({ - data: uuidstr+"This is a tooltip", - label: "Just a tigger, will never show up", - contentScript: 'self.on("context", function(){self.postMessage(); return false;})', - onMessage: function(){ - var cmitems = getMostRecentBrowserWindow().document.querySelectorAll(".addon-context-menu-item[value^='"+ uuidstr +"']"); - for(var i=0; i < cmitems.length; i++) - cmitems[i].tooltipText = cmitems[i].value.substring(36); - } -});</code></pre> - -<p> </p> - -<h2 id="Globals">Globals</h2> - -<h3 id="Constructors">Constructors</h3> - -<h4 class="addon-sdk-api-name" id="Item(options)"><code>Item(options)</code></h4> - -<p>Creates a labeled menu item that can perform an action when clicked.</p> - -<h5 id="Parameters">Parameters</h5> - -<p><strong>options : object</strong><br> - Required options:</p> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Name</th> - <th scope="col">Type</th> - <th scope="col"> </th> - </tr> - </thead> - <tbody> - <tr> - <td>label</td> - <td>string</td> - <td> - <p>The item's label. It must either be a string or an object that implements <code>toString()</code>.</p> - </td> - </tr> - </tbody> -</table> - -<p>Optional options:</p> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Name</th> - <th scope="col">Type</th> - <th scope="col"> </th> - </tr> - </thead> - <tbody> - <tr> - <td>image</td> - <td>string</td> - <td> - <p>The item's icon, a string URL. The URL can be remote, a reference to an image in the add-on's <code>data</code> directory, or a data URI.</p> - </td> - </tr> - <tr> - <td>data</td> - <td>string</td> - <td> - <p>An optional arbitrary value to associate with the item. It must be either a string or an object that implements <code>toString()</code>. It will be passed to click listeners.</p> - </td> - </tr> - <tr> - <td>accesskey</td> - <td>single-character string</td> - <td> - <div class="geckoVersionNote"> - <p>New in Firefox 35.</p> - </div> - - <p>Access key for the item. Pressing this key selects the item when the context menu is open.</p> - </td> - </tr> - <tr> - <td>context</td> - <td>value</td> - <td> - <p>If the item is contained in the top-level context menu, this declaratively specifies the context under which the item will appear; see Specifying Contexts above.</p> - </td> - </tr> - <tr> - <td>contentScript</td> - <td>string,array</td> - <td> - <p>If the item is contained in the top-level context menu, this is the content script or an array of content scripts that the item can use to interact with the page.</p> - </td> - </tr> - <tr> - <td>contentScriptFile</td> - <td>string,array</td> - <td> - <p>If the item is contained in the top-level context menu, this is the local file URL of the content script or an array of such URLs that the item can use to interact with the page.</p> - </td> - </tr> - <tr> - <td>onMessage</td> - <td>function</td> - <td> - <p>If the item is contained in the top-level context menu, this function will be called when the content script calls <code>self.postMessage</code>. It will be passed the data that was passed to <code>postMessage</code>.</p> - </td> - </tr> - </tbody> -</table> - -<h4 class="addon-sdk-api-name" id="Menu(options)"><code>Menu(options)</code></h4> - -<p>Creates a labeled menu item that expands into a submenu.</p> - -<h5 id="Parameters_2">Parameters</h5> - -<p><strong>options : object</strong><br> - Required options:</p> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Name</th> - <th scope="col">Type</th> - <th scope="col"> </th> - </tr> - </thead> - <tbody> - <tr> - <td>label</td> - <td>string</td> - <td> - <p>The item's label. It must either be a string or an object that implements <code>toString()</code>.</p> - </td> - </tr> - <tr> - <td>items</td> - <td>array</td> - <td> - <p>An array of menu items that the menu will contain. Each must be an <code>Item</code>, <code>Menu</code>, or <code>Separator</code>.</p> - </td> - </tr> - </tbody> -</table> - -<p>Optional options:</p> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Name</th> - <th scope="col">Type</th> - <th scope="col"> </th> - </tr> - </thead> - <tbody> - <tr> - <td>image</td> - <td>string</td> - <td> - <p>The menu's icon, a string URL. The URL can be remote, a reference to an image in the add-on's <code>data</code> directory, or a data URI.</p> - </td> - </tr> - <tr> - <td>context</td> - <td>value</td> - <td> - <p>If the menu is contained in the top-level context menu, this declaratively specifies the context under which the menu will appear; see Specifying Contexts above.</p> - </td> - </tr> - <tr> - <td>contentScript</td> - <td>string,array</td> - <td> - <p>If the menu is contained in the top-level context menu, this is the content script or an array of content scripts that the menu can use to interact with the page.</p> - </td> - </tr> - <tr> - <td>contentScriptFile</td> - <td>string,array</td> - <td> - <p>If the menu is contained in the top-level context menu, this is the local file URL of the content script or an array of such URLs that the menu can use to interact with the page.</p> - </td> - </tr> - <tr> - <td>onMessage</td> - <td>function</td> - <td> - <p>If the menu is contained in the top-level context menu, this function will be called when the content script calls <code>self.postMessage</code>. It will be passed the data that was passed to <code>postMessage</code>.</p> - </td> - </tr> - </tbody> -</table> - -<h4 class="addon-sdk-api-name" id="Separator()"><code>Separator()</code></h4> - -<p>Creates a menu separator.</p> - -<h4 class="addon-sdk-api-name" id="PageContext()"><code>PageContext()</code></h4> - -<p>Creates a page context. See Specifying Contexts above.</p> - -<h4 class="addon-sdk-api-name" id="SelectionContext()"><code>SelectionContext()</code></h4> - -<p>Creates a context that occurs when a page contains a selection. See Specifying Contexts above.</p> - -<h4 class="addon-sdk-api-name" id="SelectorContext(selector)"><code>SelectorContext(selector)</code></h4> - -<p>Creates a context that matches a given CSS selector. See Specifying Contexts above.</p> - -<h5 id="Parameters_3">Parameters</h5> - -<p><strong>selector : string</strong><br> - A CSS selector.</p> - -<h4 class="addon-sdk-api-name" id="URLContext(matchPattern)"><code>URLContext(matchPattern)</code></h4> - -<p>Creates a context that matches pages with particular URLs. See Specifying Contexts above.</p> - -<h5 id="Parameters_4">Parameters</h5> - -<p><strong>matchPattern : string,array</strong><br> - A <a href="/en-US/Add-ons/SDK/Low-Level_APIs/util_match-pattern">match pattern</a> string, regexp or an array of match pattern strings or regexps.</p> - -<h4 class="addon-sdk-api-name" id="PredicateContext(predicateFunction)"><code>PredicateContext(predicateFunction)</code></h4> - -<div class="geckoVersionNote"> -<p>New in Firefox 29</p> -</div> - -<p>Creates a context that occurs when predicateFunction returns a true value. See Specifying Contexts above.</p> - -<h5 id="Parameters_5">Parameters</h5> - -<p><strong>predicateFunction : function(context)</strong><br> - A function which will be called with an object argument that provide information about the invocation context. <code>context</code> object properties:</p> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Property</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>documentType</code></td> - <td>The MIME type of the document the menu was invoked in. E.g. <code>text/html</code> for HTML pages, <code>application/xhtml+xml</code> for XHTML, or <code>image/jpeg</code> if viewing an image directly.</td> - </tr> - <tr> - <td><code>documentURL</code></td> - <td>The URL of the document the menu was invoked in.</td> - </tr> - <tr> - <td><code>targetName</code></td> - <td>The name of the DOM element that the menu was invoked on, in lower-case.</td> - </tr> - <tr> - <td><code>targetID</code></td> - <td>The <code>id</code> attribute of the element that the menu was invoked on, or <code>null</code> if not set.</td> - </tr> - <tr> - <td><code>isEditable</code></td> - <td><code>true</code> if the menu was invoked in an editable element, and that element isn't disabled or read-only. This includes non-input elements with the <code>contenteditable</code> attribute set to <code>true</code>.</td> - </tr> - <tr> - <td><code>selectionText</code></td> - <td>The current selection as a text string, or <code>null</code>. If the menu was invoked in an input text box or area, this is the selection of that element, otherwise the selection in the contents of the window.</td> - </tr> - <tr> - <td><code>srcURL</code></td> - <td>The <code>src</code> URL of the element that the menu was invoked on, or <code>null</code> if it doesn't have one.</td> - </tr> - <tr> - <td><code>linkURL</code></td> - <td>The <code>href</code> URL of the element that the menu was invoked on, or <code>null</code> if it doesn't have one.</td> - </tr> - <tr> - <td><code>value</code></td> - <td>The current contents of a input text box or area if the menu was invoked in one, <code>null</code> otherwise.</td> - </tr> - </tbody> -</table> - -<h2 id="Item">Item</h2> - -<p>A labeled menu item that can perform an action when clicked.</p> - -<h3 id="Methods">Methods</h3> - -<h4 class="addon-sdk-api-name" id="destroy()"><code>destroy()</code></h4> - -<p>Permanently removes the item from its parent menu and frees its resources. The item must not be used afterward. If you need to remove the item from its parent menu but use it afterward, call <code>removeItem()</code> on the parent menu instead.</p> - -<h3 id="Properties">Properties</h3> - -<h4 class="addon-sdk-api-name" id="label"><code>label</code></h4> - -<p>The menu item's label. You can set this after creating the item to update its label later.</p> - -<h4 class="addon-sdk-api-name" id="image"><code>image</code></h4> - -<p>The item's icon, a string URL. The URL can be remote, a reference to an image in the add-on's <code>data</code> directory, or a data URI. You can set this after creating the item to update its image later. To remove the item's image, set it to <code>null</code>.</p> - -<h4 class="addon-sdk-api-name" id="data"><code>data</code></h4> - -<p>An optional arbitrary value to associate with the item. It must be either a string or an object that implements <code>toString()</code>. It will be passed to click listeners. You can set this after creating the item to update its data later.</p> - -<h4 class="addon-sdk-api-name" id="context"><code>context</code></h4> - -<p>A list of declarative contexts for which the menu item will appear in the context menu. Contexts can be added by calling <code>context.add()</code> and removed by called <code>context.remove()</code>.</p> - -<h4 class="addon-sdk-api-name" id="parentMenu"><code>parentMenu</code></h4> - -<p>The item's parent <code>Menu</code>, or <code>null</code> if the item is contained in the top-level context menu. This property is read-only. To add the item to a new menu, call that menu's <code>addItem()</code> method.</p> - -<h4 class="addon-sdk-api-name" id="contentScript"><code>contentScript</code></h4> - -<p>The content script or the array of content scripts associated with the menu item during creation.</p> - -<h4 class="addon-sdk-api-name" id="contentScriptFile"><code>contentScriptFile</code></h4> - -<p>The URL of a content script or the array of such URLs associated with the menu item during creation.</p> - -<h3 id="Events">Events</h3> - -<h4 class="addon-sdk-api-name" id="message"><code>message</code></h4> - -<p>If you listen to this event you can receive message events from content scripts associated with this menu item. When a content script posts a message using <code>self.postMessage()</code>, the message is delivered to the add-on code in the menu item's <code>message</code> event.</p> - -<h5 id="Arguments">Arguments</h5> - -<p><strong>value</strong> : Listeners are passed a single argument which is the message posted from the content script. The message can be any <a href="/en-US/Add-ons/SDK/Guides/Content_Scripts/using_port#JSON-Serializable_Values">JSON-serializable value</a>.</p> - -<h2 id="Menu">Menu</h2> - -<p>A labeled menu item that expands into a submenu.</p> - -<h3 id="Methods_2">Methods</h3> - -<h4 class="addon-sdk-api-name" id="addItem(item)"><code>addItem(item)</code></h4> - -<p>Appends a menu item to the end of the menu. If the item is already contained in another menu or in the top-level context menu, it's automatically removed first. If the item is already contained in this menu it will just be moved to the end of the menu.</p> - -<h5 id="Parameters_6">Parameters</h5> - -<p><strong>item : Item,Menu,Separator</strong><br> - The <code>Item</code>, <code>Menu</code>, or <code>Separator</code> to add to the menu.</p> - -<h4 class="addon-sdk-api-name" id="removeItem(item)"><code>removeItem(item)</code></h4> - -<p>Removes the given menu item from the menu. If the menu does not contain the item, this method does nothing.</p> - -<h5 id="Parameters_7">Parameters</h5> - -<p><strong>item : Item,Menu,Separator</strong><br> - The menu item to remove from the menu.</p> - -<h4 class="addon-sdk-api-name" id="destroy()_2"><code>destroy()</code></h4> - -<p>Permanently removes the menu from its parent menu and frees its resources. The menu must not be used afterward. If you need to remove the menu from its parent menu but use it afterward, call <code>removeItem()</code> on the parent menu instead.</p> - -<h3 id="Properties_2">Properties</h3> - -<h4 class="addon-sdk-api-name" id="label_2"><code>label</code></h4> - -<p>The menu's label. You can set this after creating the menu to update its label later.</p> - -<h4 class="addon-sdk-api-name" id="items"><code>items</code></h4> - -<p>An array containing the items in the menu. The array is read-only, meaning that modifications to it will not affect the menu. However, setting this property to a new array will replace all the items currently in the menu with the items in the new array.</p> - -<h4 class="addon-sdk-api-name" id="image_2"><code>image</code></h4> - -<p>The menu's icon, a string URL. The URL can be remote, a reference to an image in the add-on's <code>data</code> directory, or a data URI. You can set this after creating the menu to update its image later. To remove the menu's image, set it to <code>null</code>.</p> - -<h4 class="addon-sdk-api-name" id="context_2"><code>context</code></h4> - -<p>A list of declarative contexts for which the menu will appear in the context menu. Contexts can be added by calling <code>context.add()</code> and removed by called <code>context.remove()</code>.</p> - -<h4 class="addon-sdk-api-name" id="parentMenu_2"><code>parentMenu</code></h4> - -<p>The menu's parent <code>Menu</code>, or <code>null</code> if the menu is contained in the top-level context menu. This property is read-only. To add the menu to a new menu, call that menu's <code>addItem()</code> method.</p> - -<h4 class="addon-sdk-api-name" id="contentScript_2"><code>contentScript</code></h4> - -<p>The content script or the array of content scripts associated with the menu during creation.</p> - -<h4 class="addon-sdk-api-name" id="contentScriptFile_2"><code>contentScriptFile</code></h4> - -<p>The URL of a content script or the array of such URLs associated with the menu during creation.</p> - -<h3 id="Events_2">Events</h3> - -<h4 class="addon-sdk-api-name" id="message_2"><code>message</code></h4> - -<p>If you listen to this event you can receive message events from content scripts associated with this menu item. When a content script posts a message using <code>self.postMessage()</code>, the message is delivered to the add-on code in the menu item's <code>message</code> event.</p> - -<h5 id="Arguments_2">Arguments</h5> - -<p><strong>value</strong> : Listeners are passed a single argument which is the message posted from the content script. The message can be any <a href="/en-US/Add-ons/SDK/Guides/Content_Scripts/using_port#JSON-Serializable_Values">JSON-serializable value</a>.</p> - -<h2 id="Separator">Separator</h2> - -<p>A menu separator. Separators can be contained only in <code>Menu</code>s, not in the top-level context menu.</p> - -<h3 id="Methods_3">Methods</h3> - -<h4 class="addon-sdk-api-name" id="destroy()_3"><code>destroy()</code></h4> - -<p>Permanently removes the separator from its parent menu and frees its resources. The separator must not be used afterward. If you need to remove the separator from its parent menu but use it afterward, call <code>removeItem()</code> on the parent menu instead.</p> - -<h3 id="Properties_3">Properties</h3> - -<h4 class="addon-sdk-api-name" id="parentMenu_3"><code>parentMenu</code></h4> - -<p>The separator's parent <code>Menu</code>. This property is read-only. To add the separator to a new menu, call that menu's <code>addItem()</code> method.</p> diff --git a/files/fr/mozilla/add-ons/sdk/high-level_apis/index.html b/files/fr/mozilla/add-ons/sdk/high-level_apis/index.html deleted file mode 100644 index e78b5f5cb5..0000000000 --- a/files/fr/mozilla/add-ons/sdk/high-level_apis/index.html +++ /dev/null @@ -1,13 +0,0 @@ ---- -title: High-Level APIs -slug: Mozilla/Add-ons/SDK/High-Level_APIs -tags: - - Add-on SDK - - TopicStub -translation_of: Archive/Add-ons/Add-on_SDK/High-Level_APIs ---- -<p>{{AddonSidebar}}</p> - -<p>Les modules répertoriés sur cette page implémentent des API de haut niveau pour la création de modules complémentaires: création d'interfaces utilisateur, interaction avec le Web et interaction avec le navigateur.</p> - -<p>Sauf indication contraire explicite de la documentation, tous ces modules sont "Stables": nous éviterons d'y apporter des modifications incompatibles. {{ LandingPageListSubpages ("/en-US/Add-ons/SDK/High-Level_APIs", 5) }}</p> diff --git a/files/fr/mozilla/add-ons/sdk/high-level_apis/indexed-db/index.html b/files/fr/mozilla/add-ons/sdk/high-level_apis/indexed-db/index.html deleted file mode 100644 index 4a73e29e98..0000000000 --- a/files/fr/mozilla/add-ons/sdk/high-level_apis/indexed-db/index.html +++ /dev/null @@ -1,166 +0,0 @@ ---- -title: indexed-db -slug: Mozilla/Add-ons/SDK/High-Level_APIs/indexed-db -translation_of: Archive/Add-ons/Add-on_SDK/High-Level_APIs/indexed-db ---- -<p>{{AddonSidebar}}</p> - -<div class="note"> -<p>Expérimental</p> -</div> - -<p><span class="seoSummary">Expose l'<a href="https://developer.mozilla.org/fr/docs/IndexedDB" title="https://developer.mozilla.org/fr/docs/IndexedDB">API IndexedDB</a> pour les add-ons.</span></p> - -<h2 id="Utilisation">Utilisation</h2> - -<p>Les scripts en cours d'exécution dans les pages Web peuvent accéder à IndexedDB via <code>window</code>. Par exemple:</p> - -<pre class="brush: js">window.indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB || window.msIndexedDB; - -var request = window.indexedDB.open("MyDatabase"); -request.onerror = function(event) { - console.log("failure"); -}; -request.onsuccess = function(event) { - console.log("success"); -};</pre> - -<p>Parce que votre code add-on principale ne peut pas accéder au DOM, vous ne pouvez pas faire cela. Mais vous pouvez utiliser le module <code>indexed-db</code> pour y accéder:</p> - -<pre class="brush: js">var { indexedDB } = require('sdk/indexed-db'); - -var request = indexedDB.open('MyDatabase'); -request.onerror = function(event) { - console.log("failure"); -}; -request.onsuccess = function(event) { - console.log("success"); -};</pre> - -<p>La plupart des objets qui mettent en œuvre l'API IndexedDB, tels que <a href="https://developer.mozilla.org/fr/docs/IndexedDB/IDBTransaction" title="https://developer.mozilla.org/fr/docs/IndexedDB/IDBTransaction"> IDBTransaction </a>, <a href="https://developer.mozilla.org/fr/docs/IndexedDB/IDBOpenDBRequest" title="https://developer.mozilla.org/fr/docs/IndexedDB/IDBOpenDBRequest"> IDBOpenDBRequest </a>, et <a href="https://developer.mozilla.org/fr/docs/IndexedDB/IDBObjectStore" title="https://developer.mozilla.org/fr/docs/IndexedDB/IDBObjectStore"> IDBObjectStore </a>, sont accessibles à travers l'objet IndexedDB lui-même. < br></p> - -<p>L'API exposée par <code>indexed-db</code> est presque identique à l'API DOM IndexedDB, donc on n'a pas répété sa documentation ici, référer vous à la <a href="https://developer.mozilla.org/fr/docs/IndexedDB" title="https://developer.mozilla.org/fr/docs/IndexedDB">documentation de l'API IndexedDB</a> pour tous les détails.</p> - -<p>La base de données créé sera unique et privée pour l'add-on, et n'est pas liés à une base de données de site. Le module ne peut pas être utilisé pour interagir avec une base de données du site donné. Voir <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=779197" title="https://bugzilla.mozilla.org/show_bug.cgi?id=779197"> bug 778197 </a> et <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=786688" title="https://bugzilla.mozilla.org/show_bug.cgi?id=786688"> bug 786688 </a>.</p> - -<h3 id="Exemple">Exemple</h3> - -<div class="note"> -<p>Cet exemple utilise l'<a href="https://developer.mozilla.org/fr/Add-ons/SDK/Low-Level_APIs/ui_button_action" title="https://developer.mozilla.org/fr/Add-ons/SDK/Low-Level_APIs/ui_button_action">API bouton d'action </a>, qui est uniquement disponible à partir de Firefox 29 partir.</p> -</div> - -<p>Voici un add-on complet qui ajoute deux boutons pour le navigateur: le bouton "Ajouter" ajoute le titre de l'onglet en cours à une base de données, tandis que le bouton intitulé «Liste» répertorie tous les titres dans la base de données .</p> - -<p>L'add-on implémente les fonctions <code>open()</code>, <code>addItem()</code> et <code>getItems()</code> pour ouvrir la base de données, ajouter un nouvel élément à la base de données, et d'obtenir tous les éléments de la base de données.</p> - -<pre class="brush: js">var { indexedDB, IDBKeyRange } = require('sdk/indexed-db'); - -var database = {}; - -database.onerror = function(e) { - console.error(e.value) -} - -function open(version) { - var request = indexedDB.open("stuff", version); - - request.onupgradeneeded = function(e) { - var db = e.target.result; - e.target.transaction.onerror = database.onerror; - - if(db.objectStoreNames.contains("items")) { - db.deleteObjectStore("items"); - } - - var store = db.createObjectStore("items", - {keyPath: "time"}); - }; - - request.onsuccess = function(e) { - database.db = e.target.result; - }; - - request.onerror = database.onerror; -}; - -function addItem(name) { - var db = database.db; - var trans = db.transaction(["items"], "readwrite"); - var store = trans.objectStore("items"); - var time = new Date().getTime(); - var request = store.put({ - "name": name, - "time": time - }); - - request.onerror = database.onerror; -}; - -function getItems(callback) { - var cb = callback; - var db = database.db; - var trans = db.transaction(["items"], "readwrite"); - var store = trans.objectStore("items"); - var items = new Array(); - - trans.oncomplete = function() { - cb(items); - } - - var keyRange = IDBKeyRange.lowerBound(0); - var cursorRequest = store.openCursor(keyRange); - - cursorRequest.onsuccess = function(e) { - var result = e.target.result; - if(!!result == false) - return; - - items.push(result.value.name); - result.continue(); - }; - - cursorRequest.onerror = database.onerror; -}; - -function listItems(itemList) { - console.log(itemList); -} - -open("1"); - -var add = require("sdk/ui/button/action").ActionButton({ - id: "add", - label: "Add", - icon: "./add.png", - onClick: function() { - addItem(require("sdk/tabs").activeTab.title); - } -}); - -var list = require("sdk/ui/button/action").ActionButton({ - id: "list", - label: "List", - icon: "./list.png", - onClick: function() { - getItems(listItems); - } -}); -</pre> - -<p>Notez que pour exécuter cet add-on, vous aurez besoin de fournir des icônes nommées "add.png" et "list.png" dans le répertoire "data" de l'add-ons .</p> - -<h2 id="Globals">Globals</h2> - -<h3 id="Propriétés">Propriétés</h3> - -<h4 class="addon-sdk-api-name" id="indexedDB"><code>indexedDB</code></h4> - -<p>Permet de créer, ouvrir et supprimer des bases de données. Voir la <a href="https://developer.mozilla.org/fr/docs/IndexedDB/IDBFactory" title="https://developer.mozilla.org/fr/docs/IndexedDB/IDBFactory"> documentation IDBFactory</a>.</p> - -<h4 class="addon-sdk-api-name" id="IDBKeyRange"><code>IDBKeyRange</code></h4> - -<p>Définit une plage de clés. Voir la <a href="https://developer.mozilla.org/fr/docs/IndexedDB/IDBKeyRange" title="https://developer.mozilla.org/fr/docs/IndexedDB/IDBKeyRange"> documentation IDBKeyRange</a>.</p> - -<h4 class="addon-sdk-api-name" id="DOMException"><code>DOMException</code></h4> - -<p>Fournit des informations plus détaillées sur une exception. Voir la <a href="https://developer.mozilla.org/fr/docs/DOM/DOMException" title="https://developer.mozilla.org/fr/docs/DOM/DOMException"> documentation DOMException</a>.</p> diff --git a/files/fr/mozilla/add-ons/sdk/high-level_apis/simple-storage/index.html b/files/fr/mozilla/add-ons/sdk/high-level_apis/simple-storage/index.html deleted file mode 100644 index 2b35fc120b..0000000000 --- a/files/fr/mozilla/add-ons/sdk/high-level_apis/simple-storage/index.html +++ /dev/null @@ -1,170 +0,0 @@ ---- -title: simple-storage -slug: Mozilla/Add-ons/SDK/High-Level_APIs/simple-storage -translation_of: Archive/Add-ons/Add-on_SDK/High-Level_APIs/simple-storage ---- -<p>{{AddonSidebar}}</p> - -<div class="note"> -<p>Stable</p> -</div> - -<p><span class="seoSummary">Permet au add-on le stockage des données afin qu'il soit conservé entre les redémarrages de Firefox. </span> Ce module fonctionne de façon similaire au <a href="https://developer.mozilla.org/en/DOM/Storage" title="https://developer.mozilla.org/en/DOM/Storage"> DOM Storage</a> du Web, mais il est uniquement disponible pour des add-ons.</p> - -<h2 id="Utilisation">Utilisation</h2> - -<p>Le module de stockage simple exporte un objet appelé <code>storage</code> qui est persistant et à porté de votre add-on. C'est un objet JavaScript normal, et vous pouvez le traiter comme vous le feriez pour tout autre.</p> - -<p>Pour stocker une valeur, il faut juste l'affecter avec la propriété <code>storage</code>:</p> - -<pre class="brush: js">var ss = require("sdk/simple-storage"); -ss.storage.myArray = [1, 1, 2, 3, 5, 8, 13]; -ss.storage.myBoolean = true; -ss.storage.myNull = null; -ss.storage.myNumber = 3.1337; -ss.storage.myObject = { a: "foo", b: { c: true }, d: null }; -ss.storage.myString = "O frabjous day!";</pre> - -<p>Vous pouvez stocker des valeurs tableau, booléennes, nombre, objet, null et des textes. Si vous souhaitez stocker d'autres types de valeurs, vous devrez d'abord les convertir en chaînes ou un autre de ces types.</p> - -<p>Veillez à définir les propriétés avec <code>storage</code> et non avec le module lui-même:</p> - -<pre class="brush: js">// This is not good! -var ss = require("sdk/simple-storage"); -ss.foo = "I will not be saved! :(";</pre> - -<h3 id="stockage_simple_et_jpm_run">stockage simple et "jpm run"</h3> - -<p>Le module de stockage simple stocke ses données dans votre profil. Parce que <code>jpm run</code> utilise par défaut un profil frais chaque fois qu'il est exécuté, le stockage simple ne fonctionnera pas avec des add-ons exécutées en utilisant <code>jpm run</code> - les données stockées ne persisteront pas d'une exécution à l'autre.</p> - -<p>La solution la plus simple à ce problème est d'utiliser l'option <a href="https://developer.mozilla.org/fr/Add-ons/SDK/Tools/jpm#Using_profiles_2">--profile de jpm</a> avec un chemin d'accès à un profil - pas seulement un nom de profil. Vous pouvez aussi avoir besoin d'inclure l'option<a href="https://developer.mozilla.org/fr/Add-ons/SDK/Tools/jpm#Using_profiles_2"> --no-copie</a> pour empêcher Firefox de copier le profil dans un répertoire de temporaire chaque fois qu'il démarre.</p> - -<pre class="brush: bash">jpm run --no-copy --profile path/to/profile/dir</pre> - -<p>Si vous spécifiez un profil non-existant, il sera créé.</p> - -<blockquote> -<p>Important: Si vous utilisez cette méthode, vous devez mettre fin à votre session de débogage en quittant Firefox normalement, en annulant la commande shell. Si vous ne fermez pas Firefox normalement, puis un simple stockage ne sera pas informé que la session est terminée, et ne sera pas écrire vos données à la mémoire de sauvegarde.</p> -</blockquote> - -<h3 id="Accès_au_stockage_à_partir_de_la_console">Accès au stockage à partir de la console</h3> - -<p>Dans l'<a href="/fr/Add-ons/Add-on_Debugger" title="/fr/Add-ons/Add-on_Debugger"> Add-on Debugger </a>, vous pouvez accéder à vos addons simple stockage par programmation à partir de la console en utilisant ce qui suit:</p> - -<pre class="brush: js">loader.modules['resource://gre/modules/commonjs/sdk/simple-storage.js'].exports.storage</pre> - -<h3 id="Constructeur_de_tableaux">Constructeur de tableaux</h3> - -<p>Pour ne pas remettre à zéro un tableau, attention au constructeur. Par exemple, cet add-on essaie de stocker les URL des pages visitées:</p> - -<pre class="brush: js">var ss = require("sdk/simple-storage"); -ss.storage.pages = []; - -require("sdk/tabs").on("ready", function(tab) { - ss.storage.pages.push(tab.url); -}); - -require("sdk/ui/button/action").ActionButton({ - id: "read", - label: "Read", - icon: "./read.png", - onClick: function() { - console.log(ss.storage.pages); - } -});</pre> - -<p>Mais cela ne fonctonne pas, car il vide le tableau chaque fois que l'add-on est apellée (par exemple, chaque fois que Firefox est lancé). La ligne 2 a besoin d'être subordonné, de sorte que le tableau est uniquement construite si il n'existe pas déjà:</p> - -<pre class="brush: js">if (!ss.storage.pages) - ss.storage.pages = [];</pre> - -<h3 id="Suppression_de_données">Suppression de données</h3> - -<p>Vous pouvez supprimer des propriétés en utilisant l'opérateur <code>delete</code>. Voici une add-on qui ajoute trois boutons pour écrire, lire et supprimer une valeur:</p> - -<pre class="brush: js">var ss = require("sdk/simple-storage"); - -require("sdk/ui/button/action").ActionButton({ - id: "write", - label: "Write", - icon: "./write.png", - onClick: function() { - ss.storage.value = 1; - console.log("Setting value"); - } -}); - -require("sdk/ui/button/action").ActionButton({ - id: "read", - label: "Read", - icon: "./read.png", - onClick: function() { - console.log(ss.storage.value); - } -}); - -require("sdk/ui/button/action").ActionButton({ - id: "delete", - label: "Delete", - icon: "./delete.png", - onClick: function() { - delete ss.storage.value; - console.log("Deleting value"); - } -});</pre> - -<p>Si vous l'exécutez, vous verrez que si vous cliquez sur "Lire" après avoir cliqué sur "Supprimer" vous aurez le résultat escompté:</p> - -<pre>info: undefined -</pre> - -<p>Notez que pour exécuter cet add-on, vous aurez à enregistrer des fichiers icône nommées "write.png", "read.png", et "delete.png" dans le répertoire "data".</p> - -<h3 id="Quotas">Quotas</h3> - -<p>Le stockage simple à la disposition de votre add-on est limité. Actuellement, cette limite est environ cinq mégaoctets (5,242,880 octets). Vous pouvez choisir d'être averti lorsque vous dépassez le quota, et vous devez répondre en réduisant la quantité de données dans le stockage. Si vous quittez l'application pendant que vous êtes hors quota, toutes les données stockées depuis la dernière fois que vous étiez sous le quota ne sont pas conservées. Vous ne devriez pas laisser cela se produire.</p> - -<p>Pour écouter les notifications du quota, utiliser l'evenement <code>"OverQuota"</code>. il sera appelée quand votre stockage dépasse le quota.</p> - -<pre class="brush: js">function myOnOverQuotaListener() { - console.log("Uh oh."); -} -ss.on("OverQuota", myOnOverQuotaListener);</pre> - -<p>Les auditeurs peuvent également être retirés:</p> - -<pre><code><code class="brush: js">ss.removeListener("OverQuota", myOnOverQuotaListener);</code></code></pre> - -<p>Pour connaitre le % de saturation du quota utiliser la proprieté <code>quotaUsage</code>. Si vous êtes dans votre quota, c'est un nombre entre 0 et 1. Si votre add-on utilise plus que son quota, cette valeur est supérieure à 1,0.</p> - -<p>Par conséquent, lorsque vous êtes averti que vous êtes hors quota, vous devez répondre en supprimant les données de l'espace de stockage jusqu'à ce que votre <code>quotaUsage</code> soit inférieur ou égal à 1.</p> - -<pre class="brush: js">ss.storage.myList = [ /* some long array */ ]; -ss.on("OverQuota", function () { - while (ss.quotaUsage > 1) - ss.storage.myList.pop(); -});</pre> - -<h3 id="Navigation_privée">Navigation privée</h3> - -<p>Si votre mémoire est liée à l'histoire de vos utilisateurs Web, des renseignements personnels, ou d'autres données sensibles, votre add-on devrait respecter la <a href="http://support.mozilla.com/fr/kb/Private+Browsing" title="http://support.mozilla.com/fr/kb/Private+Browsing"> navigation privé </a>.</p> - -<p>Pour en savoir plus sur la façon de choisir en mode de navigation privée et comment utiliser le SDK pour éviter de stocker des données d'utilisateur associées aux fenêtres privées, reportez-vous à la documentation du <a href="/fr/Add-ons/SDK/High-Level_APIs/private-browsing" title="/fr/Add-ons/SDK/High-Level_APIs/private-browsing"> <code>private-browsing</code> Module </a> .</p> - -<h2 id="Globals">Globals</h2> - -<h3 id="Propriétés">Propriétés</h3> - -<h4 class="addon-sdk-api-name" id="storage"><code>storage</code></h4> - -<p>Un objet persistant privé de votre add-on.</p> - -<h4 class="addon-sdk-api-name" id="quotaUsage"><code>quotaUsage</code></h4> - -<p>Un certain nombre dans l'intervalle [0, Infinity) qui indique le pourcentage de quota occupé par le stockage. Une valeur dans l'intervalle [0, 1] indique que le stockage est dans le quota. Une valeur supérieure à 1 indique que le stockage dépasse le quota.</p> - -<h3 id="Événements">Événements</h3> - -<h4 class="addon-sdk-api-name" id="OverQuota"><code>OverQuota</code></h4> - -<p>Le module émet cet événement lorsque votre stockage add-ons dépasse son quota.</p> diff --git a/files/fr/mozilla/add-ons/sdk/high-level_apis/tabs/index.html b/files/fr/mozilla/add-ons/sdk/high-level_apis/tabs/index.html deleted file mode 100644 index 5ffa11d9a4..0000000000 --- a/files/fr/mozilla/add-ons/sdk/high-level_apis/tabs/index.html +++ /dev/null @@ -1,669 +0,0 @@ ---- -title: tabs -slug: Mozilla/Add-ons/SDK/High-Level_APIs/tabs -translation_of: Archive/Add-ons/Add-on_SDK/High-Level_APIs/tabs ---- -<p>{{AddonSidebar}}</p> - -<div class="note"> -<p>Stable</p> -</div> - -<p><span class="seoSummary">Ouvre, manipule, accède et recevoir les événements des onglets.</span></p> - -<h2 id="Utilisation">Utilisation</h2> - -<h3 id="Ouvrez_un_onglet">Ouvrez un onglet</h3> - -<p>Vous pouvez ouvrir un nouvel onglet, en spécifiant diverses propriétés, y compris l'emplacement:</p> - -<pre class="brush: js">var tabs = require("sdk/tabs"); -tabs.open("http://www.example.com");</pre> - -<h3 id="Track_tabs">Track tabs</h3> - -<p>You can register event listeners to be notified when tabs open, close, finish loading DOM content, or are made active or inactive:</p> - -<pre class="brush: js">var tabs = require("sdk/tabs"); - -// Listen for tab openings. -tabs.on('open', function onOpen(tab) { - myOpenTabs.push(tab); -}); - -// Listen for tab content loads. -tabs.on('ready', function(tab) { - console.log('tab is loaded', tab.title, tab.url); -});</pre> - -<h3 id="Access_tabs">Access tabs</h3> - -<p>The module itself can be used as a list of all opened tabs across all windows. In particular, you can enumerate it:</p> - -<pre class="brush: js">var tabs = require('sdk/tabs'); -for (let tab of tabs) - console.log(tab.title);</pre> - -<p>You can also access individual tabs by index:</p> - -<pre class="brush: js">var tabs = require('sdk/tabs'); - -tabs.on('ready', function () { - console.log('first: ' + tabs[0].title); - console.log('last: ' + tabs[tabs.length-1].title); -});</pre> - -<p>You can access the currently active tab:</p> - -<pre class="brush: js">var tabs = require('sdk/tabs'); - -tabs.on('activate', function () { - console.log('active: ' + tabs.activeTab.url); -});</pre> - -<h3 id="Track_a_single_tab">Track a single tab</h3> - -<p>Given a tab, you can register event listeners to be notified when the tab is closed, activated or deactivated, or when the page hosted by the tab is loaded or retrieved from the <a href="https://developer.mozilla.org/en-US/docs/Working_with_BFCache">"back-forward cache"</a>:</p> - -<pre class="brush: js">var tabs = require("sdk/tabs"); - -function onOpen(tab) { - console.log(tab.url + " is open"); - tab.on("pageshow", logShow); - tab.on("activate", logActivate); - tab.on("deactivate", logDeactivate); - tab.on("close", logClose); -} - -function logShow(tab) { - console.log(tab.url + " is loaded"); -} - -function logActivate(tab) { - console.log(tab.url + " is activated"); -} - -function logDeactivate(tab) { - console.log(tab.url + " is deactivated"); -} - -function logClose(tab) { - console.log(tab.url + " is closed"); -} - -tabs.on('open', onOpen);</pre> - -<h3 id="Manipulate_a_tab">Manipulate a tab</h3> - -<p>You can get and set various properties of tabs (but note that properties relating to the tab's content, such as the URL, will not contain valid values until after the tab's <code>ready</code> event fires). By setting the <code>url</code> property you can load a new page in the tab:</p> - -<pre class="brush: js">var tabs = require("sdk/tabs"); -tabs.on('activate', function(tab) { - tab.url = "http://www.example.com"; -});</pre> - -<h3 id="Run_scripts_in_a_tab">Run scripts in a tab</h3> - -<p>You can attach a <a href="/en-US/Add-ons/SDK/Guides/Content_Scripts">content script</a> to the page hosted in a tab, and use that to access and manipulate the page's content (see the <a href="/en-US/Add-ons/SDK/Tutorials/Modifying_the_Page_Hosted_by_a_Tab">Modifying the Page Hosted by a Tab</a> tutorial):</p> - -<pre class="brush: js">var tabs = require("sdk/tabs"); - -tabs.on('activate', function(tab) { - var worker = tab.attach({ - contentScript: 'self.port.emit("html", document.body.innerHTML);' - }); - worker.port.on("html", function(message) { - console.log(message) - }) -});</pre> - -<p>Note that <code>tab.attach</code> is tab-centric: if the user navigates to a new page in the same tab, then the worker and content scripts will be reattached to the new page.</p> - -<h3 id="Attaching_stylesheets">Attaching stylesheets</h3> - -<div class="geckoVersionNote"> -<p>New in Firefox 34.</p> -</div> - -<p>You can't attach style sheets to a tab using <code>tab.attach()</code>, but from Firefox 34 onwards you can attach and detach them using the low-level <a href="/en-US/Add-ons/SDK/Low-Level_APIs/stylesheet_style">stylesheet/style</a> and <a href="/en-US/Add-ons/SDK/Low-Level_APIs/content_mod">content/mod</a> APIs. Here's an add-on that uses a toggle button to attach a stylesheet to the active tab, and detach it again. The stylesheet is called "style.css" and is located in the add-on's "data" directory:</p> - -<pre class="brush: js">var tabs = require("sdk/tabs"); -var { attach, detach } = require('sdk/content/mod'); -var { Style } = require('sdk/stylesheet/style'); -var { ToggleButton } = require("sdk/ui/button/toggle"); - -var style = Style({ - uri: './style.css' -}); - -var button = ToggleButton({ - id: "stylist", - label: "stylist", - icon: "./icon-16.png", - onChange: function(state) { - if (state.checked) { - attach(style, tabs.activeTab); - } - else { - detach(style, tabs.activeTab); - } - } -});</pre> - -<h3 id="Private_windows">Private windows</h3> - -<p>If your add-on has not opted into private browsing, then you won't see any tabs that are hosted by private browser windows.</p> - -<p>Tabs hosted by private browser windows won't be seen if you enumerate the <code>tabs</code> module itself, and you won't receive any events for them.</p> - -<p>To learn more about private windows, how to opt into private browsing, and how to support private browsing, refer to the <a href="/en-US/Add-ons/SDK/High-Level_APIs/private-browsing">documentation for the <code>private-browsing</code> module</a>.</p> - -<h3 id="Converting_to_XUL_tabs">Converting to XUL tabs</h3> - -<p>To convert from the high-level <a href="/en-US/Add-ons/SDK/High-Level_APIs/tabs#Tab"><code>Tab</code></a> objects used in this API to the low-level <a href="/en-US/docs/Mozilla/Tech/XUL/tab">XUL <code>tab</code></a> objects used in the <a href="/en-US/Add-ons/SDK/Low-Level_APIs/tabs_utils"><code>tabs/utils</code></a> API and by traditional add-ons, use the <code>viewFor()</code> function exported by the <code>viewFor</code> module.</p> - -<p>To convert back the other way, from a XUL <code>tab</code> to a high-level <code>Tab</code> object, use the <code>modelFor()</code> function, exported by the <code>modelFor</code> module.</p> - -<p>Here's an example converting from a high-level <code>Tab</code> to a XUL <code>tab</code> and then back the other way:</p> - -<pre class="brush: js">var { modelFor } = require("sdk/model/core"); -var { viewFor } = require("sdk/view/core"); - -var tabs = require("sdk/tabs"); -var tab_utils = require("sdk/tabs/utils"); - -function mapHighLevelToLowLevel(tab) { - // get the XUL tab that corresponds to this high-level tab - var lowLevelTab = viewFor(tab); - // now we can, for example, access the tab's content directly - var browser = tab_utils.getBrowserForTab(lowLevelTab); - console.log(browser.contentDocument.body.innerHTML); - // get the high-level tab back from the XUL tab - var highLevelTab = modelFor(lowLevelTab); - console.log(highLevelTab.url); -} - -tabs.on("ready", mapHighLevelToLowLevel); -</pre> - -<p>Note that directly accessing XUL objects and web content like this means you're no longer protected by the compatibility guarantees made by the SDK's high-level APIs. In particular, your code might not work with <a href="http://billmccloskey.wordpress.com/2013/12/05/multiprocess-firefox/">multiprocess Firefox</a>.</p> - -<h2 id="Globals">Globals</h2> - -<h3 id="Functions">Functions</h3> - -<h4 class="addon-sdk-api-name" id="open(options)"><code>open(options)</code></h4> - -<p>Opens a new tab. The new tab will open in the active window or in a new window, depending on the <code>inNewWindow</code> option.</p> - -<p><strong>Example</strong></p> - -<pre class="brush: js">var tabs = require("sdk/tabs"); - -// Open a new tab on active window and make tab active. -tabs.open("http://www.mysite.com"); - -// Open a new tab in a new window and make it active. -tabs.open({ - url: "http://www.mysite.com", - inNewWindow: true -}); - -// Open a new tab on active window in the background. -tabs.open({ - url: "http://www.mysite.com", - inBackground: true -}); - -// Open a new tab as an app tab and do something once it's open. -tabs.open({ - url: "http://www.mysite.com", - isPinned: true, - onOpen: function onOpen(tab) { - // do stuff like listen for content - // loading. - } -});</pre> - -<h5 id="Parameters">Parameters</h5> - -<p><strong>options : object</strong><br> - Required options:</p> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Name</th> - <th scope="col">Type</th> - <th scope="col"> </th> - </tr> - </thead> - <tbody> - <tr> - <td>url</td> - <td>string</td> - <td> - <p>String URL to be opened in the new tab. This is a required property.</p> - </td> - </tr> - </tbody> -</table> - -<p>Optional options:</p> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Name</th> - <th scope="col">Type</th> - <th scope="col"> </th> - </tr> - </thead> - <tbody> - <tr> - <td>isPrivate</td> - <td>boolean</td> - <td> - <p>Boolean which will determine whether the new tab should be private or not. If your add-on does not support private browsing this will have no effect. See the <a href="/en-US/Add-ons/SDK/High-Level_APIs/private-browsing">private-browsing</a> documentation for more information. Defaults to <code>false</code>.</p> - </td> - </tr> - <tr> - <td>inNewWindow</td> - <td>boolean</td> - <td> - <p>If present and true, a new browser window will be opened and the URL will be opened in the first tab in that window. This is an optional property.</p> - </td> - </tr> - <tr> - <td>inBackground</td> - <td>boolean</td> - <td> - <p>If present and true, the new tab will be opened to the right of the active tab and will not be active. This is an optional property.</p> - </td> - </tr> - <tr> - <td>isPinned</td> - <td>boolean</td> - <td> - <p>If present and true, then the new tab will be pinned as an <a href="http://support.mozilla.com/en-US/kb/what-are-app-tabs">app tab</a>.</p> - </td> - </tr> - <tr> - <td>onOpen</td> - <td>function</td> - <td> - <p>A callback function that will be registered for the 'open' event. This is an optional property.</p> - </td> - </tr> - <tr> - <td>onClose</td> - <td>function</td> - <td> - <p>A callback function that will be registered for the 'close' event. This is an optional property.</p> - </td> - </tr> - <tr> - <td>onReady</td> - <td>function</td> - <td> - <p>A callback function that will be registered for the 'ready' event. This is an optional property.</p> - </td> - </tr> - <tr> - <td>onLoad</td> - <td>function</td> - <td> - <p>A callback function that will be registered for the 'load' event. This is an optional property.</p> - </td> - </tr> - <tr> - <td>onPageShow</td> - <td>function</td> - <td> - <p>A callback function that will be registered for the 'pageshow' event. This is an optional property.</p> - </td> - </tr> - <tr> - <td>onActivate</td> - <td>function</td> - <td> - <p>A callback function that will be registered for the 'activate' event. This is an optional property.</p> - </td> - </tr> - <tr> - <td>onDeactivate</td> - <td>function</td> - <td> - <p>A callback function that will be registered for the 'deactivate' event. This is an optional property.</p> - </td> - </tr> - </tbody> -</table> - -<h3 id="Properties">Properties</h3> - -<h4 class="addon-sdk-api-name" id="activeTab"><code>activeTab</code></h4> - -<p>The currently active tab in the active window. This property is read-only. To activate a <code>Tab</code> object, call its <code>activate</code> method.</p> - -<p><strong>Example</strong></p> - -<pre class="brush: js">// Get the active tab's title. -var tabs = require("sdk/tabs"); -console.log("title of active tab is " + tabs.activeTab.title);</pre> - -<h4 class="addon-sdk-api-name" id="length"><code>length</code></h4> - -<p>The number of open tabs across all windows.</p> - -<h3 id="Events">Events</h3> - -<h4 class="addon-sdk-api-name" id="open"><code>open</code></h4> - -<p>This event is emitted when a new tab is opened. This does not mean that the content has loaded, only that the browser tab itself is fully visible to the user.</p> - -<p>Properties relating to the tab's content (for example: <code>title</code>, <code>favicon</code>, and <code>url</code>) will not be correct at this point. If you need to access these properties, listen for the <code>ready</code> event:</p> - -<pre class="brush: js">var tabs = require("sdk/tabs"); -tabs.on('open', function(tab){ - tab.on('ready', function(tab){ - console.log(tab.url); - }); -});</pre> - -<h5 id="Arguments">Arguments</h5> - -<p><strong>Tab</strong> : Listeners are passed the tab object that just opened.</p> - -<h4 class="addon-sdk-api-name" id="close"><code>close</code></h4> - -<p>This event is emitted when a tab is closed. When a window is closed this event will be emitted for each of the open tabs in that window.</p> - -<h5 id="Arguments_2">Arguments</h5> - -<p><strong>Tab</strong> : Listeners are passed the tab object that has closed.</p> - -<h4 class="addon-sdk-api-name" id="ready"><code>ready</code></h4> - -<p>This event is emitted when the DOM for a tab's content is ready. It is equivalent to the <code>DOMContentLoaded</code> event for the given content page.</p> - -<p>A single tab will emit this event every time the DOM is loaded: so it will be emitted again if the tab's location changes or the content is reloaded.</p> - -<p>After this event has been emitted, all properties relating to the tab's content can be used.</p> - -<h5 id="Arguments_3">Arguments</h5> - -<p><strong>Tab</strong> : Listeners are passed the tab object that has loaded.</p> - -<h4 class="addon-sdk-api-name" id="activate"><code>activate</code></h4> - -<p>This event is emitted when an inactive tab is made active.</p> - -<h5 id="Arguments_4">Arguments</h5> - -<p><strong>Tab</strong> : Listeners are passed the tab object that has become active.</p> - -<h4 class="addon-sdk-api-name" id="deactivate"><code>deactivate</code></h4> - -<p>This event is emitted when the active tab is made inactive.</p> - -<h5 id="Arguments_5">Arguments</h5> - -<p><strong>Tab</strong> : Listeners are passed the tab object that has become inactive.</p> - -<h2 id="Tab">Tab</h2> - -<p>A <code>Tab</code> instance represents a single open tab. It contains various tab properties, several methods for manipulation, as well as per-tab event registration.</p> - -<p>Tabs emit all the events described in the Events section. Listeners are passed the <code>Tab</code> object that triggered the event.</p> - -<h3 id="Methods">Methods</h3> - -<h4 class="addon-sdk-api-name" id="pin()"><code>pin()</code></h4> - -<p>Pins this tab as an <a href="http://support.mozilla.com/en-US/kb/what-are-app-tabs">app tab</a>.</p> - -<h4 class="addon-sdk-api-name" id="unpin()"><code>unpin()</code></h4> - -<p>Unpins this tab.</p> - -<h4 class="addon-sdk-api-name" id="close(callback)"><code>close(callback)</code></h4> - -<p>Closes this tab.</p> - -<h5 id="Parameters_2">Parameters</h5> - -<p><strong>callback : function</strong><br> - A function to be called when the tab finishes its closing process. This is an optional argument.</p> - -<h4 class="addon-sdk-api-name" id="reload()"><code>reload()</code></h4> - -<p>Reloads this tab.</p> - -<h4 class="addon-sdk-api-name" id="activate()"><code>activate()</code></h4> - -<p>Makes this tab active, which will bring this tab to the foreground.</p> - -<h4 class="addon-sdk-api-name" id="getThumbnail()"><code>getThumbnail()</code></h4> - -<p>Returns thumbnail data URI of the page currently loaded in this tab.</p> - -<h4 class="addon-sdk-api-name" id="attach(options)"><code>attach(options)</code></h4> - -<p>Attach one or more scripts to the document loaded in the tab. Note that by attaching inside <em>ready</em> event, this becomes tab-centric: if the user navigates to a new page in the same tab, then the content scripts will be reattached to the new page.</p> - -<p><strong>Example</strong></p> - -<pre class="brush: js">var tabs = require("sdk/tabs"); - -tabs.on('ready', function(tab) { - var worker = tab.attach({ - contentScript: - 'document.body.style.border = "5px solid red";' - }); -});</pre> - -<h5 id="Parameters_3">Parameters</h5> - -<p><strong>options : object</strong><br> - Optional options:</p> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Name</th> - <th scope="col">Type</th> - <th scope="col"> </th> - </tr> - </thead> - <tbody> - <tr> - <td>contentScriptFile</td> - <td>string,array</td> - <td> - <p>The local file URLs of content scripts to load. Content scripts specified by this option are loaded <em>before</em> those specified by the <code>contentScript</code> option. Optional.</p> - </td> - </tr> - <tr> - <td>contentScript</td> - <td>string,array</td> - <td> - <p>A string or an array of strings of code to be evaluated in the context. Content scripts specified by this option are loaded <em>after</em> those specified by the <code>contentScriptFile</code> option. Optional.</p> - </td> - </tr> - <tr> - <td>contentScriptOptions</td> - <td>object</td> - <td> - <p>You can use this option to define read-only values for your content scripts.</p> - - <p>The option consists of an object literal listing <code>name:value</code> pairs for the values you want to provide to the content script. For example:</p> - - <pre class="brush: js"> -// main.js - -const tabs = require("sdk/tabs"); - -tabs.open({ - url: "./page.html", - onReady: function(tab) { - tab.attach({ - contentScriptFile: "./content-script.js", - contentScriptOptions: { - a: "blah" - } - }); - } -});</pre> - - <p>The values are accessible to content scripts via the <code>self.options</code> property:</p> - - <pre class="brush: js"> -// content-script.js - -alert(self.options.a);</pre> - </td> - </tr> - <tr> - <td>onMessage</td> - <td>function</td> - <td> - <p>A function called when the content worker receives a message from content scripts. Listeners are passed a single argument, the message posted from the content script. Optional.</p> - </td> - </tr> - <tr> - <td>onError</td> - <td>function</td> - <td>A function called when the content worker receives an error from content scripts. Listeners are passed a single argument, <code>error</code>, which is the error posted from the content script and an object of type <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error">Error</a>. Optional</td> - </tr> - </tbody> -</table> - -<h5 id="Returns">Returns</h5> - -<p><strong>Worker</strong> : The <a href="/en-US/Add-ons/SDK/Low-Level_APIs/content_worker">Worker</a> object can be used to communicate with the content script. See <a href="/en-US/Add-ons/SDK/Guides/Content_Scripts">Content Scripts guide</a> to learn the details.</p> - -<h3 id="Properties_2">Properties</h3> - -<h4 class="addon-sdk-api-name" id="id"><code>id</code></h4> - -<p>The unique id for the tab. This property is read-only.</p> - -<h4 class="addon-sdk-api-name" id="title"><code>title</code></h4> - -<p>The title of the tab (usually the title of the page currently loaded in the tab) This property can be set to change the tab title.</p> - -<h4 class="addon-sdk-api-name" id="url"><code>url</code></h4> - -<p>The URL of the page currently loaded in the tab. This property can be set to load a different URL in the tab.</p> - -<h4 class="addon-sdk-api-name" id="favicon"><code>favicon</code></h4> - -<p>The URL of the favicon for the page currently loaded in the tab. This property is read-only.</p> - -<div class="warning">This property is deprecated. From version 1.15, use the <a href="/en-US/Add-ons/SDK/Low-Level_APIs/places_favicon">favicon module's <code>getFavicon()</code></a> function instead.</div> - -<h4 class="addon-sdk-api-name" id="contentType"><code>contentType</code></h4> - -<div class="note"> -<p><strong>This is currently an experimental API, so we might change it in future releases.</strong></p> - -<p>Returns the MIME type that the document currently loaded in the tab is being rendered as. This may come from HTTP headers or other sources of MIME information, and might be affected by automatic type conversions performed by either the browser or extensions. This property is read-only.</p> -</div> - -<h4 class="addon-sdk-api-name" id="index"><code>index</code></h4> - -<p>The index of the tab relative to other tabs in the application window. This property can be set to change its relative position.</p> - -<h4 class="addon-sdk-api-name" id="isPinned"><code>isPinned</code></h4> - -<p>Whether or not this tab is pinned as an <a href="http://support.mozilla.com/en-US/kb/what-are-app-tabs">app tab</a>. This property is read-only.</p> - -<h4 class="addon-sdk-api-name" id="window"><code>window</code></h4> - -<p>The <a href="/en-US/Add-ons/SDK/High-Level_APIs/windows#BrowserWindow"><code>window</code></a> object for this tab.</p> - -<h4 class="addon-sdk-api-name" id="readyState"><code>readyState</code></h4> - -<div class="geckoVersionNote"> -<p>New in Firefox 33.</p> -</div> - -<p>A string telling you the load state of the document hosted by this tab. This corresponds directly to <a href="/en-US/docs/Web/API/document.readyState"><code>Document.readyState</code></a>. It has one of four possible values:</p> - -<ul> - <li>"uninitialized": the tab's document is not yet loading</li> - <li>"loading": the tab's document is still in the process of loading</li> - <li>"interactive": the tab's document has loaded and is parsed, but resources such as images and stylesheets may still be loading</li> - <li>"complete": the tab's document and all resources are fully loaded</li> -</ul> - -<p>Once a tab's <code>readyState</code> has entered "interactive", you can retrieve properties such as the document's URL.</p> - -<h3 id="Events_2">Events</h3> - -<h4 class="addon-sdk-api-name" id="close_2"><code>close</code></h4> - -<p>This event is emitted when the tab is closed. It's also emitted when the tab's window is closed.</p> - -<h5 id="Arguments_6">Arguments</h5> - -<p><strong>Tab</strong> : Listeners are passed the tab object.</p> - -<h4 class="addon-sdk-api-name" id="ready_2"><code>ready</code></h4> - -<p>This event is emitted when the DOM for the tab's content is ready. It is equivalent to the <a href="https://developer.mozilla.org/en-US/docs/Web/Reference/Events/DOMContentLoaded"><code>DOMContentLoaded</code></a> event for the given content page. At this point the document itself is fully loaded and parsed, but resources such as stylesheets and images may still be loading.</p> - -<p>A single tab will emit this event every time the DOM is loaded: so it will be emitted again if the tab's location changes or the content is reloaded. After this event has been emitted, all properties relating to the tab's content can be used.</p> - -<h5 id="Arguments_7">Arguments</h5> - -<p><strong>Tab</strong> : Listeners are passed the tab object.</p> - -<h4 class="addon-sdk-api-name" id="load"><code>load</code></h4> - -<p>This event is emitted when the page for the tab's content is loaded. It is equivalent to the <a href="https://developer.mozilla.org/en-US/docs/Web/Reference/Events/load"><code>load</code></a> event for the given content page. At this point the document and its resources, such as images and stylesheets, have finished loading.</p> - -<p>This event can be used for pages that do not have a <code>DOMContentLoaded</code> event, like images. For pages that have a <code>DOMContentLoaded</code> event, <code>load</code> is fired after <code>ready</code>.</p> - -<p>A single tab will emit this event every time the page is loaded: so it will be emitted again if the tab's location changes or the content is reloaded. After this event has been emitted, all properties relating to the tab's content can be used.</p> - -<h5 id="Arguments_8">Arguments</h5> - -<p><strong>Tab</strong> : Listeners are passed the tab object.</p> - -<h4 class="addon-sdk-api-name" id="pageshow"><code>pageshow</code></h4> - -<p>The <code>pageshow</code> event is emitted when the page for a tab's content is loaded. It is equivalent to the <a href="https://developer.mozilla.org/en-US/docs/DOM/Mozilla_event_reference/pageshow"><code>pageshow</code></a> event for the given content page.</p> - -<p>This event is similar to the <a href="/en-US/Add-ons/SDK/High-Level_APIs/tabs#load"><code>load</code></a> and <a href="/en-US/Add-ons/SDK/High-Level_APIs/tabs#ready"><code>ready</code></a> events, except unlike <code>load</code> and <code>ready</code>, <code>pageshow</code> is triggered if the page was retrieved from the <a href="https://developer.mozilla.org/en-US/docs/Working_with_BFCache">bfcache</a>. This means that if the user loads a page, loads a new page, then moves back to the previous page using the "Back" button, the <code>pageshow</code> event is emitted when the user moves back to the previous page, while the <code>load</code> and <code>ready</code> events are not.</p> - -<p>This event is <em>not</em> emitted when the tab is made the active tab: to get notified about that, you need to listen to the <a href="/en-US/Add-ons/SDK/High-Level_APIs/tabs#activate"><code>activate</code></a> event.</p> - -<p>After this event has been emitted, all properties relating to the tab's content can be used. It is emitted after <code>load</code> and <code>ready</code>.</p> - -<h5 id="Arguments_9">Arguments</h5> - -<p><strong>Tab</strong> : Listeners are passed the tab object.</p> - -<p><strong>persisted</strong> : Listeners are passed a boolean value indicating whether or not the page was loaded from the <a href="https://developer.mozilla.org/en-US/docs/Working_with_BFCache">bfcache</a>.</p> - -<h4 class="addon-sdk-api-name" id="activate_2"><code>activate</code></h4> - -<p>This event is emitted when the tab is made active.</p> - -<p>Note that you cannot guarantee that a tab's content, or even its <code>url</code>, are initialized at the time <code>activate</code> is emitted. This is because when a new tab is opened, its <code>activate</code> event may be emitted before the content is loaded.</p> - -<p>You can use the tab's <a href="/en-US/Add-ons/SDK/High-Level_APIs/tabs#readyState"><code>readyState</code></a> property to determine whether the tab's content and <code>url</code> will be available: if <code>readyState</code> is <code>uninitialized</code> or <code>loading</code>, then you can't access the tab's properties and must wait for the tab's <a href="/en-US/Add-ons/SDK/High-Level_APIs/tabs#ready_2"><code>ready</code></a> event.</p> - -<h5 id="Arguments_10">Arguments</h5> - -<p><strong>Tab</strong> : Listeners are passed the tab object.</p> - -<h4 class="addon-sdk-api-name" id="deactivate_2"><code>deactivate</code></h4> - -<p>This event is emitted when the tab is made inactive.</p> - -<h5 id="Arguments_11">Arguments</h5> - -<p><strong>Tab</strong> : Listeners are passed the tab object.</p> diff --git a/files/fr/mozilla/add-ons/sdk/index.html b/files/fr/mozilla/add-ons/sdk/index.html deleted file mode 100644 index 4de1603cd2..0000000000 --- a/files/fr/mozilla/add-ons/sdk/index.html +++ /dev/null @@ -1,337 +0,0 @@ ---- -title: Add-on SDK -slug: Mozilla/Add-ons/SDK -tags: - - Add-on SDK - - Jetpack -translation_of: Archive/Add-ons/Add-on_SDK ---- -<p> </p> - -<div class="warning"> -<p>Support for extensions using XUL/XPCOM or the Add-on SDK was removed in Firefox 57, released November 2017. As there is no supported version of Firefox enabling these technologies, this page will be removed by December 2020.</p> - -<p>Add-ons using the techniques described in this document are considered a legacy technology in Firefox. Don't use these techniques to develop new add-ons. Use <a href="/en-US/Add-ons/WebExtensions">WebExtensions</a> instead. If you maintain an add-on which uses the techniques described here, consider migrating it to use WebExtensions.</p> - -<p><strong>Starting from <a href="https://wiki.mozilla.org/RapidRelease/Calendar">Firefox 53</a>, no new legacy add-ons will be accepted on addons.mozilla.org (AMO) for desktop Firefox and Firefox for Android.</strong></p> - -<p><strong>Starting from <a href="https://wiki.mozilla.org/RapidRelease/Calendar">Firefox 57</a>, only extensions developed using WebExtensions APIs will be supported on Desktop Firefox and Firefox for Android. </strong></p> - -<p>Even before Firefox 57, changes coming up in the Firefox platform will break many legacy extensions. These changes include multiprocess Firefox (e10s), sandboxing, and multiple content processes. Legacy extensions that are affected by these changes should migrate to use WebExtensions APIs if they can. See the <a href="https://blog.mozilla.org/addons/2017/02/16/the-road-to-firefox-57-compatibility-milestones/">"Compatibility Milestones" document</a> for more information.</p> - -<p>A wiki page containing <a href="https://wiki.mozilla.org/Add-ons/developer/communication">resources, migration paths, office hours, and more</a>, is available to help developers transition to the new technologies.</p> -</div> - -<section class="Quick_links" id="Quick_Links"> -<ol> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions"><strong>Browser extensions</strong></a></li> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions#Getting_started">Getting started</a> - <ol> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/What_are_WebExtensions">What are extensions?</a></li> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Your_first_WebExtension">Your first extension</a></li> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Your_second_WebExtension">Your second extension</a></li> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Anatomy_of_a_WebExtension">Anatomy of an extension</a></li> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Examples">Example extensions</a></li> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/What_next_">What next?</a></li> - </ol> - </li> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions#Concepts">Concepts</a> - <ol> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Using_the_JavaScript_APIs">Using the JavaScript APIs</a></li> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Content_scripts">Content scripts</a></li> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Match_patterns">Match patterns</a></li> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Working_with_files">Working with files</a></li> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Internationalization">Internationalization</a></li> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Security_best_practices">Security best practices</a></li> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Content_Security_Policy">Content Security Policy</a></li> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Native_messaging">Native messaging</a></li> - </ol> - </li> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions#User_Interface">User interface</a> - <ol> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface">User Interface</a></li> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Browser_action">Toolbar button</a></li> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Page_actions">Address bar button</a></li> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Sidebars">Sidebars</a></li> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Context_menu_items">Context menu items</a></li> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Options_pages">Options page</a></li> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Extension_pages">Extension pages</a></li> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Notifications">Notifications</a></li> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Omnibox">Address bar suggestions</a></li> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/devtools_panels">Developer tools panels</a></li> - </ol> - </li> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions#How_to">How to</a> - <ol> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Intercept_HTTP_requests">Intercept HTTP requests</a></li> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Modify_a_web_page">Modify a web page</a></li> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Safely_inserting_external_content_into_a_page">Insert external content</a></li> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Add_a_button_to_the_toolbar">Add a button to the toolbar</a></li> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Implement_a_settings_page">Implement a settings page</a></li> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Working_with_the_Tabs_API">Work with the Tabs API</a></li> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Work_with_the_Bookmarks_API">Work with the Bookmarks API</a></li> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Work_with_the_Cookies_API">Work with the Cookies API</a></li> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Work_with_contextual_identities">Work with contextual identities</a></li> - </ol> - </li> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions#Porting">Porting</a> - <ol> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Porting_a_Google_Chrome_extension">Porting a Google Chrome extension</a></li> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Porting_a_legacy_Firefox_add-on">Porting a legacy Firefox extension</a></li> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Embedded_WebExtensions">Embedded WebExtensions</a></li> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Comparison_with_the_Add-on_SDK">Comparison with the Add-on SDK</a></li> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Comparison_with_XUL_XPCOM_extensions">Comparison with XUL/XPCOM extensions</a></li> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Chrome_incompatibilities">Chrome incompatibilities</a></li> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Differences_between_desktop_and_Android">Differences between desktop and Android</a></li> - </ol> - </li> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions#Firefox_workflow">Firefox workflow</a> - <ol> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/User_experience_best_practices">User Experience</a></li> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Temporary_Installation_in_Firefox">Temporary Installation in Firefox</a></li> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Debugging">Debugging</a></li> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Testing_persistent_and_restart_features">Testing persistent and restart features</a></li> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Developing_WebExtensions_for_Firefox_for_Android">Developing for Firefox for Android</a></li> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Getting_started_with_web-ext">Getting started with web-ext</a></li> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/web-ext_command_reference">web-ext command reference</a></li> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/WebExtensions_and_the_Add-on_ID">Extensions and the Add-on ID</a></li> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Request_the_right_permissions">Request the right permissions</a></li> - </ol> - </li> - <li data-default-state="closed"><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API">JavaScript APIs</a> - <ol> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Browser_support_for_JavaScript_APIs">Browser support for JavaScript APIs</a></li> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/alarms">alarms</a></li> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/bookmarks">bookmarks</a></li> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/browserAction">browserAction</a></li> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/browserSettings">browserSettings</a></li> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/browsingData">browsingData</a></li> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/clipboard">clipboard</a></li> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/commands">commands</a></li> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/contentScripts">contentScripts</a></li> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/contextualIdentities">contextualIdentities</a></li> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/cookies">cookies</a></li> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/devtools.inspectedWindow">devtools.inspectedWindow</a></li> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/devtools.network">devtools.network</a></li> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/devtools.panels">devtools.panels</a></li> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/dns">dns</a></li> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/downloads">downloads</a></li> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/events">events</a></li> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/extension">extension</a></li> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/extensionTypes">extensionTypes</a></li> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/find">find</a></li> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/history">history</a></li> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/i18n">i18n</a></li> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/identity">identity</a></li> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/idle">idle</a></li> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/management">management</a></li> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/menus">menus</a></li> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/notifications">notifications</a></li> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/omnibox">omnibox</a></li> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/pageAction">pageAction</a></li> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/permissions">permissions</a></li> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/pkcs11">pkcs11</a></li> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/privacy">privacy</a></li> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/proxy">proxy</a></li> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/runtime">runtime</a></li> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/search">search</a></li> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/sessions">sessions</a></li> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/sidebarAction">sidebarAction</a></li> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/storage">storage</a></li> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/tabs">tabs</a></li> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/theme">theme</a></li> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/topSites">topSites</a></li> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/types">types</a></li> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/webNavigation">webNavigation</a></li> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/webRequest">webRequest</a></li> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/windows">windows</a></li> - </ol> - </li> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json">Manifest keys</a> - <ol> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/applications">applications</a></li> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/author">author</a></li> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/background">background</a></li> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/browser_action">browser_action</a></li> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/chrome_settings_overrides">chrome_settings_overrides</a></li> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/chrome_url_overrides">chrome_url_overrides</a></li> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/commands">commands</a></li> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/content_scripts">content_scripts</a></li> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/content_security_policy">content_security_policy</a></li> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/default_locale">default_locale</a></li> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/description">description</a></li> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/developer">developer</a></li> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/devtools_page">devtools_page</a></li> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/homepage_url">homepage_url</a></li> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/icons">icons</a></li> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/incognito">incognito</a></li> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/manifest_version">manifest_version</a></li> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/name">name</a></li> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/omnibox">omnibox</a></li> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/optional_permissions">optional_permissions</a></li> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/options_ui">options_ui</a></li> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/page_action">page_action</a></li> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions">permissions</a></li> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/protocol_handlers">protocol_handlers</a></li> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/short_name">short_name</a></li> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/sidebar_action">sidebar_action</a></li> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/theme">theme</a></li> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/version">version</a></li> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/version_name">version_name</a></li> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/web_accessible_resources">web_accessible_resources</a></li> - </ol> - </li> - <li><a href="/en-US/docs/Mozilla/Add-ons/Themes"><strong>Themes</strong></a></li> - <li><a href="/en-US/docs/Mozilla/Add-ons/Themes/Theme_concepts">Browser themes</a> - <ol> - <li><a href="/en-US/docs/Mozilla/Add-ons/Themes/Theme_concepts">Browser theme concepts</a></li> - </ol> - </li> - <li><a href="/en-US/docs/Mozilla/Add-ons/Themes/Lightweight_themes">Lightweight themes</a> - <ol> - <li><a href="/en-US/docs/Mozilla/Add-ons/Themes/Lightweight_themes">Lightweight themes</a></li> - <li><a href="/en-US/docs/Mozilla/Add-ons/Themes/Lightweight_Themes/FAQ">Lightweight themes FAQ</a></li> - </ol> - </li> - <li><a href="/en-US/docs/Mozilla/Add-ons/Distribution"><strong>Publishing and Distribution</strong></a></li> - <li><a href="/en-US/docs/Mozilla/Add-ons/Distribution">Publishing add-ons</a> - <ol> - <li><a href="/en-US/docs/Mozilla/Add-ons/Distribution">Signing and distribution overview</a></li> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Package_your_extension_">Package your extension</a></li> - <li><a href="/en-US/docs/Mozilla/Add-ons/Distribution/Submitting_an_add-on">Submit an add-on</a></li> - <li><a href="/en-US/docs/Mozilla/Add-ons/Source_Code_Submission">Source code submission</a></li> - <li><a href="/en-US/docs/Mozilla/Add-ons/Distribution/Resources_for_publishers">Resources for publishers</a></li> - <li><a href="/en-US/docs/Mozilla/Add-ons/Listing">Creating an appealing listing</a></li> - <li><a href="/en-US/docs/Mozilla/Add-ons/AMO/Policy/Reviews">Review policies</a></li> - <li><a href="/en-US/docs/Mozilla/Add-ons/AMO/Policy/Agreement">Developer agreement</a></li> - <li><a href="/en-US/docs/Mozilla/Add-ons/AMO/Policy/Featured">Featured add-ons</a></li> - <li><a href="/en-US/docs/Mozilla/Add-ons/Distribution/Retiring_your_extension">Retiring your extension</a></li> - </ol> - </li> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Alternative_distribution_options">Distributing add-ons</a> - <ol> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Alternative_distribution_options/Sideloading_add-ons">For sideloading</a></li> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Alternative_distribution_options/Add-ons_for_desktop_apps">For desktop apps</a></li> - <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Alternative_distribution_options/Add-ons_in_the_enterprise">For an enterprise</a></li> - </ol> - </li> - <li><a href="https://discourse.mozilla.org/c/add-ons"><strong>Community and Support</strong></a></li> - <li><a href="#">Channels</a> - <ol> - <li><a href="https://blog.mozilla.org/addons">Add-ons blog</a></li> - <li><a href="https://discourse.mozilla.org/c/add-ons">Add-on forums</a></li> - <li><a href="http://stackoverflow.com/questions/tagged/firefox-addon">Stack Overflow</a></li> - <li><a href="/en-US/docs/Mozilla/Add-ons/#Contact_us">Contact us</a></li> - </ol> - </li> -</ol> -</section> - -<p> </p> - -<p>Using the Add-on SDK, you can create Firefox add-ons. You can use various standard Web technologies: JavaScript, HTML, and CSS, to create the add-ons. The SDK includes JavaScript APIs, which you can use to create add-ons and tools for creating, running, testing, and packaging add-ons.</p> - -<hr> -<h3 id="Tutorials"><a href="/en-US/Add-ons/SDK/Tutorials">Tutorials</a></h3> - -<div class="column-container"> -<div class="column-half"> -<dl> - <dt><a href="/en-US/Add-ons/SDK/Tutorials#getting-started">Getting started</a></dt> - <dd>How to <a href="/en-US/Add-ons/SDK/Tutorials/Installation">install the SDK</a> and <a href="/en-US/Add-ons/SDK/Tutorials/Getting_Started_(jpm)">use the jpm tool</a> to develop, test, and package add-ons.</dd> - <dt><a href="/en-US/Add-ons/SDK/Tutorials#interact-with-the-browser">Interact with the browser</a></dt> - <dd><a href="/en-US/Add-ons/SDK/Tutorials/Open_a_Web_Page">Open web pages</a>, <a href="/en-US/Add-ons/SDK/Tutorials/Listen_For_Page_Load">listen for pages loading</a> and <a href="/en-US/Add-ons/SDK/Tutorials/List_Open_Tabs">list open pages</a>.</dd> - <dt><a href="/en-US/Add-ons/SDK/Tutorials#development-techniques">Development techniques</a></dt> - <dd>Learn about common development techniques, such as <a href="/en-US/Add-ons/SDK/Tutorials/Unit_testing">unit testing</a>, <a href="/en-US/Add-ons/SDK/Tutorials/Logging">logging</a>, <a href="/en-US/Add-ons/SDK/Tutorials/Creating_Reusable_Modules">creating reusable modules</a>, <a href="/en-US/Add-ons/SDK/Tutorials/l10n">localization</a>, and <a href="/en-US/Add-ons/SDK/Tutorials/Mobile_development">mobile development</a>.</dd> -</dl> -</div> - -<div class="column-half"> -<dl> - <dt><a href="/en-US/Add-ons/SDK/Tutorials#create-user-interfaces">Create user interface components</a></dt> - <dd>Create user interface components such as <a href="/en-US/Add-ons/SDK/Tutorials/Adding_a_Button_to_the_Toolbar">toolbar buttons</a>, <a href="/en-US/Add-ons/SDK/Tutorials/Add_a_Context_Menu_Item">context menus</a>, <a href="/en-US/Add-ons/SDK/Tutorials/Add_a_Menu_Item_to_Firefox">menu items</a>, and <a href="/en-US/Add-ons/SDK/Tutorials/Display_a_Popup">dialogs</a>.</dd> - <dt><a href="/en-US/Add-ons/SDK/Tutorials#modify-web-pages">Modify web pages</a></dt> - <dd>Modify pages <a href="/en-US/Add-ons/SDK/Tutorials/Modifying_Web_Pages_Based_on_URL">matching a URL pattern</a> or dynamically <a href="/en-US/Add-ons/SDK/Tutorials/Modifying_the_Page_Hosted_by_a_Tab">modify a particular tab</a>.</dd> - <dt><a href="/en-US/Add-ons/SDK/Tutorials/Annotator">Putting it together</a></dt> - <dd>Walkthrough of the Annotator example add-on.</dd> -</dl> -</div> -</div> - -<hr> -<h3 id="Guides">Guides</h3> - -<div class="column-container"> -<div class="column-half"> -<dl> - <dt><a href="/en-US/Add-ons/SDK/Guides#contributors-guide">Contributor's guide</a></dt> - <dd>Learn <a href="/en-US/Add-ons/SDK/Guides/Getting_Started">how to start contributing</a> to the SDK and about the most important idioms used in the SDK code such as <a href="/en-US/Add-ons/SDK/Guides/Modules">modules</a>, <a href="/en-US/Add-ons/SDK/Guides/Classes_and_Inheritance">classes and inheritance</a>, <a href="/en-US/Add-ons/SDK/Guides/Private_Properties">private properties</a>, and <a href="/en-US/Add-ons/SDK/Guides/Content_Processes">content processes</a>.</dd> - <dt><a href="/en-US/Add-ons/SDK/Guides#sdk-infrastructure">SDK infrastructure</a></dt> - <dd>Aspects of the SDK's underlying technology: <a href="/en-US/Add-ons/SDK/Guides/Module_structure_of_the_SDK">modules</a>, the <a href="/en-US/Add-ons/SDK/Guides/Program_ID">Program ID</a> and the rules defining <a href="/en-US/Add-ons/SDK/Guides/Firefox_Compatibility">Firefox compatibility</a>.</dd> - <dt><a href="/en-US/Add-ons/SDK/Guides/Content_Scripts">Content scripts</a></dt> - <dd>A detailed guide to working with content scripts.</dd> -</dl> -</div> - -<div class="column-half"> -<dl> - <dt><a href="/en-US/Add-ons/SDK/Guides#sdk-idioms">SDK idioms</a></dt> - <dd>The SDK's <a href="/en-US/Add-ons/SDK/Guides/Working_with_Events">event framework</a> and the <a href="/en-US/Add-ons/SDK/Guides/Two_Types_of_Scripts">distinction between add-on scripts and content scripts</a>.</dd> - <dt><a href="/en-US/Add-ons/SDK/Guides/XUL_Migration_Guide">XUL migration</a></dt> - <dd>A guide to <a href="/en-US/Add-ons/SDK/Guides/XUL_Migration_Guide">porting XUL add-ons to the SDK</a>. This guide includes a <a href="/en-US/Add-ons/SDK/Guides/XUL_vs_SDK">comparison of the two toolsets</a> and a <a href="/en-US/Add-ons/SDK/Guides/Porting_the_Library_Detector">working example</a> of porting a XUL add-on.</dd> - <dt><a href="/en-US/Add-ons/SDK/Guides/Multiprocess_Firefox_and_the_SDK">Multiprocess Firefox and the SDK</a></dt> - <dd>How to check whether your add-on is compatible with multiprocess Firefox or not and fix it accordingly.</dd> -</dl> -</div> -</div> - -<hr> -<h3 id="Reference">Reference</h3> - -<div class="column-container"> -<div class="column-half"> -<dl> - <dt><a href="/en-US/Add-ons/SDK/High-Level_APIs">High-Level APIs</a></dt> - <dd>Reference documentation for the high-level SDK APIs.</dd> - <dt><a href="/en-US/Add-ons/SDK/Tools">Tools reference</a></dt> - <dd>Reference documentation for the <a href="/en-US/Add-ons/SDK/Tools/jpm">jpm tool</a> used to develop, test and package add-ons, the <a href="/en-US/Add-ons/SDK/Tools/console">console</a> global used for logging, and the <a href="/en-US/Add-ons/SDK/Tools/package_json">package.json</a> file.</dd> -</dl> -</div> - -<div class="column-half"> -<dl> - <dt><a href="/en-US/Add-ons/SDK/Low-Level_APIs">Low-Level APIs</a></dt> - <dd>Reference documentation for the low-level SDK APIs.</dd> -</dl> -</div> -</div> - -<p> </p> - -<hr> -<div> -<div class="overheadIndicator communitybox" dir="ltr"> -<div class="column-container"> -<h2 id="Join_the_Add-on_SDK_community">Join the Add-on SDK community</h2> - -<div class="column-half"> -<div class="communitysubhead">Choose your preferred method for joining the discussion:</div> - -<ul class="communitymailinglist"> - <li><a href="https://mail.mozilla.org/listinfo/dev-addons">Mailing list</a></li> - <li><a href="https://twitter.com/mozillajetpack">Twitter</a></li> - <li><a href="http://stackoverflow.com/questions/tagged/firefox-addon-sdk">Stack Overflow</a></li> - <li><a href="http://groups.google.com/group/https://groups.google.com/forum/?fromgroups#!forum/mozilla-labs-jetpack">Newsgroup</a></li> - <li><a href="http://groups.google.com/group/https://groups.google.com/forum/?fromgroups#!forum/mozilla-labs-jetpack/feeds">RSS feed</a></li> -</ul> -</div> - -<div class="column-half"> -<ul class="communitycontact"> - <li><strong>IRC: </strong><a href="irc://irc.mozilla.org/jetpack">#jetpack</a> <span class="smaller">(<a href="https://wiki.mozilla.org/IRC">learn more</a>)</span></li> - <li><strong>Team info: </strong><a href="https://wiki.mozilla.org/Jetpack" title="Designs and plans for the SDK tools">Jetpack Wiki</a></li> -</ul> -</div> -</div> -</div> -</div> diff --git a/files/fr/mozilla/add-ons/sdk/low-level_apis/index.html b/files/fr/mozilla/add-ons/sdk/low-level_apis/index.html deleted file mode 100644 index 0460b4ce3d..0000000000 --- a/files/fr/mozilla/add-ons/sdk/low-level_apis/index.html +++ /dev/null @@ -1,24 +0,0 @@ ---- -title: Low-Level APIs -slug: Mozilla/Add-ons/SDK/Low-Level_APIs -tags: - - TopicStub -translation_of: Archive/Add-ons/Add-on_SDK/Low-Level_APIs ---- -<p>Les modules de cette section implémentent des API de bas niveau. Ces modules se divisent à peu près en trois catégories:</p> - -<ul> - <li> - <p>utilitaires fondamentaux tels que la <a href="/en-US/Add-ons/SDK/Low-Level_APIs/util_collection">collection</a>. De nombreux modules complémentaires voudront probablement utiliser des modules de cette catégorie.</p> - </li> - <li> - <p>blocs de construction pour les modules de niveau supérieur, tels que les <a href="/en-US/Add-ons/SDK/Low-Level_APIs/event_core">events</a> et les <a href="/en-US/Add-ons/SDK/Low-Level_APIs/content_worker">worker</a>. Vous êtes plus susceptible de les utiliser si vous créez vos propres modules qui implémentent de nouvelles API, étendant ainsi le SDK lui-même.</p> - </li> - <li> - <p>des modules privilégiés qui exposent de puissantes capacités de bas niveau telles que <a href="/en-US/Add-ons/SDK/Low-Level_APIs/window_utils">window/utils</a> et <a href="/en-US/Add-ons/SDK/Low-Level_APIs/net_xhr">net/xhr</a>. Vous pouvez utiliser ces modules dans votre module complémentaire si vous en avez besoin, mais sachez que le coût d'un accès privilégié est la nécessité de prendre des précautions de sécurité plus élaborées. Dans de nombreux cas, ces modules ont des analogues plus simples et plus restreints parmi les "API de haut niveau" (par exemple, <a href="/en-US/Add-ons/SDK/High-Level_APIs/windows">windows</a> ou <a href="/en-US/Add-ons/SDK/High-Level_APIs/request">request</a>).</p> - </li> -</ul> - -<p>Ces modules sont toujours en développement actif et nous prévoyons d'y apporter des modifications incompatibles dans les prochaines versions.</p> - -<p>{{ LandingPageListSubpages ("/en-US/Add-ons/SDK/Low-Level_APIs", 5) }}</p> diff --git a/files/fr/mozilla/add-ons/sdk/low-level_apis/io_byte-streams/index.html b/files/fr/mozilla/add-ons/sdk/low-level_apis/io_byte-streams/index.html deleted file mode 100644 index c37870a8cb..0000000000 --- a/files/fr/mozilla/add-ons/sdk/low-level_apis/io_byte-streams/index.html +++ /dev/null @@ -1,109 +0,0 @@ ---- -title: io/byte-streams -slug: Mozilla/Add-ons/SDK/Low-Level_APIs/io_byte-streams -translation_of: Archive/Add-ons/Add-on_SDK/Low-Level_APIs/io_byte-streams ---- -<p>{{AddonSidebar}}</p> - -<div class="note"> -<p>Expérimental</p> -</div> - -<p><span class="seoSummary">Fournit des flux d'octets en lecture/écriture.</span></p> - -<pre class="brush: js">function readBinaryDataFromFile (filename) { - var fileIO = require("sdk/io/file"); - var data = null; - if (fileIO.exists(filename)) { - var ByteReader = fileIO.open(filename, "rb"); - if (!ByteReader.closed) { - data = ByteReader.read(); - ByteReader.close(); - } - } - return data; -} -</pre> - -<pre class="brush: js">function writeBinaryDataToFile(data, filename) { - var fileIO = require("sdk/io/file"); - var ByteWriter = fileIO.open(filename, "wb"); - if (!ByteWriter.closed) { - ByteWriter.write(data); - ByteWriter.close(); - } -}</pre> - -<h2 id="Globals">Globals</h2> - -<h3 id="Constructeurs">Constructeurs</h3> - -<h4 class="addon-sdk-api-name" id="ByteReader(inputStream)"><code>ByteReader(inputStream)</code></h4> - -<p>Crée un flux d'entrée binaire qui lit les octets d'un flux de support.</p> - -<p>Vous pouvez également créer un objets <code>ByteReader</code> en utilisant la fonction io/file <a href="/fr/docs/Mozilla/Add-ons/SDK/Low-Level_APIs/io_file#open(path.2C_mode)" title="/fr/Add-ons/SDK/Low-Level_APIs/io_file#open(path.2C_mode)"><code>open()</code></a>.</p> - -<h5 id="Paramètres">Paramètres</h5> - -<p><strong>inputStream: </strong><strong>flux</strong><br> - Le flux de support, un <a href="/fr/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIInputStream" title="http://mxr.mozilla.org/mozilla-central/source/xpcom/io/nsIInputStream.idl"><code>nsIInputStream</code> </a></p> - -<h4 class="addon-sdk-api-name" id="ByteWriter(outputStream)"><code>ByteWriter(outputStream)</code></h4> - -<p>Crée un flux de sortie binaire qui écrit les octets dans un flux de support.</p> - -<p>Vous pouvez également créer un objets <code>ByteWriter</code> en utilisant la fonction io/file <a href="/fr/docs/Mozilla/Add-ons/SDK/Low-Level_APIs/io_file#open(path.2C_mode)"><code>open()</code></a>.</p> - -<h5 id="Parameters">Parameters</h5> - -<p><strong>outputStream : flux</strong><br> - Le flux de support, un <a href="/fr/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIOutputStream"><code>nsIOutputStream</code></a>.</p> - -<h2 id="ByteReader">ByteReader</h2> - -<h3 id="Méthodes">Méthodes</h3> - -<h4 class="addon-sdk-api-name" id="close()"><code>close()</code></h4> - -<p>Ferme à la fois le flux et son flux de support. Si le flux est déjà fermé, une exception est levée.</p> - -<h4 class="addon-sdk-api-name" id="read(numBytes)"><code>read(numBytes)</code></h4> - -<p>Lit une chaîne à partir du flux. Si le flux est fermé, une exception est levée.</p> - -<h5 id="Parameters_2">Parameters</h5> - -<p><strong>numBytes: nombre </strong> <être> Le nombre d'octets à lire. Sinon donné, la totalité du flux est lu.</p> - -<h5 id="Retours">Retours</h5> - -<p><strong>string </strong>: Une chaîne contenant les octets lus. Si le flux est finit, retourne une chaîne vide.</p> - -<h3 id="Propriétés">Propriétés</h3> - -<h4 class="addon-sdk-api-name" id="closed"><code>closed</code></h4> - -<p>Vrai si le flux est fermé.</p> - -<h2 id="ByteWriter">ByteWriter</h2> - -<h3 id="Méthodes_2">Méthodes</h3> - -<h4 class="addon-sdk-api-name" id="close()_2"><code>close()</code></h4> - -<p>Ferme à la fois le flux et son flux de support. Si le flux est déjà fermé, une exception est levée.</p> - -<h4 class="addon-sdk-api-name" id="write(str)"><code>write(str)</code></h4> - -<p>Ecrit une chaîne dans le flux. Si le flux est fermé, une exception est levée.</p> - -<h5 id="Paramètres_2">Paramètres</h5> - -<p>str: string La chaîne à écrire .</p> - -<h3 id="Propriétés_2">Propriétés</h3> - -<h4 class="addon-sdk-api-name" id="closed_2"><code>closed</code></h4> - -<p>Vrai si le flux est fermé.</p> diff --git a/files/fr/mozilla/add-ons/sdk/low-level_apis/io_file/index.html b/files/fr/mozilla/add-ons/sdk/low-level_apis/io_file/index.html deleted file mode 100644 index 51900f5799..0000000000 --- a/files/fr/mozilla/add-ons/sdk/low-level_apis/io_file/index.html +++ /dev/null @@ -1,196 +0,0 @@ ---- -title: io/file -slug: Mozilla/Add-ons/SDK/Low-Level_APIs/io_file -translation_of: Archive/Add-ons/Add-on_SDK/Low-Level_APIs/io_file ---- -<p>{{AddonSidebar}}</p> - -<div class="note"> -<p>Expérimental</p> -</div> - -<p><span class="seoSummary">Permet d'accéder au système de fichiers local.</span></p> - -<h2 id="Utilisation">Utilisation</h2> - -<h3 id="Paths">Paths</h3> - -<p>Les specifications Path de cette API sont spécifiques à l'OS. Cela signifie que les chemins Windows sont spécifiés en utilisant le séparateur antislash (<code>\</code>), et sur les systèmes de type Unix comme Linux et OS X les slash sont utilisés (<code>/</code>).</p> - -<p>To ensure your add-on works for everyone, generate paths using the <a href="/en-US/Add-ons/SDK/Low-Level_APIs/io_file#join(...)"><code>join</code></a> function. Unfortunately this API does not currently provide a way to obtain an absolute base path which you could then use with <code>join</code>. For now, you need to <a href="/en-US/Add-ons/SDK/Tutorials/Chrome_Authority"><code>require("chrome")</code></a> and use the XPCOM directory service as described in <a href="/en-US/Add-ons/Code_snippets/File_I_O">this article about File I/O</a>.</p> - -<p>Note that if you do decide to hardcode Windows-style paths, be sure to escape backslashes in strings. For example, to specify the file at <code>C:\Users\Myk</code>, you need to use the string <code>"C:\\Users\\Myk"</code>, not <code>"C:\Users\Myk"</code>. Read more about <a href="/en-US/docs/Web/JavaScript/Guide/Values,_variables,_and_literals#Escaping_characters">escaping characters in strings</a>.</p> - -<h2 id="Globals">Globals</h2> - -<h3 id="Functions">Functions</h3> - -<h4 class="addon-sdk-api-name" id="basename(path)"><code>basename(path)</code></h4> - -<div class="note"> -<p>The <code>path</code> parameter must be an absolute path, relative paths will cause an error.</p> - -<p>Use the <a href="/en-US/Add-ons/SDK/Low-Level_APIs/fs_path">fs/path</a> module for relative path support.</p> -</div> - -<p>Returns the last component of the given path. For example, <code>basename("/foo/bar/baz")</code> returns <code>"baz"</code>. If the path has no components, the empty string is returned.</p> - -<h5 id="Parameters">Parameters</h5> - -<p><strong>path : string</strong><br> - The path of a file.</p> - -<h5 id="Returns">Returns</h5> - -<p><strong>string</strong> : The last component of the given path.</p> - -<h4 class="addon-sdk-api-name" id="dirname(path)"><code>dirname(path)</code></h4> - -<p>Returns the path of the directory containing the given file. If the file is at the top of the volume, the empty string is returned.</p> - -<h5 id="Parameters_2">Parameters</h5> - -<p><strong>path : string</strong><br> - The path of a file.</p> - -<h5 id="Returns_2">Returns</h5> - -<p><strong>string</strong> : The path of the directory containing the file.</p> - -<h4 class="addon-sdk-api-name" id="exists(path)"><code>exists(path)</code></h4> - -<p>Returns true if a file exists at the given path and false otherwise.</p> - -<h5 id="Parameters_3">Parameters</h5> - -<p><strong>path : string</strong><br> - The path of a file.</p> - -<h5 id="Returns_3">Returns</h5> - -<p><strong>boolean</strong> : True if the file exists and false otherwise.</p> - -<h4 class="addon-sdk-api-name" id="join(...)"><code>join(...)</code></h4> - -<p>Takes a variable number of strings, joins them on the file system's path separator, and returns the result.</p> - -<h5 id="Parameters_4">Parameters</h5> - -<p><strong>... : strings</strong><br> - A variable number of strings to join. The first string must be an absolute path.</p> - -<h5 id="Returns_4">Returns</h5> - -<p><strong>string</strong> : A single string formed by joining the strings on the file system's path separator.</p> - -<h4 class="addon-sdk-api-name" id="list(path)"><code>list(path)</code></h4> - -<p>Returns an array of file names in the given directory.</p> - -<h5 id="Parameters_5">Parameters</h5> - -<p><strong>path : string</strong><br> - The path of the directory.</p> - -<h5 id="Returns_5">Returns</h5> - -<p><strong>array</strong> : An array of file names. Each is a basename, not a full path.</p> - -<h4 class="addon-sdk-api-name" id="mkpath(path)"><code>mkpath(path)</code></h4> - -<p>Makes a new directory named by the given path. Any subdirectories that do not exist are also created. <code>mkpath</code> can be called multiple times on the same path.</p> - -<h5 id="Parameters_6">Parameters</h5> - -<p><strong>path : string</strong><br> - The path to create.</p> - -<h4 class="addon-sdk-api-name" id="open(path_mode)"><code>open(path, mode)</code></h4> - -<p>Returns a stream providing access to the contents of a file.</p> - -<h5 id="Parameters_7">Parameters</h5> - -<p><strong>path : string</strong><br> - The path of the file to open.</p> - -<p><strong>mode : string</strong><br> - An optional string, each character of which describes a characteristic of the returned stream.</p> - -<ul> - <li>If the string contains <code>"r"</code>, the file is opened in read-only mode.</li> - <li><code>"w"</code> opens the file in write-only mode.</li> - <li><code>"b"</code> opens the file in binary mode. If <code>"b"</code> is not present, the file is opened in text mode, and its contents are assumed to be UTF-8.</li> -</ul> - -<p>If <em><code>mode</code></em> is not given, <code>"r"</code> is assumed, and the file is opened in read-only text mode.</p> - -<p>Apart from these options, this API always passes the following options: <code>CREATE_FILE</code>, <code>TRUNCATE</code> (see <a href="https://dxr.mozilla.org/mozilla-central/source/nsprpub/pr/include/prio.h#550">https://dxr.mozilla.org/mozilla-central/source/nsprpub/pr/include/prio.h#550</a>). This means that:</p> - -<ul> - <li>if the file does not exist it is created</li> - <li>if the file exists, its length is truncated to zero</li> - <li>it is not possible to open the file in append mode.</li> -</ul> - -<h5 id="Returns_6">Returns</h5> - -<p><strong>stream</strong> : If the file is opened in text read-only <code>mode</code>, a <code>TextReader</code> is returned, and if text write-only mode, a <code>TextWriter</code> is returned. See <a href="/en-US/Add-ons/SDK/Low-Level_APIs/io_text-streams"><code>text-streams</code></a> for information on these text stream objects. If the file is opened in binary read-only <code>mode</code>, a <code>ByteReader</code> is returned, and if binary write-only mode, a <code>ByteWriter</code> is returned. See <a href="/en-US/Add-ons/SDK/Low-Level_APIs/io_byte-streams"><code>byte-streams</code></a> for more information on these byte stream objects. Opened files should always be closed after use by calling <code>close</code> on the returned stream.</p> - -<h4 class="addon-sdk-api-name" id="read(path_mode)"><code>read(path, mode)</code></h4> - -<p>Opens a file and returns a string containing its entire contents.</p> - -<h5 id="Parameters_8">Parameters</h5> - -<p><strong>path : string</strong><br> - The path of the file to read.</p> - -<p><strong>mode : string</strong><br> - An optional string, each character of which describes a characteristic of the returned stream. If the string contains <code>"b"</code>, the contents will be returned in binary mode. If <code>"b"</code> is not present or <code>mode</code> is not given, the file contents will be returned in text mode.</p> - -<h5 id="Returns_7">Returns</h5> - -<p><strong>string</strong> : A string containing the file's entire contents.</p> - -<h4 class="addon-sdk-api-name" id="remove(path)"><code>remove(path)</code></h4> - -<p>Removes a file from the file system. To remove directories, use <code>rmdir</code>.</p> - -<h5 id="Parameters_9">Parameters</h5> - -<p><strong>path : string</strong><br> - The path of the file to remove.</p> - -<h4 class="addon-sdk-api-name" id="rmdir(path)"><code>rmdir(path)</code></h4> - -<p>Removes a directory from the file system. If the directory is not empty, an exception is thrown.</p> - -<h5 id="Parameters_10">Parameters</h5> - -<p><strong>path : string</strong><br> - The path of the directory to remove.</p> - -<h4 class="addon-sdk-api-name" id="isFile(path)"><code>isFile(path)</code></h4> - -<p>Returns true only if this path specifies a file.</p> - -<pre class="brush: js">const fileIO = require("sdk/io/file"); - -let path = "/Users/Work/"; -let list = fileIO.list(path); - -for (i = 0; i < list.length; i++) { - let item = fileIO.join(path, list[i]); - if (fileIO.isFile(item)) { - console.log(item + " is a file"); - } - else { - console.log(item + " is a directory"); - } -}</pre> - -<h5 id="Parameters_11">Parameters</h5> - -<p><strong>path : string</strong><br> - The path of the object.</p> diff --git a/files/fr/mozilla/add-ons/sdk/low-level_apis/system_child_process/index.html b/files/fr/mozilla/add-ons/sdk/low-level_apis/system_child_process/index.html deleted file mode 100644 index 9c315edd9f..0000000000 --- a/files/fr/mozilla/add-ons/sdk/low-level_apis/system_child_process/index.html +++ /dev/null @@ -1,50 +0,0 @@ ---- -title: system/child_process -slug: Mozilla/Add-ons/SDK/Low-Level_APIs/system_child_process -translation_of: Archive/Add-ons/Add-on_SDK/Low-Level_APIs/system_child_process ---- -<div class="note"> -<p>Expérimentale</p> -</div> - -<p><span class="seoSummary">Une mise en œuvre de l'API <a href="http://nodejs.org/api/child_process.html" title="http://nodejs.org/api/child_process.html"> node.js <code>child_process</code></a>.</span></p> - -<p>Ce module vous permet d'exécuter un programme sous-jacent dans un nouveau processus. Il émule l'API node.js <code>child_process</code>, qui n'est pas documentées séparément. Cependant, il ya quelques différences :</p> - -<ul> - <li>utiliser le module <code>require("sdk/system/child_process")</code></li> - <li><code>fork()</code> n'est pas supporté</li> - <li><code>gid</code> et <code>uid</code> ne sont pas supportés</li> - <li>dans node.js, <code>spawn()</code> et <code>exec()</code> hériter des variables d'environnement du processus parent, par défaut. Les versions du SDK ne le font pas: alors quand vous spécifiez une commande, vous devez passer le chemin d'accès complet de la commande ou utilisez l'option <code>env</code> pour configurer l'environnement de processus enfant .</li> -</ul> - -<p>Voici un exemple qui adapte l'exemple de la documentation de node.js pour <a href="http://nodejs.org/api/child_process.html#child_process_child_process_spawn_command_args_options" title="http://nodejs.org/api/child_process.html#child_process_child_process_spawn_command_args_options"> <code>spawn()</code> </a>:</p> - -<pre class="brush: js">var child_process = require("sdk/system/child_process"); - -var ls = child_process.spawn('/bin/ls', ['-lh', '/usr']); - -ls.stdout.on('data', function (data) { - console.log('stdout: ' + data); -}); - -ls.stderr.on('data', function (data) { - console.log('stderr: ' + data); -}); - -ls.on('close', function (code) { - console.log('child process exited with code ' + code); -});</pre> - -<h3 id="Utilisation_child_process_dans_les_extensions_non-jpm">Utilisation child_process dans les extensions non-jpm</h3> - -<p> </p> - -<pre>// Import SDK Stuff -const COMMONJS_URI = 'resource://gre/modules/commonjs'; -const { require } = Cu.import(COMMONJS_URI + '/toolkit/require.js', {}); -var child_process = require('sdk/system/child_process'); - -// Use it in the same way as in the example above</pre> - -<p> </p> diff --git a/files/fr/mozilla/add-ons/sdk/low-level_apis/ui_button_action/index.html b/files/fr/mozilla/add-ons/sdk/low-level_apis/ui_button_action/index.html deleted file mode 100644 index f018689432..0000000000 --- a/files/fr/mozilla/add-ons/sdk/low-level_apis/ui_button_action/index.html +++ /dev/null @@ -1,659 +0,0 @@ ---- -title: ui/button/action -slug: Mozilla/Add-ons/SDK/Low-Level_APIs/ui_button_action -translation_of: Archive/Add-ons/Add-on_SDK/Low-Level_APIs/ui_button_action ---- -<p>{{AddonSidebar}}</p> - -<div class="note">Experimental</div> - -<p><span class="seoSummary">Ajouter un boutton dans l'interface utilisateur de Firefox. Avec ce module vous pourrez créer des bouttons contenant des icônes et répondant aux clic de la sourie.</span></p> - -<h2 id="Usage">Usage</h2> - -<h3 id="Créer_des_bouttons"><br> - Créer des bouttons</h3> - -<p>Pour créer un boutton, vous devez lui donné un identifiant (id), une icône et un libellé:</p> - -<pre class="brush: js">var { ActionButton } = require("sdk/ui/button/action"); - -var button = ActionButton({ - id: "my-button", - label: "my button", - icon: { - "16": "./firefox-16.png", - "32": "./firefox-32.png" - }, - onClick: function(state) { - console.log("button '" + state.label + "' was clicked"); - } - });</pre> - -<p>By default, the button appears in the Firefox toolbar:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/6803/action-button-toolbar.png" style="display: block; height: 201px; margin-left: auto; margin-right: auto; width: 381px;">However, users can move it to the Firefox menu panel using the <a href="https://support.mozilla.org/en-US/kb/customize-firefox-controls-buttons-and-toolbars">toolbar customization feature</a>:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/6809/action-button-menu.png" style="display: block; height: 573px; margin-left: auto; margin-right: auto; width: 381px;"></p> - -<h3 id="Badged_buttons">Badged buttons</h3> - -<div class="geckoVersionNote"> -<p>New in Firefox 36.</p> -</div> - -<p>You can add a "badge" to a button using its <code>badge</code> property. This can be a number or a string, and you can update it at any time. By default the badge's color is red, but you can set your own color using the <code>badgeColor</code> property, specified as a CSS <a href="/en-US/docs/Web/CSS/color_value"><code><color></code></a> value:</p> - -<pre class="brush: js">var { ToggleButton } = require("sdk/ui/button/toggle"); - -var button = ToggleButton({ - id: "my-button1", - label: "my button1", - icon: "./icon-16.png", - onChange: changed, - badge: 0, - badgeColor: "#00AAAA" - }); - -function changed(state) { - button.badge = state.badge + 1; - if (state.checked) { - button.badgeColor = "#AA00AA"; - } - else { - button.badgeColor = "#00AAAA"; - } -}</pre> - -<p><img alt="" src="https://mdn.mozillademos.org/files/9803/badge.png" style="display: block; height: 168px; margin-left: auto; margin-right: auto; width: 384px;"></p> - -<h3 id="Specifying_multiple_icons">Specifying multiple icons</h3> - -<p>You can specify just one icon, or multiple icons in different sizes.</p> - -<p>If you specify multiple icons, Firefox will select the best-fitting icon based on the device screen resolution and the place the icon appears. For example, in the screenshots above, Firefox uses the small icon when the button is in the toolbar and the large icon when the button is in the menu panel. Read more about specifying icons in the reference documentation for the <a href="/en-US/Add-ons/SDK/Low-Level_APIs/ui_button_action#ActionButton(options)"><code>ActionButton</code> constructor</a>.</p> - -<h3 id="Responding_to_click_events">Responding to click events</h3> - -<p>You can respond to click events by assigning a listener to the button's <a href="/en-US/Add-ons/SDK/Low-Level_APIs/ui_button_action#click"><code>click</code></a> event. You can do this in the button's constructor, by assigning the listener to the <code>onClick</code> option. You can also add, or change, the listener afterwards:</p> - -<pre class="brush: js">var { ActionButton } = require("sdk/ui/button/action"); - -var button = ActionButton({ - id: "my-button", - label: "my button", - icon: { - "16": "./firefox-16.png", - "32": "./firefox-32.png" - }, - onClick: firstClick - }); - -function firstClick(state) { - console.log("You clicked '" + state.label + "'"); - button.removeListener("click", firstClick); - button.on("click", subsequentClicks); -} - -function subsequentClicks(state) { - console.log("You clicked '" + state.label + "' again"); -}</pre> - -<p>The listener is passed a <code>state</code> object that contains all the button's <a href="/en-US/Add-ons/SDK/Low-Level_APIs/ui_button_action#Properties">properties</a>.</p> - -<p>You can generate click events programmatically with the button's <a href="/en-US/Add-ons/SDK/Low-Level_APIs/ui_button_action#click()"><code>click()</code></a> method.</p> - -<h3 id="Disabling_buttons">Disabling buttons</h3> - -<p>You can disable a button by setting its <a href="/en-US/Add-ons/SDK/Low-Level_APIs/ui_button_action#disabled"><code>disabled</code></a> property to <code>true</code>. A disabled button will not generate click events and its icon will appear disabled:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/6805/action-button-toolbar-disabled.png" style="display: block; height: 201px; margin-left: auto; margin-right: auto; width: 381px;"></p> - -<h3 id="Updating_state">Updating state</h3> - -<p>You can update all the button's <a href="/en-US/Add-ons/SDK/Low-Level_APIs/ui_button_action#Properties">properties</a> except for its <code>id</code>.</p> - -<p>By default, the button has global state: that is, its properties are the same across all open windows and tabs, and updating them updates the button's state across all open windows and tabs.</p> - -<p>You can set state to be specific to a window or tab using the button's <a href="/en-US/Add-ons/SDK/Low-Level_APIs/ui_button_action#state()"><code>state()</code></a> method. To set state like this, call <code>state()</code> with 2 parameters:</p> - -<ul> - <li>the first parameter is a <a href="/en-US/Add-ons/SDK/High-Level_APIs/windows"><code>window</code></a> or <a href="/en-US/Add-ons/SDK/High-Level_APIs/tabs#Tab"><code>tab</code></a> object or as a shorthand, the string "window" for the currently active window, or the string "tab" for the currently active tab</li> - <li>the second parameter is an object containing the state properties you wish to update.</li> -</ul> - -<p>Here's an add-on with a button that disables itself when you click it, but only for the currently active window:</p> - -<pre class="brush: js">var { ActionButton } = require("sdk/ui/button/action"); - -var button = ActionButton({ - id: "my-button", - label: "my button", - icon: { - "16": "./firefox-16.png", - "32": "./firefox-32.png" - }, - onClick: disableForThisWindow - }); - -function disableForThisWindow(state) { - button.state("window", { - disabled: true - }); -}</pre> - -<p>To fetch the state for a specific window or tab, call <code>state()</code>, passing in the window or tab you are interested in, and it will return the state:</p> - -<pre class="brush: js">var labelForActiveTab = button.state("tab").label;</pre> - -<p>To learn more about this, see the API documentation for <a href="/en-US/Add-ons/SDK/Low-Level_APIs/ui_button_action#state()"><code>state()</code></a>.</p> - -<h3 id="Destroying_buttons">Destroying buttons</h3> - -<p>When you've finished with a button, destroy it by calling its <a href="/en-US/Add-ons/SDK/Low-Level_APIs/ui_button_action#destroy()"><code>destroy()</code></a> method. After that, any attempts to access any of its properties or to call any of its methods will throw exceptions.</p> - -<h2 id="Globals">Globals</h2> - -<h3 id="Constructors">Constructors</h3> - -<h4 class="addon-sdk-api-name" id="ActionButton(options)"><code>ActionButton(options)</code></h4> - -<p>Creates an action button.</p> - -<h5 id="Parameters">Parameters</h5> - -<p><strong>options : object</strong><br> - Required options:</p> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Name</th> - <th scope="col">Type</th> - <th scope="col"> </th> - </tr> - </thead> - <tbody> - <tr> - <td>id</td> - <td>string</td> - <td> - <p>The button's ID. This is used internally to keep track of this button. The ID must be unique within your add-on.</p> - </td> - </tr> - <tr> - <td>label</td> - <td>string</td> - <td> - <p>The button's human-readable label. When the button is in the toolbar, this appears in a tooltip, and when the button is in the menu, it appears underneath the button as a legend.</p> - </td> - </tr> - <tr> - <td>icon</td> - <td>url, string, object</td> - <td> - <p>One or more icons for the button. You can specify this in one of three ways: </p> - - <ul> - <li><strong>as a resource:// URL</strong> pointing at an icon file in your add-on's "data" directory, typically constructed using <em><code>self.data.url(iconfile)</code></em></li> - <li><strong>as a relative path</strong>: a string in the form "./iconfile", where "iconfile" is a relative path to the icon file beginning in your add-on's "data" directory</li> - <li><strong>as an object, or dictionary of key-value pairs</strong>. Here you can specify a range of sizes for your button's icon. Each key-value pair specifies an icon: - <ul> - <li>each value specifies an image file as a resource:// URL or relative path.</li> - <li>each key must be a numeric string such as "16", or "32", which represents the size in pixels of the corresponding image.</li> - </ul> - </li> - </ul> - - <pre class="brush: js"> -var { ActionButton } = require('sdk/ui/button/action'); -var self = require("sdk/self"); - -var button1 = ActionButton({ - id: "my-button1", - label: "my button1", - icon: self.data.url("firefox-16.png") - }); - -var button2 = ActionButton({ - id: "my-button2", - label: "my button2", - icon: "./firefox-16.png" - }); - -var button3 = ActionButton({ - id: "my-button3", - label: "my button3", - icon: { - "16" : "./firefox-16.png", - "32" : "./firefox-32.png", - "64" : "./firefox-64.png" - } - });</pre> - - <p>If you use the final form, Firefox will automatically choose the best-fit icon for your button, depending on the device screen resolution and where the button is in the UI. On a device with a "normal" screen resolution, the toolbar has space for 18 x 18 pixels and the menu panel has space for 32 x 32 pixels. On a high resolution screen (such as a <a href="https://en.wikipedia.org/wiki/Retina_Display">HiDPI</a> display), these are doubled to 36 x 36 and 64 x 64 pixels, respectively. So you can supply three icon files:</p> - - <pre class="brush: js"> -icon: { - "16": "./addon16.png", - "32": "./addon32.png", - "64": "./addon64.png" -}</pre> - - <p>This will look fine in both toolbar and menu panel, and for both screen resolutions. However, the icons in the toolbar will not quite fill the space available, so you can instead supply four icons:</p> - - <pre class="brush: js"> -icon: { - "18": "./addon18.png", // toolbar icon non HiDPI - "32": "./addon32.png", // menu panel icon non HiDPI - "36": "./addon36.png", // toolbar icon HiDPI - "64": "./addon64.png" // menu panel icon HiDPI -} -</pre> - </td> - </tr> - </tbody> -</table> - -<p>Optional options:</p> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Name</th> - <th scope="col">Type</th> - <th scope="col"> </th> - </tr> - </thead> - <tbody> - <tr> - <td>disabled</td> - <td>boolean</td> - <td> - <p>Determines whether the button is disabled. Disabled buttons appear disabled in the UI, and do not respond to clicks. Defaults to false.</p> - </td> - </tr> - <tr> - <td>onClick</td> - <td>function</td> - <td> - <p>Click handler for the button.</p> - </td> - </tr> - <tr> - <td>badge</td> - <td>Number or String</td> - <td> - <div class="geckoVersionNote"> - <p>New in Firefox 36.</p> - </div> - - <p><a href="/en-US/Add-ons/SDK/Low-Level_APIs/ui_button_action#Badged_buttons">Badge</a> to attach to the button.</p> - - <p>The badge can contain as many characters (or digits) as you like, but only the first four will be displayed.</p> - </td> - </tr> - <tr> - <td>badgeColor</td> - <td>CSS <a href="/en-US/docs/Web/CSS/color_value"><color></a> value</td> - <td> - <div class="geckoVersionNote"> - <p>New in Firefox 36.</p> - </div> - - <p>Color for the <a href="/en-US/Add-ons/SDK/Low-Level_APIs/ui_button_action#Badged_buttons">badge</a>. If <code>badgeColor</code> is omitted and <code>badge</code> is specified, then the badge is red.</p> - </td> - </tr> - </tbody> -</table> - -<h2 id="ActionButton">ActionButton</h2> - -<h3 id="Methods">Methods</h3> - -<h4 class="addon-sdk-api-name" id="click()"><code>click()</code></h4> - -<p>Click the button. This will cause the button to generate the <code>click</code> event:</p> - -<pre class="brush: js">var { ActionButton } = require('sdk/ui/button/action'); - -var button = ActionButton({ - id: "my-button", - label: "my button", - icon: { - "16": "./firefox-16.png", - "32": "./firefox-32.png" - }, - onClick: function(state) { - console.log("You clicked '" + state.label + "'"); - } -}); - -button.click(); -</pre> - -<h4 class="addon-sdk-api-name" id="state()"><code>state()</code></h4> - -<p>Get or set the button's state for a specific window or tab.</p> - -<p>By default, a button's properties are global, meaning that they are the same across all open windows and tabs, and that if you update these properties, then they are updated across all windows and tabs. But sometimes you want a button attached to one window (or tab) to have a different state to a button attached to a different window (or tab). That's what <code>state()</code> is for.</p> - -<p>To set a button's properties for a specific window or tab, call <code>state()</code>, passing it the <a href="/en-US/Add-ons/SDK/High-Level_APIs/windows"><code>window</code></a> or <a href="/en-US/Add-ons/SDK/High-Level_APIs/tabs"><code>tab</code></a> you want the property to apply to, and the property value to set. A special shortcut allows you to pass the string "window" or "tab" to select the currently active window or tab.</p> - -<p>For example, if you have a button like this:</p> - -<pre class="brush: js">var { ActionButton } = require('sdk/ui/button/action'); - -var button = ActionButton({ - id: "my-button", - label: "default", - icon: "./firefox-16.png" -});</pre> - -<p>You can change its label for only the currently active window like this:</p> - -<pre class="brush: js">button.state("window", { - "label" : "window-specific label" -});</pre> - -<p>You can change its label for only the currently active tab like this:</p> - -<pre class="brush: js">button.state("tab", { - "label" : "tab-specific label" -}); -</pre> - -<p>To fetch the button state for a specific window or tab, call <code>state()</code>, passing it the window or tab you're interested in, and it will return a state object containing all the <a href="/en-US/Add-ons/SDK/Low-Level_APIs/ui_button_action#Properties">properties</a> for the button associated with that window or tab. Again. you can use the strings "window" or "tab" as shortcuts. For example, this add-on:</p> - -<ul> - <li>creates a button with a default label</li> - <li>opens a new tab</li> - <li>sets a new label only for the new tab</li> - <li>logs the result of accessing the global label, the window-specific label, and each of the 2 tab-specific labels</li> -</ul> - -<pre class="brush: js">var { ActionButton } = require('sdk/ui/button/action'); -var tabs = require("sdk/tabs"); - -var button = ActionButton({ - id: "my-button", - label: "default label", - icon: "./firefox-16.png" -}); - -tabs.open({ - url: "https://mozilla.org/", - onOpen: onNewTab -}); - -function onNewTab(tab) { - // Modify the label only for the new tab - button.state(tab, { - "label" : "tab-specific label" - }); - - // access the global label -> "default label" - console.log(button.label); - - // access the window's label -> "default label" - console.log(button.state("window").label); - - // access the first tab's label -> "default label" - console.log(button.state(tabs[0]).label); - - // access the second tab's label -> "tab-specific label" - console.log(button.state(tabs[1]).label); -}</pre> - -<p>Setting a property won't affect a more-specific property setting. For example, if you have a window with two tabs, and you set a tab-specific label, then set the window-specific label, this will not overwrite the tab-specific label:</p> - -<pre class="brush: js">var { ActionButton } = require('sdk/ui/button/action'); -var tabs = require("sdk/tabs"); - -var button = ActionButton({ - id: "my-button", - label: "default label", - icon: "./firefox-16.png" -}); - -tabs.open({ - url: "https://mozilla.org/", - onOpen: onNewTab -}); - -function onNewTab(tab) { - // Modify the label only for the new tab - button.state(tab, { - "label" : "tab-specific label" - }); - - // Modify the label for the window - button.state("window", { - "label" : "window-specific label" - }); - - // access the global label -> "default label" - console.log(button.label); - - // access the window's label -> "window-specific label" - console.log(button.state("window").label); - - // access the first tab's label -> "window-specific label" - console.log(button.state(tabs[0]).label); - - // access the second tab's label -> "tab-specific label" - console.log(button.state(tabs[1]).label); -}</pre> - -<p>The best way to think of this is as a tree: the global state is the root, followed by the state for each window, followed by the state for each tab in a window. If a property value for a node in the tree has not been set explicitly using <code>state()</code>, then it inherits its value from the next level up. So if you have one window containing two tabs, and have set the button's <code>label</code> only for tab A, then tab B will inherit <code>label</code>'s value from the window, and changing the value for the window will implicitly change the value for tab B.</p> - -<p>To delete a tab- or window-specific state, assign <code>null</code> to the property. After that, the property will inherit its value from the less-specific state as before:</p> - -<pre class="brush: js">var { ActionButton } = require('sdk/ui/button/action'); -var tabs = require("sdk/tabs"); - -var button = ActionButton({ - id: "my-button", - label: "default label", - icon: "./firefox-16.png" -}); - -tabs.open({ - url: "https://mozilla.org/", - onOpen: onNewTab -}); - -function onNewTab(tab) { - // Modify the label only for the new tab - button.state(tab, { - "label" : "tab-specific label" - }); - - // Modify the label for the window - button.state("window", { - "label" : "window-specific label" - }); - - // access the global label -> "default label" - console.log(button.label); - - // access the window's label -> "window-specific label" - console.log(button.state("window").label); - - // access the first tab's label -> "window-specific label" - console.log(button.state(tabs[0]).label); - - // access the second tab's label -> "tab-specific label" - console.log(button.state(tabs[1]).label); - - // Reset the tab-specific state - button.state(tab, null); - - // access the second tab's label -> "window-specific label" - console.log(button.state(tabs[1]).label); -}</pre> - -<p>Finally, you can pass the button itself into <code>state()</code>. This is an alternative way to set or get the global state. The reason for using this, rather than setting properties individually, is that you can define an object with the properties to set in one place, then apply it to the global state with a single line:</p> - -<pre class="brush: js">const defaultState = { - "label": "default label", - "icon": "./default.png", -} - -const differentState = { - "label": "different label", - "icon": "./different.png", -} - -var { ActionButton } = require("sdk/ui/button/action"); - -var button = ActionButton({ - id: "default-label", - label: "default label", - icon: "./default.png", - onClick: function(state) { - if (button.label == "default label") { - button.state(button, differentState); - } - else { - button.state(button, defaultState); - } - console.log(button.state(button).label); - console.log(button.state(button).icon); - } - }); -</pre> - -<h5 id="Parameters_2">Parameters</h5> - -<p><strong>target : button, tab, window, string</strong></p> - -<ul> - <li>To set or get the global state, this needs to be the <code>button</code> instance.</li> - <li>To get or set window-specific state, this needs to be the <a href="/en-US/Add-ons/SDK/High-Level_APIs/windows"><code>window</code></a> object for which you wish to set a specific state, or the string "window" to select the currently active window.</li> - <li>To get or set tab-specific state this needs to be the <a href="/en-US/Add-ons/SDK/High-Level_APIs/tabs"><code>tab</code></a> object for which you wish to set a specific state, or the string "tab" to select the currently active tab.</li> -</ul> - -<p><strong>state : object, null</strong><br> - Include this parameter only if you are setting state. It is an object containing all the properties you wish to set. For example:</p> - -<pre class="brush: js">button.state("tab", { - "label" : "tab-specific label", - "icon": "./tab-specific-icon.ico" -});</pre> - -<p>To reset state, pass null:</p> - -<pre class="brush: js">button.state("tab", null);</pre> - -<h5 id="Returns">Returns</h5> - -<p><strong>state</strong> : if you have passed the second <code>state</code> argument to make this function a setter, it returns <code>undefined</code>. Otherwise, it functions as a getter and returns the button's state for the specified object. This logs the state for the button associated with the currently active tab:</p> - -<pre class="brush: js">console.log(button.state("tab"));</pre> - -<p>This object represents a snapshot of the state at the time <code>state()</code> is called. It is not kept up to date with changes made to the button:</p> - -<pre class="brush: js">button.label = "foo"; -var state = button.state(button); -button.label = "bar"; -console.log(state.label) // foo</pre> - -<h4 class="addon-sdk-api-name" id="on()"><code>on()</code></h4> - -<p>Add a listener to an event emitted by the button. The button only emits one type of event, <code><a href="/en-US/Add-ons/SDK/Low-Level_APIs/ui_button_action#click">click</a></code>:</p> - -<pre class="brush: js">button.on("click", handleClick) - -function handleClick(state) { - console.log("button '" + state.label + "' was clicked"); -}</pre> - -<h5 id="Parameters_3">Parameters</h5> - -<p><strong>event : string</strong><br> - The event to listen for. Action buttons only emit one type of event, "<a href="/en-US/Add-ons/SDK/Low-Level_APIs/ui_button_action#click"><code>click</code></a>".</p> - -<p><strong>listener : function</strong><br> - Function that will be called on click.</p> - -<h4 class="addon-sdk-api-name" id="once()"><code>once()</code></h4> - -<p>Assign a listener to the first occurrence only of an event emitted by the button. The button only emits one type of event, <code><a href="/en-US/Add-ons/SDK/Low-Level_APIs/ui_button_action#click">click</a></code>. The listener is automatically removed after the first time the event is emitted.</p> - -<h5 id="Parameters_4">Parameters</h5> - -<p><strong>event : string</strong><br> - The event to listen for. Action buttons only emit one type of event, "<a href="/en-US/Add-ons/SDK/Low-Level_APIs/ui_button_action#click"><code>click</code></a>".</p> - -<p><strong>listener : function</strong><br> - Function that will be called on click.</p> - -<h4 class="addon-sdk-api-name" id="removeListener()"><code>removeListener()</code></h4> - -<p>Removes an event listener. For example, this code is equivalent to <a href="/en-US/Add-ons/SDK/Low-Level_APIs/ui_button_action#once()"><code>once()</code></a>:</p> - -<pre class="brush: js">button.on("click", handleClick) - -function handleClick(state) { - console.log("button '" + state.label + "' was clicked"); - button.removeListener("click", handleClick); -} </pre> - -<h5 id="Parameters_5">Parameters</h5> - -<p><strong>event : string</strong><br> - The event to listener is listening for. Action buttons only emit one type of event, "<a href="/en-US/Add-ons/SDK/Low-Level_APIs/ui_button_action#click"><code>click</code></a>".</p> - -<p><strong>listener : function</strong><br> - The listener to remove.</p> - -<h4 class="addon-sdk-api-name" id="destroy()"><code>destroy()</code></h4> - -<p>Destroy the button. After calling this function, the button will no longer appear in the UI, and accessing any of its properties or methods will throw an error.</p> - -<h3 id="Properties">Properties</h3> - -<h4 class="addon-sdk-api-name" id="id"><code>id</code></h4> - -<p>The button's unique ID. This is read-only.</p> - -<h4 class="addon-sdk-api-name" id="label"><code>label</code></h4> - -<p>The button's label.</p> - -<h4 class="addon-sdk-api-name" id="icon"><code>icon</code></h4> - -<p>The button's icon or icons, as a URL, relative path, or object containing a set of key-value pairs.</p> - -<h4 class="addon-sdk-api-name" id="disabled"><code>disabled</code></h4> - -<p>Boolean property indicating whether or not the button is disabled.</p> - -<h4 class="addon-sdk-api-name" id="badge"><code>badge</code></h4> - -<div class="geckoVersionNote"> -<p>New in Firefox 36.</p> -</div> - -<p>Value to attach to the button as a <a href="/en-US/Add-ons/SDK/Low-Level_APIs/ui_button_action#Badged_buttons">badge</a>. May be a number or a string.</p> - -<p>The badge can contain as many characters (or digits) as you like, but only the first four will be displayed.</p> - -<h4 class="addon-sdk-api-name" id="badgeColor"><code>badgeColor</code></h4> - -<div class="geckoVersionNote"> -<p>New in Firefox 36.</p> -</div> - -<p>Color for the <a href="/en-US/Add-ons/SDK/Low-Level_APIs/ui_button_action#Badged_buttons">badge</a>, specified as a CSS <a href="/en-US/docs/Web/CSS/color_value"><color></a> value.</p> - -<h3 id="Events">Events</h3> - -<h4 class="addon-sdk-api-name" id="click"><code>click</code></h4> - -<p>This event is emitted when a user clicks the button or your add-on calls the button's <code>click()</code> method.</p> - -<h5 id="Arguments">Arguments</h5> - -<p><strong>state</strong> : The button's state. This contains all the button's <a href="/en-US/Add-ons/SDK/Low-Level_APIs/ui_button_action#Properties">properties</a>.</p> diff --git a/files/fr/mozilla/add-ons/sdk/tools/cfx_to_jpm/index.html b/files/fr/mozilla/add-ons/sdk/tools/cfx_to_jpm/index.html deleted file mode 100644 index e8b50f5006..0000000000 --- a/files/fr/mozilla/add-ons/sdk/tools/cfx_to_jpm/index.html +++ /dev/null @@ -1,192 +0,0 @@ ---- -title: De cfx à jpm -slug: Mozilla/Add-ons/SDK/Tools/cfx_to_jpm -translation_of: Archive/Add-ons/Add-on_SDK/Tools/cfx_to_jpm ---- -<div class="note"> -<p>L'Add-on SDK inclut un outil de ligne de commande que vous utilisez pour initialiser, exécuter, tester, et empaqueter des add-ons. L'outil actuel est appelé jpm, il est basé sur <a href="http://nodejs.org/" title="http://nodejs.org/"> Node.js </a>. Il remplace l'outil cfx.</p> - -<p>Vous pouvez utiliser jpm à partir de Firefox 38.</p> - -<p>Cet article met en évidence les principales différences entre cfx et jpm.</p> -</div> - -<p><span class="seoSummary">Un guide pour travailler avec jpm si vous êtes déjà familier avec cfx.</span></p> - -<h2 id="Installation">Installation</h2> - -<p>cfx est basée sur Python et est distribué comme un fichier zip. jpm est baser sur Node.js qui est <a href="https://www.npmjs.org/package/jpm" title="https://www.npmjs.org/package/jpm"> distribué par npm </a>. Donc, pour jpm vous n'avez pas besoin de Python, mais vous avez besoin npm.</p> - -<p>Pour obtenir les mises de cfx vous deviez télécharger et extraire un fichier zip, tandis que pour obtenir la nouvelle version de jpm, utilisez <a href="https://docs.npmjs.com/cli/update" title="https://www.npmjs.org/doc/api/npm-update.html"> <code>npm update</code> </a>.</p> - -<p>Pour obtenir des instructions d'installation de jmp, consultez la section de l' <a href="/fr/docs/Mozilla/Add-ons/SDK/Tools/jpm#Installation" title="/fr/Add-ons/SDK/Tools/jpm#Installation">Installation</a> dans la référentiel de jmp.</p> - -<h2 id="Activation">Activation</h2> - -<p>Vous devez appeler <code>cfx activate</code> avant de pouvoir utiliser cfx, et cela ne fonctionne que dans le shell de commande de courant:. Si vous ouvrez un nouveau shell, vous devez appeler <code>activate</code> de nouveau</p> - -<p>Avec jpm, pas d'activation. Une fois qu'il est installé, vous pouvez simplement l'utiliser.</p> - -<h2 id="Incompatibilités">Incompatibilités</h2> - -<p>Dans la plupart cas, les add-ons créés avec cfx fonctionnent bien avec jpm. Cependant, il y a quelques différences que vous devez connaitre.</p> - -<h3 id="Add-on_ID">Add-on ID</h3> - -<p>L'ID de add-on est l'identifiant unique de votre add-on. Dans un xpi, c'est le<a href="https://developer.mozilla.org/fr/docs/Mozilla/Add-ons/Install_Manifests#id" title="https://developer.mozilla.org/en/install.rdf#id"> champ ID dans le fichier Manifest d'instalation de l'add-on</a> (install.rdf).</p> - -<p>L'identifiant est utilisé à des fins variées. Par exemple: <a href="http://addons.mozilla.org" title="http://addons.mozilla.org">addons.mozilla.org</a> l'utilise pour distinguer entre les nouvelles add-ons et les mises à jour d'add-ons existantes, et le module <a href="https://developer.mozilla.org/fr/docs/Mozilla/Add-ons/SDK/High-Level_APIs/simple-storage" title="https://developer.mozilla.org/fr/Add-ons/SDK/High-Level_APIs/simple-storage"><code>simple-storage</code></a> l'utilise pour déterminer lesquelles des données stockées appartiennent à tel add-on.</p> - -<h4 id="Manipulation_avec_l'ID_cfx">Manipulation avec l'ID cfx</h4> - -<p>Lorsque vous utilisez cfx, l'ID est tiré du <a href="/fr/docs/Mozilla/Add-ons/SDK/Tools/package_json#id" title="/fr/Add-ons/SDK/Tools/package_json#id">champ <code>id</code> dans le fichier de package.json de l'add-on</a>. Vous pouvez éditer ce fichier pour créer votre propre identité, mais si vous ne le faites pas, cfx va le générer pour vous, ce qui va ressembler à quelque chose comme "<code>jid1-F3BoogbjQJE67A</code>". <a href="https://developer.mozilla.org/fr/docs/Mozilla/Add-ons/Install_Manifests#id" title="https://developer.mozilla.org/fr/Add-ons/Install_Manifests#id">L'ID Add-on doit être l'un des deux types suivant </a>: un GUID ou une chaîne qui comprend un symbole <code>"@"</code>. Le SDK ne prévoit que le dernier format, et si l'ID dans package.json ne contient pas de "@", cfx xpi ajouter "<code>@jetpack</code>" dans le champ de package.json, ce qui transforme l'ID de l'add-on.</p> - -<p>Donc: si vous n'avez jamais manipulé l'ID lors de l'utilisation cfx, alors la valeur dans le package.json de votre add-on sera quelque chose comme "<code>jid1-F3BoogbjQJE67A</code>", et l'ID correspondant dans la install.rdf sera "<code>jid1-F3BoogbjQJE67A@jetpack</code>".</p> - -<h4 id="Manipulation_d'ID_avec_jpm">Manipulation d'ID avec jpm</h4> - -<p>Lorsque vous créez un xpi avec <code>jpm xpi</code>:</p> - -<ul> - <li>si le package.json ne comprend pas un champ <code>id</code>, alor l'ID dans l'install.rdf à la valeur de la <a href="/fr/docs/Mozilla/Add-ons/SDK/Tools/package_json#name" title="/fr/Add-ons/SDK/Tools/package_json#name"> champ <code>name</code></a> Préfixé par "@".</li> - <li>si le package.json inclut un champ <code>id</code>, et il contient «@», alors l'écriture est la même dans install.rdf.</li> - <li>si le package.json inclut un champ <code>id</code>, sans "@", jpm XPI soulève une erreur et le xpi ne sera pas construit.</li> -</ul> - -<h4 id="Ce_que_vous_devez_faire">Ce que vous devez faire</h4> - -<p>Tout cela signifie que: <em> si votre package.json contient un champ id, et sa valeur ne contient pas «@», alors vous devez ajouter "@jetpack» lors du passage à jpm </em>.</p> - -<p>Si vous faites cela, l'ID de l'add-on sera la même que l'id utilisée avec cfx.</p> - -<h3 id="Point_d'entrée">Point d'entrée</h3> - -<p>Le point d'entrée de l'add-on est le fichier qui est exécutée lorsque l'add-on a besoin de s'initialiser: par exemple, au démarrage de Firefox, ou lorsque l'add-on est installé, activé, ou mis à niveau. Avec cfx, la valeur par défaut à "lib/main.js", même si elle peut être réglée sur un autre fichier en utilisant le <code>main</code> champ dans le package.json .</p> - -<p>Dans jpm, le point d'entrée par défaut est "index.js". Donc, lors de la commutation vers jpm:</p> - -<ul> - <li>renommez vos "main.js" en "index.js" et déplacez les de "lib" vers le plus haut niveau</li> - <li>ou ajouter un champ <code>main</code> dans package.json avec pour valeur "lib/main.js".</li> -</ul> - -<h3 id="Chargement_des_modules">Chargement des modules</h3> - -<p>L'outil jpm utilise la même logique que <a href="http://nodejs.org/api/modules.html#modules_all_together" title="http://nodejs.org/api/modules.html#modules_all_together"> Node.js </a> pour déterminer comment résoudre l'argument <code>require()</code>. Dans la plupart des cas, c'est la même <a href="/fr/docs/Mozilla/Add-ons/SDK/Guides/Module_structure_of_the_SDK" title="/fr/Add-ons/SDK/Guides/Module_structure_of_the_SDK">logique que cfx</a>. Cependant, il existe quelques différences, parce certaines compatibilités ont été retirées.</p> - -<h4 id="Requérir_à_des_modules_locaux">Requérir à des modules locaux</h4> - -<p>Supposons que votre add-on est <a href="/fr/docs/Mozilla/Add-ons/SDK/Tutorials/Creating_Reusable_Modules" title="/fr/Add-ons/SDK/Tutorials/Creating_Reusable_Modules"> structuré en modules séparés </a>:</p> - -<ul class="directory-tree"> - <li>my-addon - <ul> - <li>lib - <ul> - <li>main.js</li> - <li>utils.js</li> - </ul> - </li> - </ul> - </li> -</ul> - -<p>Lorsque vous voulez utiliser un module "utils.js" dans "main.js", vous devez utiliser un chemin relatif à "main.js", et le préfixer avec "./" pour indiquer que c'est un chemin relatif:</p> - -<pre class="brush: js">var utils = require("./utils");</pre> - -<p>Cependant, avec cfx vous êtes également autorisé à omettre le "./":</p> - -<pre class="brush: js">var utils = require("utils"); // this will not work with jpm!</pre> - -<p>Cette seconde forme ne fonctionnera pas avec jpm.</p> - -<h4 id="Requérir_des_modules_de_code_de_test">Requérir des modules de code de test</h4> - -<p>Similarly, suppose you've written some tests for your add-on:</p> - -<ul class="directory-tree"> - <li>my-addon - <ul> - <li>lib - <ul> - <li>my-addon.js</li> - </ul> - </li> - <li>test - <ul> - <li>test-my-addon-js</li> - </ul> - </li> - </ul> - </li> -</ul> - -<p>Avec cfx, le code de "test-my-addon.js" peut importer "my-addon.js" en utilisant une déclaration de ce genre:</p> - -<pre class="brush: js">var my_addon = require("my-addon"); // ceci ne fonctionne pas avec jpm!</pre> - -<p>Avec jpm, vous devez spécifier le chemin vers «my-addon" explicitement, en utilisant un chemin relatif:</p> - -<pre class="brush: js">var my_addon = require("../lib/my-addon"); -</pre> - -<h3 id="Modules_tiers">Modules tiers</h3> - -<p>Le SDK a toujours soutenu les modules tiers: les développeurs peuvent écrire leurs propres modules qui étendent les API du SDK ou ajouter de nouvelles API, et d'autres add-on peuvent faire usage de ces modules de la même manière qu'ils utilisent les modules intégré au SDK.</p> - -<p>Dans jpm cette façon <a href="/fr/docs/Mozilla/Add-ons/SDK/Tutorials/Add_a_Menu_Item_to_Firefox" title="/fr/Add-ons/SDK/Tutorials/Add_a_Menu_Item_to_Firefox"> d'utiliser des modules tiers </a> ne fonctionne plus. Au lieu de cela, jpm n'accepte que les modules tiers hébergés sur la npm, vous pouvez les utiliser en les installant à partir de la npm dans l'arbre de répertoire de votre add-on. Voir le tutoriel<a href="/fr/docs/Mozilla/Add-ons/SDK/Tutorials/Using_third-party_modules_(jpm)" title="/fr/Add-ons/SDK/Tutorials/Using_third-party_modules_(jpm)"> utilisant des modules tiers avec jpm</a>.</p> - -<h2 id="Les_commandes_et_les_options_de_commande">Les commandes et les options de commande</h2> - -<h3 id="Commandes_définitivement_retiré">Commandes définitivement retiré</h3> - -<p>jpm ne soutient plus les <a href="/fr/docs/Mozilla/Add-ons/SDK/Tools/cfx#Internal_Commands" title="/fr/Add-ons/SDK/Tools/cfx#Internal_Commands">commandes cfx "interne"</a>.</p> - -<h3 id="Options_définitivement_retiré">Options définitivement retiré</h3> - -<p>jpm ne soutient plus :</p> - -<pre>--extra-packages ---use-config ---package-path ---pkgdir ---no-strip-xpi ---harness-option ---manifest-overload ---output-file ---templatedir ---keydir ---profiledir ---overload-modules ---static-args ---app ---no-run ---addons ---e10s ---logfile ---dependencies ---test-runner-pkg</pre> - -<p>Au lieu de <code>--profiledir</code> et de <code>--overload-modules</code>, utilisez <code>--profile</code> et <code>--overload</code></p> - -<h2 id="Champs_Package.json">Champs Package.json</h2> - -<p>Beaucoup de champs package.json <a href="/fr/docs/Mozilla/Add-ons/SDK/Tools/package_json" title="/fr/Add-ons/SDK/Tools/package_json"> </a> sont des commandes implicites de cfx. Dans jpm, nous avons supprimé le soutien de certains de ces domaines, et travaillons toujours sur le soutien des autres.</p> - -<h3 id="Champs_définitivement_retiré">Champs définitivement retiré</h3> - -<ul> - <li><a href="/fr/docs/Mozilla/Add-ons/SDK/Tools/package_json#data">data</a></li> - <li><a href="/fr/docs/Mozilla/Add-ons/SDK/Tools/package_json#fullName">fullName</a> - use <a href="/fr/docs/Mozilla/Add-ons/SDK/Tools/package_json#title">title</a> instead</li> - <li><a href="/fr/docs/Mozilla/Add-ons/SDK/Tools/package_json#lib">lib</a></li> - <li><a href="/fr/docs/Mozilla/Add-ons/SDK/Tools/package_json#packages">packages</a></li> - <li><a href="/fr/docs/Mozilla/Add-ons/SDK/Tools/package_json#tests">tests</a></li> - <li><a href="/fr/docs/Mozilla/Add-ons/SDK/Tools/package_json#icon64">icon64</a></li> -</ul> - -<h2 id="Echappement_dans_Package.json">Echappement dans Package.json</h2> - -<p>Où avec cfx vous auriez dû échapper avec 2 voir 3 barres obliques inverses (\), jpm n'en a besoin que d'une.</p> - -<p> </p> diff --git a/files/fr/mozilla/add-ons/sdk/tools/index.html b/files/fr/mozilla/add-ons/sdk/tools/index.html deleted file mode 100644 index 89f1db963b..0000000000 --- a/files/fr/mozilla/add-ons/sdk/tools/index.html +++ /dev/null @@ -1,13 +0,0 @@ ---- -title: Tools -slug: Mozilla/Add-ons/SDK/Tools -tags: - - Add-on SDK - - CFX - - JPM - - TopicStub -translation_of: Archive/Add-ons/Add-on_SDK/Tools ---- -<p>Les articles répertoriés ici fournissent une référence pour les outils du SDK:</p> - -<p>{{ LandingPageListSubpages ("/en-US/Add-ons/SDK/Tools", 7) }}</p> diff --git a/files/fr/mozilla/add-ons/sdk/tools/jpm/index.html b/files/fr/mozilla/add-ons/sdk/tools/jpm/index.html deleted file mode 100644 index c079f3b0b5..0000000000 --- a/files/fr/mozilla/add-ons/sdk/tools/jpm/index.html +++ /dev/null @@ -1,600 +0,0 @@ ---- -title: jpm -slug: Mozilla/Add-ons/SDK/Tools/jpm -translation_of: Archive/Add-ons/Add-on_SDK/Tools/jpm ---- -<div class="note"> -<p>Vous pouvez utiliser <code>jpm</code> pour Firefox 38 et au-delà.</p> - -<p>Cet article est la référence pour jpm.</p> -</div> - -<p><span class="seoSummary">The Node-based replacement for <a href="/en-US/Add-ons/SDK/Tools/cfx">cfx</a>. Enables you to test, run, and package add-ons.</span></p> - -<p>Voir aussi le <a href="/fr/docs/Mozilla/Add-ons/SDK/Tutorials/Getting_Started_%28jpm%29" title="/fr/Add-ons/SDK/Tutorials/Getting_Started_%28jpm%29">tutoriel jpm</a> pour débuter.</p> - -<p>jpm usage is:</p> - -<pre class="brush: bash">jpm [command] [options] -</pre> - -<p>jpm supports the following global options:</p> - -<pre class="brush: bash">-h, --help - show a help message and exit --V, --version - print the jpm version number -</pre> - -<h2 id="Installation">Installation</h2> - -<p>jpm is distributed using the node package manager <a class="external external-icon" href="https://www.npmjs.org/package/jpm">npm</a>, so to get jpm you need to have npm installed, if you haven't already. npm is included in Node.js. To install npm, you can either visit <a class="external external-icon" href="http://nodejs.org/">nodejs.org</a> and download the latest binary or if you have a package manager like APT installed on your system, you might want to use this package manager to install npm. For example, if you are using an Ubuntu or Debian operating system, execute <code>sudo apt-get install nodejs </code>followed by <code>sudo apt-get install npm </code>in a terminal window.</p> - -<p>After that you can install jpm just as you would any other npm package:</p> - -<pre><code>npm install jpm --global</code></pre> - -<p>Depending on your setup, you might need to run this as an administrator:</p> - -<pre class="brush: bash"><code>sudo npm install jpm --global</code></pre> - -<p>Or, you can install jpm using git:</p> - -<pre>git clone https://github.com/mozilla-jetpack/jpm.git -cd jpm -npm install -npm link -</pre> - -<p><span style="line-height: 1.5;">À l'invite de commande, tapez:</span></p> - -<pre class="brush: bash"><code>jpm</code></pre> - -<p>You should see a screen summarizing the available jpm commands. Note that unlike cfx, jpm is available in every command prompt you start, as long as you installed it with the <code>--global</code> flag.</p> - -<p>If you get an error message saying <em>/usr/bin/env: node: No such file or directory</em> and you have installed nodejs through a package manager, nodejs may have been installed in the wrong directory. A <a href="http://stackoverflow.com/questions/20886217/browserify-error-usr-bin-env-node-no-such-file-or-directory">corresponding topic at stackoverflow.org</a> might help you to solve this problem. Basically, you can solve it by creating a symlink to the node:</p> - -<pre class="lang-js prettyprint prettyprinted"><code><span class="pln">sudo ln </span><span class="pun">-</span><span class="pln">s </span><span class="str">"$(which nodejs)"</span><span class="pln"> </span><span class="pun">/</span><span class="pln">usr</span><span class="pun">/</span><span class="pln">bin</span><span class="pun">/</span><span class="pln">node</span></code></pre> - -<h3 id="Problems">Problems?</h3> - -<p>If you don't see this, ask for help. SDK users and project team members discuss problems and proposals on the <a class="external external-icon" href="http://groups.google.com/group/mozilla-labs-jetpack/topics">project mailing list</a>. Someone else may have had the same problem you do, so try searching the list. You're welcome to post a question, too. You can also chat with other SDK users in <a class="external external-icon" href="http://mibbit.com/?channel=%23jetpack&server=irc.mozilla.org">#jetpack</a> on <a class="external external-icon" href="http://irc.mozilla.org/">Mozilla's IRC network</a>.</p> - -<h2 id="Command_reference">Command reference</h2> - -<p>There are six jpm commands:</p> - -<table class="fullwidth-table standard-table"> - <tbody> - <tr> - <td style="width: 20%;"><a href="/en-US/Add-ons/SDK/Tools/jpm#jpm_init"><code>jpm init</code></a></td> - <td>Create a skeleton add-on as a starting point for your own add-on.</td> - </tr> - <tr> - <td><a href="/en-US/Add-ons/SDK/Tools/jpm#jpm_run"><code>jpm run</code></a></td> - <td>Launch an instance of Firefox with your add-on installed.</td> - </tr> - <tr> - <td><a href="/en-US/Add-ons/SDK/Tools/jpm#jpm_test"><code>jpm test</code></a></td> - <td>Runs your add-on's unit tests.</td> - </tr> - <tr> - <td><a href="/en-US/Add-ons/SDK/Tools/jpm#jpm_xpi"><code>jpm xpi</code></a></td> - <td>Package your add-on as an <a href="https://developer.mozilla.org/en/XPI">XPI</a> file, which is the install file format for Firefox add-ons.</td> - </tr> - <tr> - <td><a href="/en-US/Add-ons/SDK/Tools/jpm#jpm_post"><code>jpm post</code></a></td> - <td>Package your add-on as an <a href="https://developer.mozilla.org/en/XPI">XPI</a> file, then post it to some url.</td> - </tr> - <tr> - <td><a href="/en-US/Add-ons/SDK/Tools/jpm#jpm_watchpost"><code>jpm watchpost</code></a></td> - <td>Package your add-on as an <a href="https://developer.mozilla.org/en/XPI">XPI</a> file whenever there is a file changed, and post that to some url.</td> - </tr> - <tr> - <td><a href="/en-US/Add-ons/SDK/Tools/jpm#jpm_sign"><code>jpm sign</code></a></td> - <td>Package your add-on as an <a href="https://developer.mozilla.org/en/XPI">XPI</a> file, then retrieve a new XPI signed by Mozilla.</td> - </tr> - </tbody> -</table> - -<h3 id="jpm_init">jpm init</h3> - -<p>This command initializes a new add-on from scratch.</p> - -<p>Create a new directory, change into it, and run <code>jpm init</code>.</p> - -<pre class="brush: bash">mkdir my-addon -cd my-addon -jpm init</pre> - -<p>You'll then be asked to supply some information about your add-on: this will be used to create your add-on's <a href="https://developer.mozilla.org/en-US/Add-ons/SDK/Tools/package_json">package.json</a> file.</p> - -<ul> - <li><a href="https://developer.mozilla.org/en-US/Add-ons/SDK/Tools/package_json#title">title</a></li> - <li><a href="https://developer.mozilla.org/en-US/Add-ons/SDK/Tools/package_json#name">name</a>: this defaults to the name of the directory in which you are running <code>jpm init</code>. Unless an <a href="https://developer.mozilla.org/en-US/Add-ons/SDK/Tools/package_json#id"><code>id</code></a> field is present in package.json, jpm will prepend "@" to <code>name</code> and use the result as the <a href="https://developer.mozilla.org/en-US/Add-ons/Install_Manifests#id"><code>id</code> field in the add-on's install manifest</a>.</li> - <li><a href="https://developer.mozilla.org/en-US/Add-ons/SDK/Tools/package_json#version">version</a></li> - <li><a href="https://developer.mozilla.org/en-US/Add-ons/SDK/Tools/package_json#description">description</a></li> - <li><a href="https://developer.mozilla.org/en-US/Add-ons/SDK/Tools/package_json#main">entry point</a> (which maps to "main" in package.json)</li> - <li><a href="https://developer.mozilla.org/en-US/Add-ons/SDK/Tools/package_json#author">author</a></li> - <li><a href="https://developer.mozilla.org/en-US/Add-ons/SDK/Tools/package_json#engines">engines</a> (supported applications)</li> - <li><a href="https://developer.mozilla.org/en-US/Add-ons/SDK/Tools/package_json#license">license</a></li> -</ul> - -<p>Most of these fields have a default, which is shown in brackets after the question. If you just press Enter, your add-on will get the default value.</p> - -<p>Once you've supplied a value or accepted the default for these properties, you'll be shown the complete contents of "package.json" and asked to accept it.</p> - -<p>Then jpm will create an skeleton add-on, as a starting point for your own add-on development, with the following file structure:</p> - -<ul class="directory-tree"> - <li>my-addon - <ul> - <li>index.js</li> - <li>package.json</li> - <li>test - <ul> - <li>test-index.js</li> - </ul> - </li> - </ul> - </li> -</ul> - -<h3 id="jpm_run">jpm run</h3> - -<p>This command runs a new instance of Firefox with the add-on installed:</p> - -<pre class="brush: bash">jpm run</pre> - -<p><code>jpm run</code> accepts the following options:</p> - -<table class="fullwidth-table standard-table"> - <tbody> - <tr> - <td style="width: 30%;"><code>-b --binary BINARY</code></td> - <td> - <p>Use the version of Firefox specified in BINARY. BINARY may be specified as a full path or as a path relative to the current directory.</p> - - <pre class="brush: bash"> -jpm run -b /path/to/Firefox/Nightly</pre> - See <a href="/en-US/Add-ons/SDK/Tools/jpm#Selecting_a_browser_version">Selecting a browser version</a>.</td> - </tr> - <tr> - <td><code>--binary-args CMDARGS</code></td> - <td> - <p>Pass <a href="/en-US/docs/Mozilla/Command_Line_Options">extra arguments</a> to Firefox.</p> - - <p>For example, to pass the <code>-jsconsole</code> argument to Firefox, which will launch the <a href="/en-US/docs/Tools/Browser_Console">Browser Console</a>, try the following:</p> - - <pre class="brush: bash"> -jpm run --binary-args -jsconsole</pre> - - <p>To pass multiple arguments, or arguments containing spaces, quote them:</p> - - <pre class="brush: bash"> -jpm run --binary-args '-url mzl.la -jsconsole'</pre> - </td> - </tr> - <tr> - <td><code>--debug</code></td> - <td>Run the <a href="/en-US/Add-ons/Add-on_Debugger">add-on debugger</a> attached to the add-on.</td> - </tr> - <tr> - <td><code>-o --overload PATH</code></td> - <td> - <p>Rather than use the SDK modules built into Firefox, use the modules found at PATH. If <code>-o</code> is specified and PATH is omitted, jpm will look for the JETPACK_ROOT environment variable and use its value as the path.</p> - - <p>See <a href="/en-US/Add-ons/SDK/Tools/jpm#Overloading_the_built-in_modules">Overloading the built-in modules</a> for more information.</p> - </td> - </tr> - <tr> - <td><code>-p --profile=<code> PROFILE</code></code></td> - <td> - <p>By default, jpm uses a clean temporary Firefox <a href="http://support.mozilla.com/en-US/kb/profiles">profile</a> each time you call jpm run. Use the <code>--profile</code> option to instruct jpm to launch Firefox with an existing profile.</p> - - <p>The PROFILE value may be a profile name or the path to the profile.</p> - - <p>See <a href="/en-US/Add-ons/SDK/Tools/jpm#Using_profiles">Using profiles</a> for more information.</p> - </td> - </tr> - <tr> - <td><code>-v --verbose</code></td> - <td>Verbose operation.</td> - </tr> - <tr> - <td><code>--no-copy</code></td> - <td> - <div class="warning">Use with caution because <code>jpm run|test</code> changes many preferences, never use with your main profile.</div> - - <div class="note">This only applies when <code>--profile</code> is used.</div> - Disables the copying of the profile used, which allows one to reuse a profile.</td> - <td> </td> - </tr> - </tbody> -</table> - -<h3 id="jpm_test">jpm test</h3> - -<p>Use this command to run an add-on's unit tests. It will:</p> - -<ul> - <li>look for a directory called "test" under the add-on's root</li> - <li>open every file in there whose name starts with "test-" (note the hyphen after "test" in the filename. <code>jpm test</code> will include a file called "test-myCode.js", but will exclude files called "test_myCode.js" or "testMyCode.js")</li> - <li>call every function exported from that file whose name starts with "test"</li> -</ul> - -<pre class="brush: bash">jpm test -</pre> - -<p>See the <a href="https://developer.mozilla.org/en-US/Add-ons/SDK/Tutorials/Unit_testing">tutorial on unit testing</a> and the <a href="https://developer.mozilla.org/en-US/Add-ons/SDK/Low-Level_APIs/test_assert">reference documentation for the <code>assert</code> module</a> for more details on this.</p> - -<p><code>jpm test</code> accepts the following options:</p> - -<table class="fullwidth-table standard-table"> - <tbody> - <tr> - <td><code>-b --binary BINARY</code></td> - <td> - <p>Use the version of Firefox specified in BINARY. BINARY may be specified as a full path or as a path relative to the current directory.</p> - - <pre class="brush: bash"> -jpm test -b /path/to/Firefox/Nightly</pre> - - <p>See <a href="/en-US/Add-ons/SDK/Tools/jpm#Selecting_a_browser_version">Selecting a browser version</a>.</p> - </td> - </tr> - <tr> - <td><code>--binary-args CMDARGS</code></td> - <td> - <p>Pass <a href="http://kb.mozillazine.org/Command_line_arguments">extra arguments</a> to Firefox.</p> - - <p>For example, to pass the <code>-jsconsole</code> argument to Firefox, which will launch the <a href="/en-US/docs/Tools/Browser_Console">Browser Console</a>, try the following:</p> - - <pre class="brush: bash"> -jpm test --binary-args -jsconsole</pre> - - <p>To pass multiple arguments, or arguments containing spaces, quote them:</p> - - <pre class="brush: bash"> -jpm test --binary-args '-url mzl.la -jsconsole'</pre> - </td> - </tr> - <tr> - <td><code>--debug</code></td> - <td>Run the <a href="/en-US/Add-ons/Add-on_Debugger">add-on debugger</a> attached to the add-on.</td> - </tr> - <tr> - <td style="width: 30%;"><code>-f --filter FILE[:TEST]</code></td> - <td> - <p>Only run tests whose filenames match FILE and optionally match TEST, both regexps.</p> - - <pre class="brush: bash"> -jpm test --filter base64:btoa</pre> - - <p>The above command only runs tests in files whose names contain "base64", and in those files only runs tests whose names contain "btoa".</p> - </td> - </tr> - <tr> - <td style="width: 30%;"><code>-o --overload PATH</code></td> - <td> - <p>Rather than use the SDK modules built into Firefox, use the modules found at PATH. If <code>-o</code> is specified and PATH is omitted, jpm will look for the JETPACK_ROOT environment variable and use its value as the path.</p> - - <p>See <a href="/en-US/Add-ons/SDK/Tools/jpm#Overloading_the_built-in_modules">Overloading the built-in modules</a> for more information.</p> - </td> - </tr> - <tr> - <td style="width: 30%;"><code>-p --profile<code> PROFILE</code></code></td> - <td> - <p>By default, jpm uses a clean temporary Firefox <a href="http://support.mozilla.com/en-US/kb/profiles">profile</a> each time you call jpm run. Use the <code>--profile</code> option to instruct jpm to launch Firefox with an existing profile.</p> - - <p>The PROFILE value may be a profile name or the path to the profile.</p> - - <p>See <a href="/en-US/Add-ons/SDK/Tools/jpm#Using_profiles">Using profiles</a> for more information.</p> - </td> - </tr> - <tr> - <td><code>--stop-on-error</code></td> - <td> - <p>By default jpm test keeps running tests even after tests fail. Specify <code>--stop-on-error</code> to stop running tests after the first failure:</p> - - <pre class="brush: bash"> -jpm test --stop-on-error</pre> - </td> - </tr> - <tr> - <td><code>--tbpl</code></td> - <td>Print test output in <a href="https://treeherder.mozilla.org/">Treeherder</a> format</td> - </tr> - <tr> - <td><code>--times NUMBER</code></td> - <td> - <p>Run tests NUMBER of times:</p> - - <pre class="brush: bash"> -jpm test --times 2</pre> - </td> - </tr> - <tr> - <td><code>-v --verbose</code></td> - <td>Verbose operation.</td> - </tr> - <tr> - <td><code>--no-copy</code></td> - <td> - <div class="warning">Use with caution because <code>jpm run|test</code> changes many preferences, never use with your main profile.</div> - - <div class="note">This only applies when <code>--profile</code> is used.</div> - Disables the copying of the profile used, which allows one to reuse a profile.</td> - </tr> - </tbody> -</table> - -<h3 id="jpm_xpi">jpm xpi</h3> - -<p>This command packages the add-on as an <a href="https://developer.mozilla.org/en/XPI">XPI</a> file, which is the install file format for Mozilla add-ons.</p> - -<pre class="brush: bash">jpm xpi</pre> - -<p>It looks for a file called <code>package.json</code> in the current directory and creates the corresponding XPI file. It ignores any ZIPs or XPIs in the add-on's root, and any test files. It includes all other files. If you want to exclude extra files, see <a href="en-US/Add-ons/SDK/Tools/jpmignore">the .jpmignore file</a>.</p> - -<p>Once you have built an XPI file you can distribute your add-on by submitting it to <a href="http://addons.mozilla.org">addons.mozilla.org</a>.</p> - -<p><code>jpm xpi</code> accepts the following option:</p> - -<table class="fullwidth-table standard-table"> - <tbody> - <tr> - <td><code>-v --verbose</code></td> - <td> - <p>Verbose operation:</p> - - <pre class="brush: bash"> -jpm xpi -v</pre> - </td> - </tr> - </tbody> -</table> - -<h3 id="jpm_post">jpm post</h3> - -<p>This command packages the add-on as an <a href="https://developer.mozilla.org/en/XPI">XPI</a> file then posts it to some url.</p> - -<pre class="brush: bash">jpm post</pre> - -<p>It looks for a file called <code>package.json</code> in the current directory and creates a XPI file with which to post to the <code>--post-url</code>.</p> - -<p><code>jpm post</code> accepts the following options:</p> - -<table class="fullwidth-table standard-table"> - <tbody> - <tr> - <td><code>--post-url URL</code></td> - <td> - <p>The url to post the extension to after creating a XPI.</p> - - <pre class="brush: bash"> -jpm post --post-url http://localhost:8888/</pre> - - <p>See <a href="https://www.npmjs.com/package/jpm#using-post-and-watchpost">Using Post and Watchpost</a> for more information.</p> - </td> - </tr> - <tr> - <td><code>-v --verbose</code></td> - <td> - <p>Verbose operation:</p> - - <pre class="brush: bash"> -jpm post --post-url http://localhost:8888/ -v</pre> - </td> - </tr> - </tbody> -</table> - -<h3 id="jpm_watchpost">jpm watchpost</h3> - -<p>This command packages the add-on as an <a href="https://developer.mozilla.org/en/XPI">XPI</a> file then posts it to some url whenever a file in the current working directory changes.</p> - -<pre class="brush: bash">jpm watchpost</pre> - -<p>Creates a XPI whenever a file in the current working directory changes and posts that to the <code>--post-url</code>.</p> - -<p><code>jpm watchpost</code> accepts the following options:</p> - -<table class="fullwidth-table standard-table"> - <tbody> - <tr> - <td><code>--post-url URL</code></td> - <td> - <p>The url to post the extension to after creating a XPI.</p> - - <pre class="brush: bash"> -jpm watchpost --post-url http://localhost:8888/</pre> - - <p>See <a href="https://www.npmjs.com/package/jpm#using-post-and-watchpost">Using Post and Watchpost</a> for more information.</p> - </td> - </tr> - <tr> - <td><code>-v --verbose</code></td> - <td> - <p>Verbose operation:</p> - - <pre class="brush: bash"> -jpm watchpost --post-url http://localhost:8888/ -v</pre> - </td> - </tr> - </tbody> -</table> - -<h3 id="jpm_sign">jpm sign</h3> - -<div class="note"> -<p>This feature is only supported from jpm 1.0.4 onwards.</p> -</div> - -<p>This command retrieves a new <a href="/en-US/docs/XPI">XPI</a> for your add-on signed by Mozilla. This allows you to <a href="/en-US/Add-ons/SDK/Tools/jpm#Supporting_updates_for_self-hosted_add-ons">self-host your add-on</a> so that users can install it without error when <a href="https://wiki.mozilla.org/Add-ons/Extension_Signing">signed add-ons are required</a>.</p> - -<pre class="brush: bash">jpm sign --api-key ${AMO_API_KEY} --api-secret ${AMO_API_SECRET}</pre> - -<p>This creates an <a href="/en-US/docs/XPI">XPI</a>, submits it to the <a href="https://addons.mozilla.org/">addons.mozilla.org</a> <a href="http://olympia.readthedocs.org/en/latest/topics/api/signing.html">signing API</a>, then downloads a new signed <a href="/en-US/docs/XPI">XPI</a> to the working directory if it passes validation. Here are some possible outcomes of running the sign command:</p> - -<ul> - <li>Your add-on passed validation, was signed by Mozilla, and a new signed <a href="/en-US/docs/XPI">XPI</a> was downloaded to your working directory.</li> - <li>Your add-on failed validation, was not signed, and you got a link to a detailed report. After fixing the validation errors, you can run the command again.</li> - <li>Your add-on at this exact version number already exists so it was not signed. You will need to increment the version number in your <a href="/en-US/Add-ons/SDK/Tools/package_json">package.json</a> file and run the command again.</li> -</ul> - -<p>Under the hood, <code>jpm sign</code> creates an unlisted add-on inside <a href="https://addons.mozilla.org/">addons.mozilla.org</a> which means you must distribute the XPI file yourself in order for your users to install it. If you need to create a listed add-on, just <a href="https://addons.mozilla.org/en-US/developers/addon/submit/2">submit it directly to addons.mozilla.org</a> where it will be signed automatically. See the <a href="/en-US/docs/Extension_Versioning%2C_Update_and_Compatibility#Debugging_and_solving_problems">debugging</a> section if you're experiencing difficulty installing a signed add-on.</p> - -<p><code>jpm sign</code> accepts the following options:</p> - -<table class="fullwidth-table standard-table"> - <tbody> - <tr> - <td><code>--api-key API_KEY</code></td> - <td> - <p>API access key (string) generated on the <a href="https://addons.mozilla.org/en-US/developers/addon/api/key/">addons.mozilla.org key management page</a>.</p> - </td> - </tr> - <tr> - <td><code>--api-secret API_SECRET</code></td> - <td> - <p>API access secret (string) generated on the <a href="https://addons.mozilla.org/en-US/developers/addon/api/key/">addons.mozilla.org key management page</a>. This value should be guarded with care and never checked into version control. If your secret is compromised, another developer could upload add-ons to your account. You should revoke and regenerate compromised API credentials immediately.</p> - </td> - </tr> - <tr> - <td><code>--api-url-prefix http://.../api</code></td> - <td> - <p>An optional API URL prefix in case you'd like to use a pre-production signing API. Here is an example of using a dev instance of <a href="https://addons.mozilla.org/">addons.mozilla.org</a> :</p> - - <pre class="brush: bash"> -jpm sign ... --api-url-prefix https://addons-dev.allizom.org/api/v3</pre> - </td> - </tr> - </tbody> -</table> - -<h2 id="Techniques">Techniques</h2> - -<h3 id="Selecting_a_browser_version">Selecting a browser version</h3> - -<p>By default, <code>jpm run</code> and <code>jpm test</code> will run the release version of Firefox. You can instruct jpm to use a different version in one of two ways:</p> - -<ul> - <li> - <p>you can use the <code>-b</code> or <code>--binary</code> option to instruct jpm to run a different version of Firefox. You can supply a path to a specific binary:</p> - - <pre class="brush: bash">jpm run -b /path/to/Firefox/Nightly</pre> - - <p>As a shorthand for this, you can pass "nightly", "aurora", "beta", or "firefox" and jpm will look in the default location for these Firefox versions:</p> - - <pre class="brush: bash">jpm run -b nightly</pre> - </li> - <li> - <p>you can set the <code>JPM_FIREFOX_BINARY</code> environment variable with the path to the version of Firefox you want to run. When you invoke <code>jpm run</code> or <code>jpm test</code> without the <code>-b</code> option, jpm will first check <code>JPM_FIREFOX_BINARY</code>, and use this as the path if it is set.</p> - </li> -</ul> - -<h3 id="Using_.jpmignore_to_ignore_files">Using <code>.jpmignore</code> to ignore files</h3> - -<p>Using <code>.jpmignore</code> is similar to using <code>.gitignore</code> with <code>git</code>, <code>.hgignore</code> with Mercurial, or <code>.npmignore</code> with <code>npm</code>. By using this file you can let <code>jpm</code> know which files you would like it to ignore when building a <code>.xpi</code> file with <code>jpm xpi</code>.</p> - -<p>Here is an example:</p> - -<pre class="brush: bash"># Ignore .DS_Store files created by mac -.DS_Store - -# Ignore any zip or xpi files -*.zip -*.xpi -</pre> - -<p>A <code>.jpmignore</code> file with the above contents would ignore all zip files and <code>.DS_Store</code> files from the xpi generated by <code>jpm xpi</code>.</p> - -<h3 id="Using_profiles_2"><a name="Using_profiles">Using profiles</a></h3> - -<p>By default, <code>jpm run</code> uses a new profile each time it is executed. This means that any profile-specific data entered from one run of <code>jpm</code> will not, by default, be available in the next run.</p> - -<p>This includes, for example, any extra add-ons you installed, or your history, or any data stored using the <a href="/en-US/Add-ons/SDK/High-Level_APIs/simple-storage">simple-storage</a> API.</p> - -<p>To make <code>jpm</code> use a specific profile, pass the <code>--profile</code> option, specifying the name of the profile you wish to use, or the path to the profile.</p> - -<pre class="brush: bash">jpm run --profile boogaloo -</pre> - -<pre class="brush: bash">jpm run --profile path/to/boogaloo</pre> - -<p>If you supply <code>--profile</code> but its argument is not the name of or path to an existing profile, jpm will open the <a href="https://support.mozilla.org/en-US/kb/profile-manager-create-and-remove-firefox-profiles">profile manager</a>, enabling you to select and existing profile or create a new one:</p> - -<pre class="brush: bash">jpm run --profile i-dont-exist</pre> - -<h3 id="Developing_without_browser_restarts">Developing without browser restarts</h3> - -<p>Because <code>jpm run</code> restarts the browser each time you invoke it, it can be a little cumbersome if you are making very frequent changes to an add-on. An alternative development model is to use the <a href="https://addons.mozilla.org/en-US/firefox/addon/autoinstaller/" rel="noreferrer">Extension Auto-Installer</a> add-on: this listens for new XPI files on a specified port and installs them automatically. That way you can test new changes without needing to restart the browser:</p> - -<ul> - <li>make a change to your add-on</li> - <li>run <code>jpm post --post-url http://localhost:8888/</code>, to make a xpi and post it.</li> -</ul> - -<p>You could even automate this workflow with a simple script. For example:</p> - -<pre class="brush: bash">jpm watchpost --post-url http://localhost:8888/ -</pre> - -<p>Note that the logging level defined for the console is different when you use this method, compared to the logging level used when an add-on is run using <code>jpm run</code>. This means that if you want to see output from <a href="/en-US/Add-ons/SDK/Tutorials/Logging" rel="noreferrer"><code>console.log()</code></a> messages, you'll have to tweak a setting. See the documentation on <a href="/en-US/Add-ons/SDK/Tools/console#Logging_Levels" rel="noreferrer">logging levels</a> for the details on this.</p> - -<h3 id="Overloading_the_built-in_modules">Overloading the built-in modules</h3> - -<p>The SDK modules you use to implement your add-on are built into Firefox. When you run or package an add-on using <code>jpm run</code> or <code>jpm xpi</code>, the add-on will use the versions of the modules in the version of Firefox that hosts it.</p> - -<p>As an add-on developer, this is usually what you want. But if you're developing the SDK modules themselves, of course, it isn't. In this case you need to:</p> - -<ul> - <li>get a local copy of the SDK modules that you want: this usually means checking out the SDK from its <a href="https://github.com/mozilla/addon-sdk" rel="noreferrer">GitHub repo</a></li> - <li>set the <code>JETPACK_ROOT</code> environment variable to your local copy</li> - <li>pass the <code>-o</code> option to <code>jpm run</code> or <code>jpm xpi</code>:</li> -</ul> - -<pre>jpm run -o -</pre> - -<p>This instructs jpm to use the local copies of the SDK modules, not the ones in Firefox. If you don't want to set the <code>JETPACK_ROOT</code> environment variable, you can pass the location of your copy of the SDK modules along with <code>-o</code>:</p> - -<pre>jpm run -o "/path/to/SDK/"</pre> - -<h3 id="Supporting_updates_for_self-hosted_add-ons">Supporting updates for self-hosted add-ons</h3> - -<div class="note"> -<p>This feature is only supported from jpm 1.0.3 onwards.</p> -</div> - -<p>When you make updates to your add-on to add features or fix bugs, you'll want any previously installed versions of the add-on to update themselves to the new version.</p> - -<p>If you list your add-on on <a href="https://addons.mozilla.org/">addons.mozilla.org</a>, then all you have to do here is submit the new version; add-ons default to checking <a href="https://addons.mozilla.org/">addons.mozilla.org</a> for new versions of themselves. You can stop reading this section.</p> - -<p>If you do not list your add-on on <a href="https://addons.mozilla.org/">addons.mozilla.org</a>, you need to generate a Mozilla-signed XPI and tell Firefox where it can find new versions of your add-on. The way this works is:</p> - -<ul> - <li>you run <a href="/en-US/Add-ons/SDK/Tools/jpm#jpm_sign">jpm sign</a> anytime you need to create a new version</li> - <li>you host the signed add-on XPI and update it when you need to</li> - <li>you host an "update manifest", which, among other things, contains a URL pointing to the XPI</li> - <li>your add-on tells Firefox where it can find the update manifest</li> -</ul> - -<p>To do this, include two extra keys in package.json:</p> - -<ul> - <li><code><a href="/en-US/Add-ons/SDK/Tools/package_json#updateURL">updateURL</a></code>: this is a URL which will be included in the built XPI file (technically, it's in the <a href="/en-US/docs/Mozilla/Add-ons/Install_Manifests">install manifest</a> which <code>jpm xpi</code> builds). It points to your update manifest. The <code>updateURL</code> value <em>may</em> be HTTPS. If it isn't, then you'll also need to sign the update manifest, and then include the public key using the <code><a href="/en-US/Add-ons/SDK/Tools/package_json#updateKey">updateKey</a></code> field in package.json. See <a href="/en-US/docs/Extension_Versioning%2C_Update_and_Compatibility#Securing_Updates">Securing updates</a> for more on this.</li> - <li><code><a href="/en-US/Add-ons/SDK/Tools/package_json#updateLink">updateLink</a></code>: this is the URL which will be included in the update manifest file. It points to the XPI, and <em>must</em> be an HTTPS URL.</li> -</ul> - -<p><img alt="" src="https://mdn.mozillademos.org/files/11847/addons-update.svg" style="" title="[https://mdn.mozillademos.org]"></p> - -<p>If you include <code>updateURL</code> and <code>updateLink</code> (and also <code>updateKey</code> in case <code>updateURL</code> is not HTTPS), then <code>jpm xpi</code> will:</p> - -<ul> - <li>embed the value you supplied for <code>updateURL</code> in the XPI it generates</li> - <li>generate an update manifest alongside the XPI, and embed the value you supplied for <code>updateLink</code> in the manifest</li> -</ul> - -<p>You then host the update manifest at <code>updateURL</code>, and host new versions of the XPI at <code>updateLink</code>.</p> - -<p>For some more details on this, see <a href="/en-US/docs/Extension_Versioning,_Update_and_Compatibility#Automatic_Add-on_Update_Checking">Automatic Add-on Update Checking</a>.</p> diff --git a/files/fr/mozilla/add-ons/sdk/tutorials/add_a_context_menu_item/index.html b/files/fr/mozilla/add-ons/sdk/tutorials/add_a_context_menu_item/index.html deleted file mode 100644 index 1ad8700c3d..0000000000 --- a/files/fr/mozilla/add-ons/sdk/tutorials/add_a_context_menu_item/index.html +++ /dev/null @@ -1,115 +0,0 @@ ---- -title: Add a Context Menu Item -slug: Mozilla/Add-ons/SDK/Tutorials/Add_a_Context_Menu_Item -translation_of: Archive/Add-ons/Add-on_SDK/Tutorials/Add_a_Context_Menu_Item ---- -<p>{{AddonSidebar}}</p> - -<div class="note"> -<p><span>Pour suivre ce tuto , vous aurez besoin d'avoir appris des rudiments de<a href="/fr/docs/Mozilla/Add-ons/SDK/Tutorials/Getting_Started_%28jpm%29"> <code>jpm</code></a>. </span></p> -</div> - -<p>Pour ajouter des éléments et des sous-menus dans le menu contextuel de Firefox, utilisez le module <a href="https://developer.mozilla.org/fr/docs/Mozilla/Add-ons/SDK/High-Level_APIs/context-menu"><code>context-menu</code></a>.</p> - -<p>Voici un add-on qui ajoute un nouvel élément de menu contextuel. L'élément est affiché à chaque fois qu'une séléction est opérée dans la page. Si l'élément est cliqué, la séléction est envoyé au code principal.</p> - -<pre class="brush: js">var contextMenu = require("sdk/context-menu"); -var menuItem = contextMenu.Item({ - label: "Log Selection", - context: contextMenu.SelectionContext(), - contentScript: 'self.on("click", function () {' + - ' var text = window.getSelection().toString();' + - ' self.postMessage(text);' + - '});', - onMessage: function (selectionText) { - console.log(selectionText); - } -});</pre> - -<p>Executer l'add-on, charger une page web, séléctioner un texte et faites un clic droit, le nouvel élément doit apparaitre:<img src="https://mdn.mozillademos.org/files/6513/context-menu-selection.png" style="display: block; margin-left: auto; margin-right: auto;"></p> - -<p>Click it, and the selection is <a href="/en-US/Add-ons/SDK/Tutorials/Logging">logged to the console</a> (or the shell, if you're running an instance of Firefox from the command line):</p> - -<pre>info: elephantine lizard -</pre> - -<h2 id="Details">Details</h2> - -<p>All this add-on does is to construct a context menu item. You don't need to add it: once you have constructed the item, it is automatically added in the correct context. The constructor in this case takes four options: <code>label</code>, <code>context</code>, <code>contentScript</code>, and <code>onMessage</code>.</p> - -<h3 id="label">label</h3> - -<p>The <code>label</code> is just the string that's displayed.</p> - -<h3 id="context">context</h3> - -<p>The <code>context</code> describes the circumstances in which the item should be shown. The <code>context-menu</code> module provides a number of simple built-in contexts, including this <code>SelectionContext()</code>, which means: display the item when something on the page is selected.</p> - -<p>If these simple contexts aren't enough, you can define more sophisticated contexts using scripts.</p> - -<h3 id="contentScript">contentScript</h3> - -<p>This attaches a script to the item. In this case the script listens for the user to click on the item, then sends a message to the add-on containing the selected text.</p> - -<h3 id="onMessage">onMessage</h3> - -<p>The <code>onMessage</code> property provides a way for the add-on code to respond to messages from the script attached to the context menu item. In this case it just logs the selected text.</p> - -<p>So:</p> - -<ol> - <li>the user clicks the item</li> - <li>the content script's <code>click</code> event fires, and the content script retrieves the selected text and sends a message to the add-on</li> - <li>the add-on's <code>message</code> event fires, and the add-on code's handler function is passed the selected text, which it logs</li> -</ol> - -<h2 id="More_options">More options</h2> - -<h3 id="Adding_an_image">Adding an image</h3> - -<p>You can add an image to a context menu item with the <code>image</code> option. This is a URL pointing to a 16x16 icon that's displayed at the left side of the context menu item. Typically you'd store the image in your add-on's "data" directory, and construct the URL using <code>self.data.url()</code>:</p> - -<pre class="brush: js">var self = require("sdk/self"); - -var contextMenu = require("sdk/context-menu"); -var menuItem = contextMenu.Item({ - label: "Log Selection", - context: contextMenu.SelectionContext(), - contentScript: 'self.on("click", function () {' + - ' var text = window.getSelection().toString();' + - ' self.postMessage(text);' + - '});', - image: self.data.url("icon-16.png"), - onMessage: function (selectionText) { - console.log(selectionText); - } -});</pre> - -<h3 id="Adding_an_access_key">Adding an access key</h3> - -<div class="geckoVersionNote"> -<p>New in Firefox 35.</p> -</div> - -<p>From Firefox 35 you can specify an access key using the <code>accessKey</code> option. This must be a single-character string. Pressing the key selects the option when the context menu is open:</p> - -<pre class="brush: js">var contextMenu = require("sdk/context-menu"); -var menuItem = contextMenu.Item({ - label: "Log Selection", - context: contextMenu.SelectionContext(), - contentScript: 'self.on("click", function () {' + - ' var text = window.getSelection().toString();' + - ' self.postMessage(text);' + - '});', - accessKey: "l", - onMessage: function (selectionText) { - console.log(selectionText); - } -}); -</pre> - -<p> </p> - -<h2 id="Learning_More">Learning More</h2> - -<p>To learn more about the <code>context-menu</code> module, see the <a href="/en-US/Add-ons/SDK/High-Level_APIs/context-menu"><code>context-menu</code> API reference</a>.</p> diff --git a/files/fr/mozilla/add-ons/sdk/tutorials/getting_started_(jpm)/index.html b/files/fr/mozilla/add-ons/sdk/tutorials/getting_started_(jpm)/index.html deleted file mode 100644 index 09fa1442a9..0000000000 --- a/files/fr/mozilla/add-ons/sdk/tutorials/getting_started_(jpm)/index.html +++ /dev/null @@ -1,165 +0,0 @@ ---- -title: Commencer avec jpm -slug: Mozilla/Add-ons/SDK/Tutorials/Getting_Started_(jpm) -translation_of: Archive/Add-ons/Add-on_SDK/Tutorials/Getting_Started_(jpm) ---- -<div class="note"> -<p>The Add-on SDK includes a command-line tool that you use to initialize, run, test, and package add-ons. The current tool is called jpm, and is based on <a href="http://nodejs.org/">Node.js</a>. It replaces the old cfx tool.</p> - -<p>You can use jpm from Firefox 38 onwards.</p> - -<p>This article describes how to develop using jpm.</p> -</div> - -<p>Ce tutoriel est un exemple de création d'une add-on en utilisant le SDK.</p> - -<h2 id="Prérequis">Prérequis</h2> - -<p>Pour créer des add-ons pour Firefox en utilisant le SDK, vous aurez besoin:</p> - -<ul> - <li>Firefox Version 38 ou plus. Si vous avez besoin de travailler avec les versions antérieures de Firefox, vous aurez besoin d'utiliser l'outil cfx. Voir les instructions pour <a href="/fr/docs/Mozilla/Add-ons/SDK/Tutorials/Getting_started_(cfx)" title="/fr/Add-ons/SDK/Tutorials/Getting_started_(cfx)">débuter avec cfx </a>.</li> - <li>l'outil de ligne de commande jpm. Voir les instructions pour l'installation <a href="/fr/docs/Mozilla/Add-ons/SDK/Tools/jpm#Installation" title="/fr/Add-ons/SDK/Tools/jpm#Installation"> jpm </a>. Une fois que vous avez fait cela, vous serez à la recherche de l'invite de commande.</li> -</ul> - -<h2 id="Initialisation_d'un_add-on_vide">Initialisation d'un add-on vide</h2> - -<p>Dans l'invite de commande, créez un nouveau répertoire. Accédez à, tapez <code>jpm init</code>, et appuyez sur Entrée:</p> - -<pre>mkdir my-addon -cd my-addon -jpm init -</pre> - -<p>Vous serez alors invité à fournir quelques informations sur votre add-on: elles seront utilisées pour créer votre fichier <a href="/fr/docs/Mozilla/Add-ons/SDK/Tools/package_json" title="/fr/docs/Mozilla/Add-ons/SDK/Tools/package_json">package.json</a>. Pour l'instant, appuyez sur Entrée pour accepter la valeur par défaut pour chaque propriété. Pour plus d'informations sur <code>jpm init</code>, voir le <a href="/fr/docs/Mozilla/Add-ons/SDK/Tools/jpm#Command_reference" title="/fr/Add-ons/SDK/Tools/jpm#Command_reference">commande de référence jpm </a>.</p> - -<p>Une fois que vous avez fourni une valeur ou accepté la valeur par défaut pour ces propriétés, vous verrez le contenu complet de "package.json" que vous validerez.</p> - -<h2 id="Mise_en_œuvre_de_l'add-on">Mise en œuvre de l'add-on</h2> - -<p>Maintenant, vous pouvez écrire le code de l'add-on. Sauf si vous avez changé la valeur du "point d'entrée"("<a href="/fr/docs/Mozilla/Add-ons/SDK/Tools/package_json#main" title="/fr/Add-ons/SDK/Tools/package_json#main">main</a>"dans package.json), allez dans le fichier "index.js" à la racine de votre add-on. Ce fichier a été créé dans l'étape précédente. Ouvrez-le et ajoutez le code suivant:</p> - -<pre class="brush: js">var buttons = require('sdk/ui/button/action'); -var tabs = require("sdk/tabs"); - -var button = buttons.ActionButton({ - id: "mozilla-link", - label: "Visit Mozilla", - icon: { - "16": "./icon-16.png", - "32": "./icon-32.png", - "64": "./icon-64.png" - }, - onClick: handleClick -}); - -function handleClick(state) { - tabs.open("https://www.mozilla.org/"); -} -</pre> - -<div class="note"> -<p>Notez que par défaut le "point d'entrée" dans jpm est "index.js", ce qui signifie que votre fichier principal est "index.js", et il se trouve à la racine de votre add-on.</p> - -<p>Dans cfx, le "point d'entrée" par défaut est "main.js», il se trouve dans le répertoire "lib" sous la racine de l'add-on.</p> -</div> - -<p>Enregistrez le fichier.</p> - -<p>Ensuite, créez un répertoire appelé "data" à la racine de votre add-on, et enregistrer ces trois fichiers d'icônes dans "data" :</p> - -<table class="standard-table"> - <tbody> - <tr> - <td><img alt="" src="https://mdn.mozillademos.org/files/7635/icon-16.png" style="height: 16px; width: 16px;"></td> - <td>icon-16.png</td> - </tr> - <tr> - <td><img alt="" src="https://mdn.mozillademos.org/files/7637/icon-32.png" style="height: 32px; width: 32px;"></td> - <td>icon-32.png</td> - </tr> - <tr> - <td><img alt="" src="https://mdn.mozillademos.org/files/7639/icon-64.png" style="height: 64px; width: 64px;"></td> - <td>icon-64.png</td> - </tr> - </tbody> -</table> - -<p>Retour à l'invite de commande, tapez:</p> - -<pre>jpm run</pre> - -<p>Ceci est la commande de jpm pour lancer une nouvelle instance de Firefox avec votre add-on installée.</p> - -<p>Si Firefox ne peut pas être localisé, vous devrez peut-être fournir le chemin d'accès (par exemple dans Ubuntu):</p> - - -<pre>jpm run -b /usr/bin/firefox</pre> - -<div class="note"> -<p>Vous pouvez egalement modifier le chemin dans le fichier \npm\node_modules\jpm\node_modules\fx-runner\lib\utils.js.</p> - -<p>Par exemple sous windos : <code>var rootKey = '\\Programe Files\\Mozilla Firefox\\';</code></p> -</div> - -<p>Lorsque Firefox est lancé, dans le coin en haut à droite du navigateur, vous verrez une icône avec le logo de Firefox. Cliquez sur l'icône, et un nouvel onglet sera ouvert avec <a href="https://www.mozilla.org/" title="http://www.mozilla.org/"> https://www.mozilla.org/ </a> chargé.</p> - -<p>Voilà ce que fait cette add-on. Elle utilise deux modules: le module SDK <a href="/fr/docs/Mozilla/Add-ons/SDK/Low-Level_APIs/ui_button_action" title="/fr/Add-ons/SDK/Low-Level_APIs/ui_button_action">button_action</a>, qui vous permet d'ajouter des boutons dans le navigateur, et le module<a href="https://developer.mozilla.org/fr/docs/Mozilla/Add-ons/SDK/High-Level_APIs/tabs" title="https://developer.mozilla.org/fr/Add-ons/SDK/High-Level_APIs/tabs"> tabs</a>, qui vous permet d'effectuer des opérations de base avec des onglets. Dans ce cas, nous avons créé un bouton dont l'icône est celle de Firefox, et ajouté un gestionnaire de clic qui charge la page d'accueil de Mozilla dans un nouvel onglet.</p> - -<p>Essayez d'éditer ce fichier. Par exemple, nous pourrions changer la page qui est chargé:</p> - -<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">var</span> buttons <span class="operator token">=</span> <span class="function token">require</span><span class="punctuation token">(</span><span class="string token">'sdk/ui/button/action'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> -<span class="keyword token">var</span> tabs <span class="operator token">=</span> <span class="function token">require</span><span class="punctuation token">(</span><span class="string token">"sdk/tabs"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - -<span class="keyword token">var</span> button <span class="operator token">=</span> buttons<span class="punctuation token">.</span><span class="function token">ActionButton</span><span class="punctuation token">(</span><span class="punctuation token">{</span> - id<span class="punctuation token">:</span> <span class="string token">"mozilla-link"</span><span class="punctuation token">,</span> - label<span class="punctuation token">:</span> <span class="string token">"Visit Mozilla"</span><span class="punctuation token">,</span> - icon<span class="punctuation token">:</span> <span class="punctuation token">{</span> - <span class="string token">"16"</span><span class="punctuation token">:</span> <span class="string token">"./icon-16.png"</span><span class="punctuation token">,</span> - <span class="string token">"32"</span><span class="punctuation token">:</span> <span class="string token">"./icon-32.png"</span><span class="punctuation token">,</span> - <span class="string token">"64"</span><span class="punctuation token">:</span> <span class="string token">"./icon-64.png"</span> - <span class="punctuation token">}</span><span class="punctuation token">,</span> - onClick<span class="punctuation token">:</span> handleClick -<span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - -<span class="keyword token">function</span> <span class="function token">handleClick</span><span class="punctuation token">(</span>state<span class="punctuation token">)</span> <span class="punctuation token">{</span> - tabs<span class="punctuation token">.</span><span class="function token">open</span><span class="punctuation token">(</span><span class="string token">"https://developer.mozilla.org/"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> -<span class="punctuation token">}</span></code></pre> - -<p>À l'invite de commande, exécutez à nouveau <code>jpm run</code>. Vous ouvrirez cette fois en cliquant <a href="https://developer.mozilla.org/">https://developer.mozilla.org/</a>.</p> - -<h2 id="Empaquetté_l'add-on">Empaquetté l'add-on</h2> - -<p>Lorsque vous avez terminé l'add-on et êtes prêt à la distribuer, vous aurez besoin de l'emballer dans un fichier XPI. C'est le format de fichier installable pour Firefox Add-ons. Vous pouvez distribuer xpi en les publiant sur <a href="https://addons.mozilla.org" title="https://addons.mozilla.org"> https://addons.mozilla.org </a> afin que les autres utilisateurs puissent la télécharger et l'installer.</p> - -<p>Pour construire un xpi, exécutez simplement la commande <code>jpm xpi</code> dans le répertoire de l'add-on:</p> - -<pre>jpm xpi -</pre> - -<p>Vous devriez voir un message du type:</p> - -<pre>JPM info Successfully created xpi at /path/to/getting-started/@getting-started.xpi -</pre> - -<p>Pour voir si cela a fonctionné, essayez d'installer le fichier xpi dans votre navigateur Firefox. Vous pouvez le faire en appuyant sur la combinaison de touches Ctrl+O (O+Cmd sur Mac) à partir de Firefox, ou en sélectionnant l'option "Ouvrir" dans le menu "Fichier" de Firefox. Cela fera apparaître une boîte de dialogue de sélection de fichier: naviguer vers le fichier "@getting-started.xpi", ouvrez-le et suivez les instructions pour installer l'add-on.</p> - -<p>Pour distribuer votre add-on, <a href="https://addons.mozilla.org/fr/developers/addon/submit/2" title="https://addons.mozilla.org/fr/developers/addon/submit/2"> soumettre le fichier xpi à addons.mozilla.org </a> ou exécuter <a href="https://developer.mozilla.org/fr/docs/Mozilla/Add-ons/SDK/Tools/jpm#jpm_sign" title="https://developer.mozilla.org/fr/Add-ons/SDK/Tools/jpm#jpm_sign">jpm sign</a> si vous souhaitez distribuer l'add-on sur votre propre serveur.</p> - -<h2 id="Résumé">Résumé</h2> - -<p>Dans ce tutoriel, nous avons construit et emballé une add-on en utilisant trois commandes:</p> - -<ul> - <li><code>jpm init</code> pour initialiser un modèle vide d'add-on</li> - <li><code>jpm run</code> pour exécuter une nouvelle instance de Firefox avec l'add-on installé, afin que nous puissions l'essayer</li> - <li><code>jpm xpi</code> pour emballer l'add-on dans un fichier xpi pour la distribution</li> -</ul> - -<p>Ce sont les trois principales commandes que vous utiliserez lors de l'élaboration d'add-ons SDK. Il y a une <a href="/fr/docs/Mozilla/Add-ons/SDK/Tools/jpm" title="/fr/Add-ons/SDK/Tools/jpm">documentation de référence</a> complète couvrant toutes les commandes que vous pouvez utiliser et toutes les options qu'elles prennent.</p> - -<p>Le code de add-on lui-même utilise deux modules de SDK, <a href="/fr/docs/Mozilla/Add-ons/SDK/Low-Level_APIs/ui_button_action" title="/fr/Add-ons/SDK/Low-Level_APIs/ui_button_action"> action bouton </a> et <a href="/fr/docs/Mozilla/Add-ons/SDK/High-Level_APIs/tabs" title="/fr/Add-ons/SDK/High-Level_APIs/tabs">tabs</a>. Il ya une documentation de référence pour toute les APIs <a href="/fr/docs/Mozilla/Add-ons/SDK/High-Level_APIs" title="/fr/Add-ons/SDK/High-Level_APIs">high-level </a> et <a href="/fr/docs/Mozilla/Add-ons/SDK/Low-Level_APIs" title="/fr/Add-ons/SDK/Low-Level_APIs">low-level</a> dans le SDK.</p> - -<h2 id="Et_en_suite">Et en suite?</h2> - -<p>Pour avoir une idée de certaines des choses que vous pouvez faire avec les API du SDK, essayer de travailler avec certains <a href="/fr/docs/Mozilla/Add-ons/SDK/Tutorials" title="/fr/Add-ons/SDK/Tutorials">tutoriels</a>.</p> diff --git a/files/fr/mozilla/add-ons/sdk/tutorials/index.html b/files/fr/mozilla/add-ons/sdk/tutorials/index.html deleted file mode 100644 index d68fcfd2ac..0000000000 --- a/files/fr/mozilla/add-ons/sdk/tutorials/index.html +++ /dev/null @@ -1,143 +0,0 @@ ---- -title: Tutoriels -slug: Mozilla/Add-ons/SDK/Tutorials -tags: - - Add-on SDK - - TopicStub -translation_of: Archive/Add-ons/Add-on_SDK/Tutorials ---- -<p>Cette page répertorie les articles sur la façon d'accomplir des tâches spécifiques en utilisant le SDK.</p> - -<hr> -<h3 id="Commencer"><a name="getting-started">Commencer</a></h3> - -<div class="column-container"> -<div class="column-half"> -<dl> - <dt><a href="/fr/docs/Mozilla/Add-ons/SDK/Tools/jpm#Installation">Installation</a></dt> - <dd>Comment faire pour installer l'outil de jpm, que vous allez utiliser pour développer des add-ons.</dd> -</dl> - -<dl> - <dt><a href="/fr/docs/Mozilla/Add-ons/SDK/Tutorials/Troubleshooting">Dépannage</a></dt> - <dd>Quelques conseils pour résoudre les problèmes courants et obtenir de l'aide.</dd> -</dl> -</div> - -<div class="column-half"> -<dl> - <dt><a href="/fr/docs/Mozilla/Add-ons/SDK/Tutorials/Getting_Started_(jpm)">Commencer</a></dt> - <dd>Démonstration de la création d'une add-on avec le SDK, en utilisant jpm.</dd> -</dl> -</div> -</div> - -<hr> -<h3 id="Créer_des_interfaces_utilisateur"><a name="create-user-interfaces">Créer des interfaces utilisateur</a></h3> - -<div class="column-container"> -<div class="column-half"> -<dl> - <dt><a href="/fr/docs/Mozilla/Add-ons/SDK/Tutorials/Adding_a_Button_to_the_Toolbar">Ajouter un bouton de barre d'outils</a></dt> - <dd>Attachez un bouton à la barre d'outils du module complémentaire Firefox.</dd> - <dt><a href="/fr/docs/Mozilla/Add-ons/SDK/Tutorials/Add_a_Menu_Item_to_Firefox">Ajouter un élément de menu à Firefox </a></dt> - <dd>Ajoutez des éléments aux menus principaux de Firefox.</dd> -</dl> -</div> - -<div class="column-half"> -<dl> - <dt><a href="/fr/docs/Mozilla/Add-ons/SDK/Tutorials/Display_a_Popup">Afficher une popup </a></dt> - <dd>Afficher une boîte de dialogue contextuelle (popup) implémentée avec HTML et JavaScript.</dd> - <dt><a href="/fr/docs/Mozilla/Add-ons/SDK/Tutorials/Add_a_Context_Menu_Item">Ajouter un élément de menu contextuel </a></dt> - <dd>Ajoutez des éléments au menu contextuel de Firefox.</dd> -</dl> -</div> -</div> - -<hr> -<h3 id="Interagir_avec_le_navigateur"><a name="interact-with-the-browser">Interagir avec le navigateur</a></h3> - -<div class="column-container"> -<div class="column-half"> -<dl> - <dt><a href="/fr/docs/Mozilla/Add-ons/SDK/Tutorials/Open_a_Web_Page">Ouvrir une page Web </a></dt> - <dd>Ouvrez une page Web dans un nouvel onglet ou une nouvelle fenêtre du navigateur à l'aide du module onglets et accédez à son contenu.</dd> - <dt><a href="/fr/docs/Mozilla/Add-ons/SDK/Tutorials/Listen_for_Page_Load">Écouter le chargement de la page </a></dt> - <dd>Utilisez le module onglets pour être averti lorsque de nouvelles pages Web sont chargées et accéder à leur contenu.</dd> -</dl> -</div> - -<div class="column-half"> -<dl> - <dt><a href="/fr/docs/Mozilla/Add-ons/SDK/Tutorials/List_Open_Tabs">Obtenir la liste des onglets ouverts </a></dt> - <dd>Utilisez le module onglets pour parcourir les onglets actuellement ouverts et accéder à leur contenu.</dd> -</dl> -</div> -</div> - -<hr> -<h3 id="Modifier_les_pages_Web"><a name="modify-web-pages">Modifier les pages Web</a></h3> - -<div class="column-container"> -<div class="column-half"> -<dl> - <dt><a href="/fr/docs/Mozilla/Add-ons/SDK/Tutorials/Modifying_Web_Pages_Based_on_URL">Modifier les pages Web en fonction de l'URL </a></dt> - <dd>Créez des filtres pour les pages Web en fonction de leur URL: chaque fois qu'une page Web dont l'URL correspond au filtre est chargée, exécutez un script spécifié.</dd> -</dl> -</div> - -<div class="column-half"> -<dl> - <dt><a href="/fr/docs/Mozilla/Add-ons/SDK/Tutorials/Modifying_the_Page_Hosted_by_a_Tab">Modifier la page Web active </a></dt> - <dd>Chargez dynamiquement un script dans la page Web actuellement active.</dd> -</dl> -</div> -</div> - -<hr> -<h3 id="Techniques_de_développement"><a name="development-techniques">Techniques de développement</a></h3> - -<div class="column-container"> -<div class="column-half"> -<dl> - <dt><a href="/fr/docs/Mozilla/Add-ons/SDK/Tutorials/Logging">Enregistrement </a></dt> - <dd>Enregistrez les messages sur la console à des fins de diagnostic.</dd> - <dt><a href="/fr/docs/Mozilla/Add-ons/SDK/Tutorials/Creating_reusable_modules">Création de modules réutilisables </a></dt> - <dd>Structurez votre module complémentaire en modules séparés pour faciliter le développement, le débogage et la maintenance. Créez des paquets réutilisables contenant vos modules, afin que d'autres développeurs de modules complémentaires puissent également les utiliser.</dd> - <dt><a href="/fr/docs/Mozilla/Add-ons/SDK/Tutorials/Unit_testing">Tests unitaires </a></dt> - <dd>Ecrire et exécuter des tests unitaires à l'aide du framework de test du SDK.</dd> - <dt><a href="/fr/docs/Mozilla/Add-ons/SDK/Tutorials/Chrome_authority">Autorité Chrome </a></dt> - <dd>Accédez à l'objet Components, permettant à votre module complémentaire de charger et d'utiliser n'importe quel objet XPCOM.</dd> - <dt><a href="/fr/docs/Mozilla/Add-ons/SDK/Tutorials/Creating_event_targets">Création de cibles d'événements </a></dt> - <dd>Permettez aux objets que vous définissez d'émettre leurs propres événements.</dd> -</dl> -</div> - -<div class="column-half"> -<dl> - <dt><a href="/fr/docs/Mozilla/Add-ons/SDK/Tutorials/Listening_for_load_and_unload">Écouter pour charger et décharger </a></dt> - <dd>Recevez des notifications lorsque votre module complémentaire est chargé ou déchargé par Firefox, et passez des arguments dans votre module complémentaire à partir de la ligne de commande.</dd> - <dt><a href="/fr/docs/Mozilla/Add-ons/SDK/Tutorials/Using_third-party_modules_(jpm)">Utilisation de modules tiers (jpm)</a></dt> - <dd>Installez et utilisez des modules supplémentaires qui ne sont pas fournis avec le SDK lui-même.</dd> - <dt><a href="/fr/docs/Mozilla/Add-ons/SDK/Tutorials/l10n">Localisation </a></dt> - <dd>Écriture de code localisable.</dd> - <dt><a href="/fr/docs/Mozilla/Add-ons/SDK/Tutorials/Mobile_development">Développement mobile </a></dt> - <dd>Développez des modules complémentaires pour Firefox Mobile sur Android.</dd> - <dt><a href="/fr/docs/Mozilla/Add-ons/Add-on_Debugger">Débogueur de module complémentaire (Add-on)</a></dt> - <dd>Déboguez le JavaScript de votre module complémentaire.</dd> -</dl> -</div> -</div> - -<hr> -<h3 id="Mettre_ensemble"><a name="putting-it-together">Mettre ensemble</a></h3> - -<div class="column-container"> -<div class="column-half"> -<dl> - <dt><a href="/fr/docs/Mozilla/Add-ons/SDK/Tutorials/Annotator">Module complémentaire Annotator </a></dt> - <dd>Présentation d'un module complémentaire relativement complexe.</dd> -</dl> -</div> -</div> diff --git a/files/fr/mozilla/add-ons/sdk/tutorials/l10n/index.html b/files/fr/mozilla/add-ons/sdk/tutorials/l10n/index.html deleted file mode 100644 index 4b9ca669e7..0000000000 --- a/files/fr/mozilla/add-ons/sdk/tutorials/l10n/index.html +++ /dev/null @@ -1,383 +0,0 @@ ---- -title: Localisation -slug: Mozilla/Add-ons/SDK/Tutorials/l10n -translation_of: Archive/Add-ons/Add-on_SDK/Tutorials/l10n ---- -<p>Le SDK supporte la localisation des chaînes figurant dans:</p> - -<ul> - <li><a href="/fr/docs/Mozilla/Add-ons/SDK/Tutorials/l10n#Using_Localized_Strings_in_JavaScript">Le code JavaScript dans le main ou l'index de l'add-on</a></li> - <li><a href="/fr/docs/Mozilla/Add-ons/SDK/Tutorials/l10n#Using_Localized_Strings_in_HTML">Les fichiers HTML emballés avec votre add-on</a></li> - <li><a href="/fr/docs/Mozilla/Add-ons/SDK/Tutorials/l10n#Using_Localized_Strings_in_Preferences">Les champs <code>title</code> et <code>description</code> de votre add-on</a>.</li> -</ul> - -<p>Il ne le fait pas dans le CSS, les scripts anexe, ou les champs titre et description qui apparaissent dans le gestionnaire de modules complémentaires. Voir <a href="/fr/docs/Mozilla/Add-ons/SDK/Tutorials/l10n#Limitations" title="/fr/Add-ons/SDK/Tutorials/l10n#Limitations">Limitations</a> ci-dessous.</p> - -<h2 id="Chaînes_localisées">Chaînes localisées</h2> - -<p>Les chaînes traduites sont conservées dans un répertoire appelé "locale" sous votre répertoire principale de l'add-on , avec un fichier pour chaque langue. Les dossiers:</p> - -<ul> - <li>utiliser <a href="http://fr.wikipedia.org/wiki/.properties" title="http://en.wikipedia.org/wiki/.properties"> <code>.properties</code> Format</a></li> - <li>sont nommés "xx-YY.properties", où "xx-YY" est le <a href="https://wiki.mozilla.org/L10n:Locale_Codes" title="https://wiki.mozilla.org/L10n:Locale_Codes">nom locale</a> en question (en français, uniquement "fr.properties")</li> - <li>contienent une entrée pour chaque chaîne que vous voulez localiser, constitué d'un identifiant pour la chaîne et sa traduction dans cette langue, dans le format <code>identifier=translation</code></li> - <li>utilisent UTF-8 sans codage BOM</li> - <li>Les lignes commençant par "#" (après espaces optionnels) sont des commentaires</li> -</ul> - -<p>Supposons que votre add-on contient une seule chaîne localisable, représentée en anglais comme "Hello!", Et que vous souhaitez fournir les localisations Français FRANCAIS et anglais ETATS-UNIS.</p> - -<p>Vous souhaitez ajouter deux fichiers au répertoire "locale" :</p> - -<pre>my-addon/ - data - lib - locale/ - en-US.properties - fr.properties -</pre> - -<p>"en-US.properties" contient ceci:</p> - -<pre>hello_id= Hello! -</pre> - -<p>"fr.properties" contient ceci:</p> - -<pre>hello_id= Bonjour! -</pre> - -<p>Maintenant, chaque fois que votre JavaScript ou HTML demande au système de localisation la traduction de l'identifiant <code>hello_id</code>, il obtiendra la traduction correcte pour la localisation en cours.</p> - -<h2 id="Utilisation_de_chaînes_localisées_en_HTML">Utilisation de chaînes localisées en HTML</h2> - -<div class="note"> -<p>Cet exemple utilise l'API <a href="https://developer.mozilla.org/fr/docs/Mozilla/Add-ons/SDK/Low-Level_APIs/ui_button_action" title="https://developer.mozilla.org/fr/Add-ons/SDK/Low-Level_APIs/ui_button_action">button_action</a>, qui est uniquement disponible à partir de Firefox 29.</p> -</div> - -<p>Pour référencer des chaînes localisées du HTML, ajouter un attribut <code>data-l10n-id</code> à la balise HTML où vous voulez que la chaîne localisée apparaisse, et assignez y l'identifiant :</p> - -<pre class="brush: html"><html> - <body> - <h1 data-l10n-id="hello_id"></h1> - </body> -</html> -</pre> - -<p>Ensuite, vous pouvez utiliser ce fichier HTML pour construire votre interface, par exemple à l'intérieur d'un panel :</p> - -<pre class="brush: js">var button = require("sdk/ui/button/action").ActionButton({ - id: "localized-hello", - label: "Localized hello", - icon: "./icon-16.png", - onClick: function() { - hello.show(); - } -}); - -var hello = require("sdk/panel").Panel({ - height: 75, - width: 150, - contentURL: require("sdk/self").data.url("my-panel.html") -});</pre> - -<p>Compte tenu de fichiers locaux pour "en-US" et "fr" qui fournissent les traductions de <code>hello_id</code>, le panneau affichera désormais "Bonjour!" ou "Hello!", selon la localisation en cours:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/7663/bonjour.png" style="height: 160px; width: 255px;"><img alt="" src="https://mdn.mozillademos.org/files/7665/hello.png" style="height: 160px; width: 255px;"></p> - -<p>La traduction est inséré dans le nœud qui a l'attribut <code>data-l10n-id</code> défini. Tout contenu existant précédemment est simplement remplacé.</p> - -<p>La chaîne est insérée sous forme de texte, de sorte que vous ne pouvez pas insérer du code HTML en utilisant une déclaration comme:</p> - -<pre class="brush: bash"># Ne fonctionne pas. Les balises HTML sont insérés sous forme de texte. -hello_id= <blink>Hello!</blink> -</pre> - -<h3 id="Attributs_d'Elément_Localisation">Attributs d'Elément Localisation</h3> - -<div class="geckoVersionNote">Cette fonction est nouvelle dans Firefox 39</div> - -<p>Vous pouvez localiser certains attributs d'éléments avec un l10n-id en définissant sa valeur avec l10n-id.attributeName dans le fichier de propriétés comme:</p> - -<pre>hello_id.accesskey= H</pre> - -<p>Les attributs suivants sont supportés:</p> - -<ul> - <li><strong>accesskey</strong></li> - <li><strong>alt</strong></li> - <li><strong>label</strong></li> - <li><strong>title</strong></li> - <li><strong>placeholder</strong></li> -</ul> - -<p>En outre, la localisation avec les attributs <a href="/fr/docs/Web/Accessibility/ARIA" title="/fr/docs/Web/Accessibility/ARIA">ARIA</a> <strong> aria-label </strong>, <strong>aria-valuetex</strong> et <strong> aria-moz-hint </strong> sont pris en charge avec les mêmes alias que sur Firefox OS :</p> - -<ul> - <li><strong>ariaLabel</strong></li> - <li><strong>ariaValueText</strong></li> - <li><strong>ariaMozHint</strong></li> -</ul> - -<h2 id="Utilisation_de_chaînes_localisées_en_JavaScript">Utilisation de chaînes localisées en JavaScript</h2> - -<p>Pour référencer les chaînes localisées à partir de votre code d'add-on principale, faites ceci:</p> - -<pre class="brush: js">var _ = require("sdk/l10n").get; -console.log(_("hello_id!"));</pre> - -<p><span>L'affectation de "<code>_</code>" n'est pas nécessaire, mais pour travailler avec les outils <a href="https://www.gnu.org/software/gettext/gettext.html" title="https://www.gnu.org/software/gettext/gettext. html">gettext</a> qui attendent "<code>_</code>" pour indiquer les chaînes localisables, cela est préférable.</span></p> - -<ol> - <li>Importez le module <code>l10n</code>, et assigner sa fonction <code>get</code> à "<code>_</code>"(underscore).</li> - <li>Enveloppez toutes les références aux chaînes localisables avec la fonction <code>_()</code>.</li> -</ol> - -<p>Si vous l'exécutez, vous verrez le résultat attendu pour la localisation en cours:</p> - -<pre>info: Hello! -</pre> - -<pre>info: Bonjour! -</pre> - -<p>Notez que parce que vous ne pouvez pas appeler des modules avec <code>require()</code> dans les content_scripts, vous ne pouvez pas encore référencer les chaînes localisées à partir des content_scripts.</p> - -<h3 id="Pluriels">Pluriels</h3> - -<p>Le module <code>l10n</code> prend en charge les formes plurielles. Plusieurs langues ont des règles différentes pour la formation des pluriels. Par exemple, l'anglais a deux formes: une forme singulière pour "un", et une forme plurielle pour "tout le reste, y compris zéro":</p> - -<pre>one tomato -no tomatoes -two tomatoes -</pre> - -<p>Mais le Russe a des formes différentes pour les numéros se terminant par 1 (sauf 11), numéros se terminant par 2-4 (sauf 12-14) et les autres numéros:</p> - -<pre>один помидор // one tomato -два помидора // two tomatoes -пять помидоров // five tomatoes -</pre> - -<p>Le SDK utilise les données de <a href="http://cldr.unicode.org/index" title="http://cldr.unicode.org/index">Unicode CLDR</a> pour décrire les différentes formes plurielles utilisés dans les différentes langues.</p> - -<h4 id="Formes_plurielles_de_Unicode_CLDR">Formes plurielles de Unicode CLDR</h4> - -<p>Le projet Unicode CLDR définit un schéma pour décrire les règles de pluriel d'une langue particulière. Dans ce schéma, une langue peut se distinguer par un maximum de six formes, identifié par les catégories suivantes : <em>zero</em>, <em>one</em>, <em>two</em>, <em>few</em>, <em>many</em> et <em>other</em>.</p> - -<p>L'englais a deux formes, qui peuvent être décrits par les categories "1" à "<em>one</em>" et "everything else" à "<em>other</em>":</p> - -<pre>one → n is 1; -other → everything else -</pre> - -<p>Le russe utilise quatre formes, qui peuvent être décrits comme suit:</p> - -<pre>one → n mod 10 is 1 and n mod 100 is not 11; -few → n mod 10 in 2..4 and n mod 100 not in 12..14; -many → n mod 10 is 0 or n mod 10 in 5..9 or n mod 100 in 11..14; -other → everything else -</pre> - -<p>Les règles de pluriel pour toutes les langues peuvent être trouvés dans le CLDR <a href="http://unicode.org/repos/cldr-tmp/trunk/diff/supplemental/language_plural_rules.html" title="http://unicode.org/repos/cldr-tmp/trunk/diff/supplemental/language_plural_rules.html"> Langue règles pluriel</a> (ce tableau est mis à jour par rapport à la <a href="http://unicode.org/repos/cldr/trunk/common/supplemental/plurals.xml">source XML CLDR</a>).</p> - -<h4 id="Formes_plurielles_dans_le_SDK">Formes plurielles dans le SDK</h4> - -<p>Dans le code, vous pouvez fournir un paramètre supplémentaire à côté de l'identifiant, en décrivant combien d'articles il y a :</p> - -<pre class="brush: js">var _ = require("sdk/l10n").get; -console.log(_("tomato_id")); -console.log(_("tomato_id", 1)); -console.log(_("tomato_id", 2)); -console.log(_("tomato_id", 5)); -console.log(_("tomato_id", .5));</pre> - -<p>Dans le fichier <code>.properties</code> pour chaque langue, vous pouvez définir une localisation différente pour chaque forme plurielle possible dans cette langue, en utilisant les mots-clés de CLDR. Donc, en anglais, nous pourrions avoir deux localisations pluriel (à noter que la catégorie «<em>other</em>» ne prendre <strong>pas</strong> le mot-clé CLDR):</p> - -<pre># en-US translations -tomato_id[one]= %d tomato -tomato_id= %d tomatoes -</pre> - -<p>En Russe, nous pourrions avoir quatre localisations pluriel:</p> - -<pre># ru-RU translations -tomato_id[one]= %d помидор -tomato_id[few]= %d помидора -tomato_id[many]= %d помидоров -tomato_id= %d помидоры -</pre> - -<p>Le module de localisation comprend les définitions de CLDR pour chaque langue, ce qui lui permet de faire la différence entre, par exemple, "2" dans le code et "few" dans <code>ru-RU.properties</code>. Ensuite, il récupère et renvoie la localisation pour le compte que vous avez fourni.</p> - -<h3 id="Espaces_réservés">Espaces réservés</h3> - -<p>Le module <code>l10n</code> prend en charge des espaces réservés, vous permettant d'insérer une chaîne qui ne devrait pas être localisé. Dans le code qui suit les fichiers "en-US" et "fr" ".properties" incluent des espaces réservés :</p> - -<pre class="brush: bash"># en-US translations -hello_id= Hello %s! -</pre> - -<pre class="brush: bash"># fr translations -hello_id= Bonjour %s ! -</pre> - -<p>Pour utiliser les espaces réservés, fournir la chaîne de réservation après l'identifiant:</p> - -<pre class="brush: js">var _ = require("sdk/l10n").get; -console.log(_("hello_id", "Bob")); -console.log(_("hello_id", "Alice"));</pre> - -<p>Dans la localisation "en-US", cela nous donne:</p> - -<pre>info: Hello Bob! -info: Hello Alice! -</pre> - -<p>Dans "fr" nous obtenons:</p> - -<pre>info: Bonjour Bob ! -info: Bonjour Alice ! -</pre> - -<h3 id="Commande_espaces_réservés">Commande espaces réservés</h3> - -<p>Quand une chaîne localisable peut prendre deux ou plusieurs espaces réservés, les traducteurs peuvent définir l'ordre dans lequel les espaces réservés sont insérés, sans affecter le code.</p> - -<p>Principalement, ce qui est important c'est que les différentes langues ont des règles différentes pour l'ordre des mots. Même au sein de la même langue, cependant, les traducteurs doivent avoir la liberté de définir l'ordre des mots.</p> - -<p>Par exemple, supposons que nous voulons inclure une chaîne localisée nommer ville natale d'une personne. Il y a deux espaces réservés: le nom de la personne et le nom de la ville natale :</p> - -<pre class="brush: js">var _ = require("sdk/l10n").get; -console.log(_("home_town_id", "Bob", "London"));</pre> - -<p>Un traducteur anglais pourrait vouloir choisir entre les ordres suivantes:</p> - -<pre>"<town_name> is <person_name>'s home town." -</pre> - -<pre>"<person_name>'s home town is <town_name>" -</pre> - -<p>Pour choisir la première option, le fichier <code>.properties</code> peut commander les espaces réservés comme suit:</p> - -<pre>home_town_id= %2s is %1s's home town. -</pre> - -<p>Cela nous donne le résultat suivant:</p> - -<pre>info: London is Bob's home town. -</pre> - -<h2 id="Utilisation_de_chaînes_localisées_dans_les_Préférences">Utilisation de chaînes localisées dans les Préférences</h2> - -<p>En incluant une <a href="/fr/docs/Mozilla/Add-ons/SDK/High-Level_APIs/simple-prefs" title="/fr/Add-ons/SDK/High-Level_APIs/simple-prefs">structure <code>"preferences"</code> dans votre fichier "package.json"</a>, vous pouvez définir des préférences pour votre add-on que l'utilisateur peut voir et modifier à l'aide de Firefox <a href="https://support.mozilla.org/fr/kb/Using%20extensions%20with%20Firefox#w_how-to-change-extension-settings" title="https://support.mozilla.org/fr/kb/Using%20extensions%20with%20Firefox#w_how-to-change-extension-settings">Add-ons Manager</a>.</p> - -<p>Les préférences ont obligatoirement des champs <code>title</code> et <code>description</code>. Ce sont des chaînes qui apparaissent aux côtés de la préférence dans le Gestionnaire Add-ons, pour expliquer à l'utilisateur ce que signifie la préférence.</p> - -<ul> - <li> - <p>Pour fournir la forme localisée du titre de la préférence, inclure une entrée dans votre fichier "propriétés" dont l'identifiant est le nom de la préférence suivie par <code>_title</code>, et dont la valeur est le titre localisé.</p> - </li> - <li> - <p>Pour fournir la forme localisée de la description de la préférence, inclure une entrée dans votre fichier "propriétés" dont l'identifiant est le nom de la préférence suivie par <code>_description</code>, et dont la valeur est la description localisée.</p> - </li> -</ul> - -<p>Par exemple, supposons que votre "package.json" définit une seule préférence:</p> - -<pre>{ - "preferences": [ - { - "type": "string", - "name": "monster_name", - "value": "Gerald", - "title": "Name" - } - ], - "name": "monster-builder", - "license": "MPL 2.0", - "author": "me", - "version": "0.1", - "fullName": "Monster Builder", - "id": "monster-builder@me.org", - "description": "Build your own monster" -} -</pre> - -<p>Dans votre fichier "en-US.properties", inclure ces deux éléments :</p> - -<pre>monster_name_title= Name -monster_name_description= What is the monster's name? -</pre> - -<p>Dans votre fichier "fr.properties", inclure la traduction française:</p> - -<pre>monster_name_title= Nom -monster_name_description= Quel est le nom du monstre ? -</pre> - -<p>Quand la configuration locale du navigateur est "en-US", les utilisateurs voient dans le gestionnaire de modules complémentaires:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/6525/preference-us.png" style="height: 77px; width: 571px;"></p> - -<p>Lorsque la configuration locale du navigateur est "fr", ils voient ceci:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/6523/preference-french.png"></p> - -<p>Les types <code>menulist</code> et <code>radio</code> de préférences ont des options. L'attribut <code>label</code> de chaque option est affichée à l'utilisateur. Si le fichier de paramètres régionaux a une entrée avec la valeur de l'élément <code>label</code> préfixé «{name}_options." comme clé (où {name} est le nom de la préférence), sa valeur est utilisée comme étiquette localisée.</p> - -<h2 id="Utilisation_de_l'identificateurs">Utilisation de l'identificateurs</h2> - -<p>Si le système de localisation ne peut pas trouver une entrée pour un identifiant particulier en utilisant la localisation en cours, elle retourne juste l'identifiant lui-même.</p> - -<p>C'est intéressante car vous pouvez écrire du code "localisable", entièrement fonctionnel sans avoir à écrire des fichiers locaux. Vous pouvez simplement utiliser les chaînes de langue par défaut et fournir ultérieurement les fichiers <code>.properties</code> pour toutes les langues supplémentaires que vous souhaitez soutenir.</p> - -<p>Par exemple, dans le cas ci-dessus, vous pouvez utiliser "Bonjour!" comme identificateur, et juste avoir un <code>.properties</code> pour la locale "fr":</p> - -<pre>Hello!= Bonjour! -</pre> - -<p>Puis, quand la locale "en-US", le système ne parviennent pas à trouver un <code>.properties</code>, et revoit "Bonjour!".</p> - -<div class="warning"> -<p>Cependant, cette approche rend difficile le maintien d'une add-on qui a de nombreuses localisations, parce que vous utilisez les chaînes de langue par défaut en tant que chaînes de l'interface utilisateur et que les clés recherchent vos traductions. Cela signifie que si vous voulez changer le libellé d'une chaîne dans la langue par défaut, ou corriger une faute de frappe, alors vous cassez tous vos fichiers de paramètres régionaux.</p> -</div> - -<h2 id="Locale_Updater">Locale Updater</h2> - -<p>L'add-on <a href="https://github.com/downloads/ochameau/locale-updater/locale-updater.xpi" title="https://github.com/downloads/ochameau/locale-updater/locale-updater.xpi">locale updater (paramètres régionaux de mise à jour)</a> rend plus facile la mise à jour des fichiers locaux. Une fois que vous l'avez installé, ouvrez le Gestionnaire de modules complémentaires, et vous verrez un nouveau bouton "Update l10n" à côté de chaque add-on que vous avez installé :</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/6515/locale-updater.png"></p> - -<p>Cliquez sur le bouton et vous serez invité à entrer un nouveau fichier <code>.properties</code> pour cette add-on. Si vous fournissez un nouveau fichier, les données locales de l'add-on seront mis à jour avec le nouveau fichier.</p> - -<h2 id="Limites">Limites</h2> - -<p>Le support de la localisation actuelle est un premier pas vers la prise en charge complète, et contient un certain nombre de limitations.</p> - -<ul> - <li> - <p>Il n'y a pas de soutien pour les scripts de contenu ou des fichiers CSS: pour le moment, vous ne pouvez localiser les chaînes apparaissant dans les fichiers JavaScript qui sont appelés avec <code>require()</code>.</p> - </li> - <li> - <p>Il n'y a pas de soutien pour localiser <a href="/fr/docs/Mozilla/Add-ons/Install_Manifests#name" title="/fr/Add-ons/Install_Manifests#name">name</a> ou <a href="/fr/docs/Mozilla/Add-ons/Install_Manifests#description" title="/fr/Add-ons/Install_Manifests#description">description</a> de l'add-on : votre seule option étant de modifier le fichier install.rdf après la construction du XPI. Voir <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1218719" title="https://bugzilla.mozilla.org/show_bug.cgi?id=1218719">bug 1218719</a>.</p> - </li> - <li> - <p>L'ensemble des fichiers locaux sont globaux à travers une add-on. Cela signifie qu'un module n'est pas en mesure de remplacer une traduction plus générale: si un module <code>informal.js</code> ne peut pas spécifier que "hello_id" survenant dans son code doit être traduit par "Salut!".</p> - </li> - <li> - <p>Les outils SDK compilent les fichiers de localisation dans un format JSON lors de la production d'un XPI. Cela signifie que les traducteurs ne peuvent pas travailler directement sur le XPI, mais doivent avoir accès à la source de l'add-on.</p> - </li> - <li> - <p>Le développeur de l'add-on doit assembler manuellement l'ensemble des chaînes localisables qui composent les fichiers locaux.</p> - </li> -</ul> - -<h2 id="Voir_aussi_-_pour_les_développeurs_qui_cherchent_à_localiser_les_add-ons_non-SDK">Voir aussi - pour les développeurs qui cherchent à localiser les add-ons non-SDK</h2> - -<ul> - <li>Comment localiser les pages HTML, les fichiers XUL, et les fichiers js/jsm des add-ons bootstrapped : <a href="/fr/docs/Mozilla/Add-ons/Bootstrapped_extensions#Localization_%28L10n%29" title="/fr/Add-ons/Bootstrapped_extensions#Localization_%28L10n%29">Bootstrapped Extensions::Localization(l10n)</a></li> - <li>Tutoriel Localisation XUL School : <a href="/fr/docs/Mozilla/Tech/XUL/Tutorial/Localization" title="/fr/docs/Mozilla/Tech/XUL/Tutorial/Localization">XUL : Localisation</a> et <a href="/fr/docs/Mozilla/Tech/XUL/Tutorial/Property_Files" title="/fr/docs/Mozilla/Tech/XUL/Tutorial/Property_Files">Les fichiers de propriétés</a></li> - <li><a href="/fr/docs/Mozilla/Localization/Localizing_an_extension">Localisation d'une extension</a></li> -</ul> |