Question

我没有发现类似的问题 - 我在搜索引擎优化和谷歌上广泛搜索过这个主题，但找不到答案。

这是我的难题：

我有一个包含表格的设置页面
我想让那张桌子可以搜索（不可分类，只能搜索）
我正在将一些JS代码直接注入到页面中，并在Manifest.JS中指定了一个脚本，并且该脚本将表格克隆为具有正确类的DIV，并添加了＆＃39;列表＆＃ 39;类表到表格的主体，以及表格主体的相应类别＆＃39; td＆＃39;元素 - 我想要搜索的一列。
下一步涉及点击扩展程序的图标，执行循环XHR请求（遗憾的是同步，因为我无法理解如何使其异步）并且表格的行是彩色的，有些是＆＃39; TD＆＃39;细胞填充。我希望能够根据这些表格来过滤表格。新内容。

不管我是否把

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

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

'Uncaught ReferenceError: List is not defined'

更新：代码如下。

我怎样才能使该表可搜索？我做错了什么，应该在什么之前注入或写出？

代码如下：

HTML：

<html>
<head>
<meta http-equiv = "Content-Type" content = "text/html; charset = utf-8">
</head>
<body>
<title> a title</title>
<table>a table</table>
<table>
<thead>
<tr>
<th>someContent</th>
/*14 <th> elements corresponding to 14 columns, the last one being: */
<th>contentIWantToSearch</th>
</tr>
</thead>
<tbody>
<tr id = "some ID" class = "someClass" style = "someStyle">
/*14 <td> elements, with the last one being:*/
<td> the actual content I want to filter the table after</td>
</tr>
/*next, a long list of <tr>s, same structure, part of the table */
</tbody>
<tfoot>
/*one <tr>, 11 <td> */
</tfoot>
</table>
</body>

Chrome扩展清单（Manifest.JSON）

[...]
"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

INCLUDEDSTUFF.JS

/*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");
}

}

content_script.js：

/*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);

background.js：

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

Answer 1

您需要掌握isolated world：

的概念

内容脚本在称为孤立世界的特殊环境中执行。他们可以访问注入页面的DOM，但不能访问页面创建的任何JavaScript变量或函数。它将每个内容脚本视为在其运行的页面上没有执行其他JavaScript。反过来也是如此：页面上运行的JavaScript无法调用任何函数或访问内容脚本定义的任何变量。

首次注入includedstuff.js时，会为文档创建一个单独的JS上下文并在其中执行。

但是，当您插入<script>标记时，它会在页面的上下文中执行代码。因此，所有List内容只对页面本身可见。

当您content_script执行时，它会在与includedstuff.js相同的上下文中执行，但不包括List。

故事的故事：你真的需要向页面公开List吗？可能不是 - 你添加它，因此你是使用它的人。

从CDN加载它没有任何优势 - 实际上，您正在请求特定版本，因此它不会发生变化。它还增加了另一个网络请求。你不需要那个。

相反，请在您的扩展程序文件中加入list.min.js，然后修改清单：

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

这将在您的代码执行的上下文中加载List;它对页面本身是不可见的，但它不会影响你的代码。

List.JS通过Chrome扩展程序注入时不起作用

INCLUDEDSTUFF.JS

background.js：

1 个答案: