omnibox.onInputChanged
Wird jedes Mal ausgelöst, wenn der Benutzer seine Eingabe ändert, nachdem er begonnen hat, mit Ihrer Erweiterung zu interagieren, indem er das Schlüsselwort in die Adressleiste eingegeben und dann die Leertaste gedrückt hat.
Dies ist das Ereignis, das Sie verwenden, um die Dropdown-Liste der Adressleiste mit Vorschlägen zu füllen. Der Event-Listener erhält:
- die aktuelle Benutzereingabe (ohne das Schlüsselwort selbst oder das Leerzeichen danach)
- eine Funktion, die der Listener mit einem Array von
omnibox.SuggestResult
-Objekten aufrufen kann, eines für jeden Vorschlag. Nur die ersten sechs Vorschläge werden angezeigt.
Syntax
browser.omnibox.onInputChanged.addListener(listener)
browser.omnibox.onInputChanged.removeListener(listener)
browser.omnibox.onInputChanged.hasListener(listener)
Ereignisse haben drei Funktionen:
addListener(listener)
-
Fügt diesem Ereignis einen Listener hinzu.
removeListener(listener)
-
Beendet das Abhören dieses Ereignisses. Der
listener
-Parameter ist der zu entfernende Listener. hasListener(listener)
-
Überprüft, ob
listener
für dieses Ereignis registriert ist. Gibttrue
zurück, wenn es sich registriert hat, andernfallsfalse
.
addListener Syntax
Die Listener-Funktion erhält zwei Parameter: einen String text
und die Funktion suggest
.
Parameter
text
-
String
. Die aktuelle Benutzereingabe in der Adressleiste, ohne das Schlüsselwort der Erweiterung selbst oder das Leerzeichen nach dem Schlüsselwort. Verwenden Sie dies, um festzulegen, welche Vorschläge in der Dropdown-Liste angezeigt werden. suggest
-
Function
. Eine Funktion, die der Event-Listener aufrufen kann, um Vorschläge für die Dropdown-Liste der Adressleiste bereitzustellen. Die Funktion erwartet ein Array vonomnibox.SuggestResult
-Objekten, eines für jeden Vorschlag. Nur die ersten sechs Vorschläge werden angezeigt.
Browser-Kompatibilität
BCD tables only load in the browser
Beispiele
In diesem Beispiel wird die Benutzereingabe als CSS-Eigenschaftsname interpretiert und die Dropdown-Liste mit einem omnibox.SuggestResult
-Objekt für jede zur Eingabe passende CSS-Eigenschaft gefüllt. Die description
-Eigenschaft von SuggestResult
ist der vollständige Name der Eigenschaft, und der content
ist die MDN-Seite für diese Eigenschaft.
Das Beispiel hört auch auf omnibox.onInputEntered
, und öffnet die entsprechende MDN-Seite gemäß dem omnibox.OnInputEnteredDisposition
-Argument.
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) {
const result = [];
for (const prop of props) {
if (prop.startsWith(input)) {
console.log(prop);
const 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;
}
});
Beispiel-Erweiterungen
Hinweis: Diese API basiert auf der chrome.omnibox
API von Chromium.