Question

我正在尝试对Chrome扩展程序进行分类，该扩展程序在边栏中包含搜索/过滤器功能，当用户单击扩展程序图标时，该弹出窗口会弹出。出现侧边栏并显示一个信息表，但是由于该表中将包含大量信息，因此我希望用户能够搜索和过滤结果，使其恰好满足他们的需求。我借用了一个在网上找到的功能，该功能可以在网页上正常运行，但是我对使用Chrome扩展程序非常陌生，无法弄清楚如何正确触发该功能。由于无法在扩展的html页面中使用javascript内联，因此我可以使用一些帮助来弄清楚如何使其在单独的.js文件中工作。

我认为问题是我不确定如何在javascript文件中使用侦听器来检测搜索字段中的键入内容以及运行缩小显示的表格信息的功能。目的是在用户在搜索框中键入内容时，通过隐藏不匹配的信息，直到仅显示包含他们所需信息的行，从而缩小表中的结果。

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

Answer 1

您尚未在popup.js文件中包含popup.html，一旦包含keyup侦听器，就可以为#myInput元素设置myFunction侦听器并使用{{1 }}作为回调函数，如下所示：

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

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

Chrome扩展程序-键盘过滤表

1 个答案: