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 description property of SuggestResult 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) {
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;
}
});