I have the following code. It is a minimal dialog box with a search bar. The search will display some result from a backend.
HTML:
<body>
<dialog id='dialog-penden'>
<h1 class = "heading-penden">Penden</h1>
<form class="search-container-penden">
<input tabindex = 0 type="text" id="search-bar-penden" placeholder=" Navigate to">
</form>
<nav id = "navigation-mit"></nav>
</dialog>
<button id='s'>open<button>
<script src = "index.js"></script>
</body>
JS:
var dialog = document.getElementById("dialog-penden")
document.getElementById("s").addEventListener("click", function () {
dialog.showModal()
})
let searchBar = document.getElementById("search-bar-penden")
let returnedResults = [
{ "Value": "Sample1", "Type": "Button" },
{ "Value": "Sample2", "Type": "Link" },
{ "Value": "Sample3", "Type": "Button" },
{ "Value": "Sample4", "Type": "Link" },
{ "Value": "Sample5", "Type": "Button" },
]
let navBar = document.getElementById("navigation-mit")
searchBar.addEventListener("keypress", function (e) {
if (e.key === "Enter") {
e.preventDefault();
let searchedValue = searchBar.value
let tabValue = 0
for (value of returnedResults) {
tabValue = tabValue + 1
let searchResultsHTML = `<div >
<a class = 'search-results-penden' href= '${'twitter.com'}'>Text - ${value.Value}. Type - ${value.Type}</a>
</div>
<div class = 'seperator'>`
navBar.innerHTML += searchResultsHTML
}
}
})
})
My aim is to trigger this dialog via a chrome extension on a key command. The only way I could get it to work was listen to the key bindings via manifest.json and then inject this as HTML into the website. However, that doesn't work very well as it broke the site's style/structure etc. What is the correct way of achieving this? I have seen examples of iFrames but not sure how well it will work in this case.
