omnibox-js
Version:
Turn your div into a chrome omnibox
100 lines (96 loc) • 4 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Omnibox.js</title>
<link rel="stylesheet" href="../omnibox.css">
</head>
<body>
<div id="input" style="position: relative;width: 800px; margin: 50px auto;">
<!-- <div class="omn-container">
<textarea class="omn-input" autocapitalize="off" autocomplete="off" autocorrect="off" maxlength="2048"
role="combobox" rows="1" style="resize:none" spellcheck="false"></textarea>
<div class="omn-search-icon">
<svg focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path
d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z">
</path>
</svg>
</div>
</div> -->
</div>
</body>
<script type="module">
import { Omnibox, QueryEvent, Render, HeadlessOmnibox } from "../index.js";
let suggestions = {
"https://github.com": "Github",
"https://google.com": "Google",
"https://apple.com": "Apple",
"https://netflix.com": "Netflix",
"https://youtube.com": "YouTube",
"https://twitter.com": "Twitter",
"https://yahoo.com": "Yahoo",
"https://facebook.com": "Facebook",
"https://amazon.com": "Amazon",
"https://wikipedia.com": "Wikipedia",
"https://spotify.com": "Spotify",
"https://openai.com": "OpenAI",
"https://stripe.com": "Stripe",
"https://instagram.com": "Instagram",
};
suggestions = Object.entries(suggestions).map(([key, value]) => {
return { content: key, description: value }
});
let headless = new HeadlessOmnibox({
placeholder: "Start search with omnibox.js",
defaultSuggestion: "Omnibox.js",
maxSuggestionSize: 3,
onSearch: (query) => {
return suggestions.filter(({ description }) => description.toLowerCase().indexOf(query.toLowerCase()) > -1);
},
onFormat: (index, doc) => {
return { description: `<match>${doc.description}</match> - <dim>${doc.content}</dim>`, content: doc.content };
},
onAppend: (query) => {
return [{
content: `https://google.com/search?q=${query}`,
description: `Search <match>${query}</match> on google`,
}]
},
});
headless.addPrefixQueryEvent(":", {
name: "Command",
defaultSearch: true,
icon: "https://query.rs/icon.png",
onSearch: (query) => {
query = query.replace(/:/g, "");
return suggestions.filter(({ description }) => description.toLowerCase().indexOf(query.toLowerCase()) > -1);
},
})
const omnibox = Omnibox.webpage({
// element: document.querySelector(".omn-container"),
el: "#input",
icon: "https://rust.extension.sh/logo.png",
onFooter: (render, pagination) => {
let footer = document.createElement("div");
footer.innerHTML = `
<div style="display: flex;padding: 8px 10px; background-color: #abcdef">
<div>${pagination.curr}/${pagination.total}</div>
<div class="previous" style="padding: 0 12px;">Previous</div>
<div class="next">Next</div>
`;
footer.querySelector(".previous").onclick = () => {
render.pageUp();
};
footer.querySelector(".next").onclick = () => {
render.pageDown();
};
return footer;
}
});
omnibox.extendFromHeadless(headless);
omnibox.bootstrap();
</script>
</html>