Chrome 扩展 - 在 Keyup 上过滤 Table

Question

我正在尝试整理一个 Chrome 扩展，它在边栏中包含 search/filter 功能，当用户单击扩展图标时弹出。边栏出现并显示 table 信息，但由于 table 中将包含大量信息，我希望用户能够搜索并过滤结果正是他们所需要的。我借用了我在网上找到的一个在网页中运行良好的功能，但我对使用 Chrome 扩展非常陌生，无法弄清楚如何正确触发该功能。由于我不能在 html 页面中使用 javascript 内联扩展，我可以使用一些帮助来弄清楚如何让它在单独的 .js 文件中工作。

我认为问题在于我不确定如何使用 javascript 文件中的侦听器来检测搜索字段中的 keyup 和运行缩小 table 信息显示。目的是当用户在搜索框中键入时，table 中的结果会通过隐藏不匹配的信息来缩小范围，直到只显示包含他们需要的信息的行。

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

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

Answer 1

您还没有在 popup.html 文件中包含 popup.js，一旦包含，您可以为 #myInput 元素设置一个 keyup 侦听器并使用 myFunction 作为回调函数，像这样：

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() {
  ..
  ..
}

完成后，您可以从 #myInput 元素中删除 onkeyup 属性。

Chrome 扩展 - 在 Keyup 上过滤 Table

Chrome Extension - Filter Table on Keyup

javascript

search

google-chrome-extension

keyup