This example interprets the user's input as a CSS property name and populates the drop-down list with one omnibox.SuggestResult
object for each CSS property matching the input. The SuggestResult
description
is the full name of the property, and the content
is the MDN page for that property.
The example also listens to omnibox.onInputEntered
, and opens the MDN page corresponding to the selection, according to the omnibox.OnInputEnteredDisposition
argument.
browser.omnibox.setDefaultSuggestion({
description: "Type the name of a CSS property"
});
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/";
function getMatchingProperties(input) {
let 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;
}
});