Javascript List.JS不'；当通过镀铬延长线注入时，不起作用

我没有发现一个类似的问题——我确实在SO和Google上广泛搜索了这个话题，但找不到答案

这是我的难题：

我有一个包含表格的固定页面

我想使该表可搜索（不是可排序的，只是可搜索的）

我使用Manifest.JS中指定的脚本将一些JS代码直接注入页面，该脚本使用正确的类将表克隆到一个

DIV

，将“list”类添加到表体中，并将相应的类添加到表体“td”元素中——我只想对其中的一列进行搜索

下一步是单击扩展的图标，执行循环XHR请求（遗憾的是同步，因为我无法了解如何使其异步），表的行被着色，一些“td”单元格被填充。我希望能够根据这些“td”新内容过滤表

不管我是否把

 var options = {
        valueNames: ["searchterm"]
        };
    var eventsList = new List("events", options);

在manifest.js中指定的预注入代码中，或者在单击扩展图标时运行的其他脚本中，我在Chrome控制台中得到了相同的错误：

'Uncaught ReferenceError: List is not defined'

更新：代码如下

我怎样才能使那张桌子可以搜索？我做错了什么，在做什么之前应该注入或写入什么

代码如下：

Html:

---

---

INCLUDEDSTUFF.JS

---

background.js：

---

您需要掌握以下概念：

内容脚本在称为隔离世界的特殊环境中执行。它们可以访问所注入页面的DOM，但不能访问页面创建的任何JavaScript变量或函数。对于每个内容脚本，它看起来就像在其运行的页面上没有其他JavaScript执行一样。反过来也是如此：页面上运行的JavaScript不能调用任何函数或访问内容脚本定义的任何变量

当您的

includedstuff.js

第一次被注入时，会为文档创建一个单独的js上下文并在其中执行

但是，当您插入

标记时，它会在页面的上下文中执行代码。因此，所有

列表

内容只对页面本身可见

当您的

内容\u脚本执行时，它将在与
includedstuff.js
相同的上下文中执行，其中不包括
列表


故事的士气：你真的需要将
列表
公开到页面上吗？可能不是——你加上它，因此你就是使用它的人

从CDN加载它没有什么好处——事实上，您正在请求一个特定的版本，因此它不会改变。它还添加了另一个网络请求。你不需要那个

相反，在扩展名的文件中包含
list.min.js
，并修改清单：

"content_scripts": [
  {
    "matches": ["http://example.com/*"],
    "js": ["list.min.js", "includedstuff.js"],
    "css": ["list.css", /*...*/]
  }

这将在代码正在执行的上下文中加载
列表
；它对页面本身不可见，但不会影响您的代码。
首先，确保您使用正确的“名称”调用所有脚本。你真的是指
manifest.js
还是
manifest.json
？请看下面的图片。注意这个概念。是的，包括相关代码。顺便说一句，阅读指南不会有什么坏处（不过你的问题不是很糟糕，它只是缺少相关代码，并且包含噪音，如“我的第一篇文章”和“非常感谢”），它不允许我编辑或添加代码。这不是相关代码。这就是你注射的网页？它已经有了
list.js
？你的清单是什么？我第一次无法编辑它，因为我的网络上有一些访问权限，然后我在部分上编辑了它，以使usre获得正确的格式。它通过将list.js添加到扩展内容中，并将其注入清单，以及“includedstuff.js”来工作。感谢您为我解决了这个问题，也感谢您上javascript课，我们将进一步研究这个主题。很抱歉我的发布和编辑失误。
[...]
"permissions": [
"URL I want it to inject the script automatically",
"declarativeContent"
],
"background": {
"scripts": ["background.js"],
"persistent": false
},
"content_scripts": [
{
"matches": ["URL I want to run it on*"],
"js": ["includedstuff.js"],
"css": ["list.css", "someothercss"]
}
[... rest of manifest.json 

/*appending the list.js CDN on page load*/
var head = document.getElementsByTagName("head")[0];
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "https://cdnjs.cloudflare.com/ajax/libs/list.js/1.1.1/list.min.js";
head.appendChild(script);
/*creating the required list.js classes, only for pages with the structure mentioned above - I cannot match it perfectly based on URL*/
if(document.getElementsByTagName("table").length >1) {
var fulltable = document.getElementsByTagName("table")[1];
var searchboxelem = document.createElement("input");
var events = document.createElement("div");
events.id = "events";
searchboxelem.setAttribute("class", "search");
searchboxelem.setAttribute("placeholder", "Input Search Term");
events.appendChild(searchboxelem);
events.appendChild(fulltable.cloneNode(true));
fulltable.parentNode.replaceChild(events, fulltable);
var defineachrow = document.getElementsByTagName("table")[1].getElementsByTagName("tbody")[0].getElementsByTagName("tr");

document.getElementsByTagName("table")[1].getElementsByTagName("tbody")[0].setAttribute("class", "list");

for(x=0; x<defineachrow.length; x++) {
defineachrow[x].getElementsByTagName("td")[13].setAttribute("class", "searchterm");
}

}

/*some script with XHR loop requests - and sadly sync, as I could not get around it to make it async, it works however, and then:*/
var options = {
valueNames:["searchterm"]
};
var eventsList = new List("events", options);

chrome.browserAction.onCLicked.addListener(
function(tab) {
chrome.tabs.executeScript(null, {file:
"content_script.js"});
});

"content_scripts": [
  {
    "matches": ["http://example.com/*"],
    "js": ["list.min.js", "includedstuff.js"],
    "css": ["list.css", /*...*/]
  }