Chrome Extension - Filter Table on Keyup

Question

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";
    }
}

Chrome extension pages like popup.html can't use inline listeners inside html attributes. Instead, use a separate js file, [more info](/a/25721457). — wOxxOm, Nov 13 '19 at 17:52
However bad an idea inline JS is (particularly in Chrome Extensions) I'm pretty sure you can allow them via the CSP in the manifest, no? — Mitya, Nov 13 '19 at 17:53

Titus · Accepted Answer · 2019-11-13T21:09:40.267

0

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.

edited Nov 13 '19 at 21:09

answered Nov 13 '19 at 18:04

Titus

20,544
1
19
29

I tried making these changes, but when I type in the search box in the sidebar I'm generating, it doesn't seem to be doing anything still in terms of searching and filtering the table information to only show info that matches (or contains) the text I enter in the search bar. – Dave Nov 13 '19 at 19:20
Never mind! I got this to work. I used the note from wOxxOm to add the DOMcontentloaded listener to the .js file as well, and the to close it out. Works great now. Thanks! – Dave Nov 13 '19 at 19:39
@Dave You don't need the `DOMcontentloaded` listener if you add the ` – Titus Nov 13 '19 at 21:11
Oh great. Thanks! – Dave Nov 13 '19 at 21:24

Chrome Extension - Filter Table on Keyup

1 Answers1