1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
|
---
title: omnibox.onInputChanged
slug: Mozilla/Add-ons/WebExtensions/API/omnibox/onInputChanged
tags:
- API
- Add-ons
- Event
- Extensions
- Reference
- WebExtensions
- omnibox
- onInputChanged
translation_of: Mozilla/Add-ons/WebExtensions/API/omnibox/onInputChanged
---
<div>{{AddonSidebar()}}</div>
<p>Lancé chaque fois que l'utilisateur modifie sa saisie, après avoir commencé à interagir avec votre extension en saisissant son mot-clé dans la barre d'adresse, puis en appuyant sur la touche espace.</p>
<p>C'est l'événement que vous utiliserez pour remplir la liste déroulante de la barre d'adresse avec des suggestions. L'écouteur d'événement est transmis :</p>
<ul>
<li>l'entrée actuelle de l'utilisateur (n'incluant pas le mot-clé lui-même ou l'espace après)</li>
<li>une fonction de rappel que l'écouteur peut appeler avec un tableau d'objets {{WebExtAPIRef("omnibox.SuggestResult")}}, un pour chaque suggestion. Seules les six premières suggestions seront affichées..</li>
</ul>
<h2 id="Syntaxe">Syntaxe</h2>
<pre class="brush: js">browser.omnibox.onInputChanged.addListener(listener)
browser.omnibox.onInputChanged.removeListener(listener)
browser.omnibox.onInputChanged.hasListener(listener)
</pre>
<p>Les événements ont trois fonctions :</p>
<dl>
<dt><code>addListener(listener)</code></dt>
<dd>Ajoute un écouteur à cet événement.</dd>
<dt><code>removeListener(listener)</code></dt>
<dd>Arrêtez d'écouter cet événement. L'argument <code>listener</code> est l'écouteur à supprimer.</dd>
<dt><code>hasListener(listener)</code></dt>
<dd>Vérifiez si <code>listener</code> est enregistré pour cet événement. Renvoie <code>true</code>s'il écoute, sinon <code>false</code>.</dd>
</dl>
<h2 id="syntaxe_addListener">syntaxe addListener</h2>
<p>The listener function will be passed two parameters: a string <code>text</code>, and a callback function <code>suggest</code>.</p>
<h3 id="Parameters">Parameters</h3>
<dl>
<dt><code>text</code></dt>
<dd>
<p><code>String</code>. L'entrée actuelle de l'utilisateur dans la barre d'adresse, n'incluant pas le mot-clé de l'extension lui-même ou l'espace après le mot-clé. Utilisez-le pour décider quelles suggestions afficher dans la liste déroulante.</p>
</dd>
<dt><code>suggest</code></dt>
<dd>
<p><code>Function</code>. Une fonction de rappel que l'écouteur d'événement peut appeler pour fournir des suggestions pour la liste déroulante de la barre d'adresse. La fonction de rappel s'attend à recevoir un tableau d'objets {{WebExtAPIRef("omnibox.SuggestResult")}} un pour chaque suggestion. Seules les six premières suggestions seront affichées.</p>
</dd>
</dl>
<h2 id="Compatibilité_du_navigateur">Compatibilité du navigateur</h2>
<p>{{Compat("webextensions.api.omnibox.onInputStarted")}}</p>
<h2 id="Exemples">Exemples</h2>
<p>Cet exemple interprète l'entrée de l'utilisateur en tant que nom de propriété CSS et remplit la liste déroulante avec un objet {{WebExtAPIRef("omnibox.SuggestResult")}} pour chaque propriété CSS correspondant à l'entrée. La <code>description SuggestResult</code> est le nom complet de la propriété et le <code>contenu</code> est la page MDN de cette propriété.</p>
<p>L'exemple écoute également {{WebExtAPIRef("omnibox.onInputEntered")}}, et ouvre la page MDN correspondant à la sélection, conformément à l'argument {{WebExtAPIRef("omnibox.OnInputEnteredDisposition")}}.</p>
<pre class="brush: js">browser.omnibox.setDefaultSuggestion({
description: "Type the name of a CSS property"
});
/*
Very short list of a few CSS properties.
*/
const props = [
"animation",
"background",
"border",
"box-shadow",
"color",
"display",
"flex",
"flex",
"float",
"font",
"grid",
"margin",
"opacity",
"overflow",
"padding",
"position",
"transform",
"transition"
];
const baseURL = "https://developer.mozilla.org/en-US/docs/Web/CSS/";
/*
Return an array of SuggestResult objects,
one for each CSS property that matches the user's input.
*/
function getMatchingProperties(input) {
var result = [];
for (prop of props) {
if (prop.indexOf(input) === 0) {
console.log(prop);
let suggestion = {
content: baseURL + prop,
description: prop
}
result.push(suggestion);
} else {
if (result.length != 0) {
return result;
}
}
}
return result;
}
browser.omnibox.onInputChanged.addListener((input, suggest) => {
suggest(getMatchingProperties(input));
});
browser.omnibox.onInputEntered.addListener((url, disposition) => {
switch (disposition) {
case "currentTab":
browser.tabs.update({url});
break;
case "newForegroundTab":
browser.tabs.create({url});
break;
case "newBackgroundTab":
browser.tabs.create({url, active: false});
break;
}
});
</pre>
<p>{{WebExtExamples}}</p>
<div class="note"><p><strong>Note :</strong></p>
<p>Cette API est basée sur l'API Chromium <a href="https://developer.chrome.com/extensions/omnibox"><code>chrome.omnibox</code></a>.</p>
<p>Les données de compatibilité relatives à Microsoft Edge sont fournies par Microsoft Corporation et incluses ici sous la licence Creative Commons Attribution 3.0 pour les États-Unis.</p>
</div>
|
