I'm trying to sort out a Chrome Extension that includes a search/filter capability in a sidebar that pops out when the user clicks the extension icon. The sidebar appears and presents a table of information, but as the table is going to have a bunch of information in it, I'd like the user to be able to search and filter the results down to just what they need. I borrowed a function I found online that works fine in a webpage, but I'm extremely new to working with Chrome Extensions and can't figure out how to trigger the function correctly. Since I can't use javascript inline in the html page for the extension I could use some help figuring out how to get it to work in a separate .js file.
I think the issue is that I'm not sure how to use listeners in the javascript file to detect the keyup in the search field and run the function that narrows down the table information displayed. The intent is that as the user is typing in the search box, the result in the table narrow down by hiding the information that doesn't match until only the row that contains the info they need is displayed.
manifest.json
{
"manifest_version": 2,
"name": "User Sidebar",
"description": "Sidebar access to Table Information",
"version": "1.0",
"content_scripts": [{
"matches": ["<all_urls>"],
"js": ["content-script.js"],
"run_at": "document_end"
}],
"browser_action": {
},
"web_accessible_resources": ["popup.html"],
"background": {
"scripts":["background.js"]
},
"permissions": [
"activeTab"
]
}
background.js
chrome.browserAction.onClicked.addListener(function(){
chrome.tabs.query({active: true, currentWindow: true}, function(tabs){
chrome.tabs.sendMessage(tabs[0].id,"toggle");
})
});
popup.html
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="popout.css">
</head>
<body>
<p id="title">INFO TABLE</p>
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names..">
<table id="myTable">
<tr>
<td>North</td>
<td>Icon 1</td>
</tr>
<tr>
<td>East</td>
<td>Icon 2</td>
</tr>
<tr>
<td>South</td>
<td>Icon 3</td>
</tr>
<tr>
<td>West</td>
<td>Icon 4</td>
</tr>
</table>
</html>
popup.js
function myFunction() {
// Declare variables
var input, filter, table, tr, td, i, txtValue;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
table = document.getElementById("myTable");
tr = table.getElementsByTagName("tr");
// Loop through all table rows, and hide those who don't match the search query
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[0];
if (td) {
txtValue = td.textContent || td.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
}
content-script.js
chrome.runtime.onMessage.addListener(function(msg, sender){
if(msg == "toggle"){
toggle();
}
})
var iframe = document.createElement('iframe');
iframe.style.background = "LightGray";
iframe.style.height = "100%";
iframe.style.width = "0px";
iframe.style.position = "fixed";
iframe.style.top = "0px";
iframe.style.left = "0px";
iframe.style.zIndex = "9000000000000000000";
iframe.frameBorder = "none";
iframe.src = chrome.extension.getURL("popup.html")
document.body.appendChild(iframe);
function toggle(){
if(iframe.style.width == "0px"){
iframe.style.width="300px";
}
else{
iframe.style.width="0px";
}
}
You haven't included popup.js in the popup.html files, once it is included, you can set a keyup listener to the #myInput element and use myFunction as the callback function, something like this:
popup.html
<!DOCTYPE html>
<html lang="en">
..
..
<script type="text/javascript" src="popup.js"></script>
</html>
popup.js
document.getElementById("myInput").addEventListener('keyup', myFunction);
function myFunction() {
..
..
}
Once that is done, you can remove the onkeyup attribute from the #myInput element.