Javascript Chrome扩展无法识别GetElementsByCassName（“listBodyRow”）[i]，但在Chrome控制台中运行是可行的

它在控制台中工作时出错，但在DOM上提供了所需的输出

以下是错误： 未捕获的TypeError:无法读取未定义的属性“getElementsByClassName” 时间：3:84

我试着用Try…Catch忽略错误，但这可能是个坏主意，因为我只是忽略了错误。而且它也不起作用

for (i = 0; i < 100; i++) {
    var activeTickets = document
        .getElementById("NewGadget0-listBody").getElementsByClassName("listBodyRow")[i].getElementsByClassName("listBodyCell")[12].innerHTML;

    console.log('%c%s', 'color: #00e600', activeTickets);


    if (activeTickets.includes("Priority 4")) {
        document.getElementsByClassName("listBodyRow")[i].style.backgroundColor = "#D2ECEF";
    }

    if (activeTickets.includes("Priority 3")) {
        document.getElementsByClassName("listBodyRow")[i].style.backgroundColor = "#9BC972";
    }

    if (activeTickets.includes("Priority 2")) {
        document.getElementsByClassName("listBodyRow")[i].style.backgroundColor = "#F7D180";
    }

    if (activeTickets.includes("Priority 1")) {
        document.getElementsByClassName("listBodyRow")[i].style.backgroundColor = "#F96B6B";
    }

}

（i=0；i<100；i++）的

{
var activeTickets=文档
.getElementById（“NewGadget0 listBody”）.getElementsByClassName（“listBodyRow”）[i]。getElementsByClassName（“listBodyCell”）[12]。innerHTML；
console.log（“%c%s”，“颜色：#00e600”，activeTickets）；
if（activeTickets.includes（“优先级4”））{
document.getElementsByClassName（“listBodyRow”）[i].style.backgroundColor=“#D2ECEF”；
}
if（activeTickets.includes（“优先级3”））{
document.getElementsByClassName（“listBodyRow”）[i].style.backgroundColor=“#9BC972”；
}
if（activeTickets.includes（“优先级2”））{
document.getElementsByClassName（“listBodyRow”）[i].style.backgroundColor=“#F7D180”；
}
if（activeTickets.includes（“优先级1”））{
document.getElementsByClassName（“listBodyRow”）[i].style.backgroundColor=“#F96B6B”；
}
}

---

它应该运行并突出显示背景，这是在控制台中完成的。但不是我的chrome扩展。

要访问/操作网页DOM，有两种方法：

在manifest.json中声明内容脚本并使用消息传递：

chrome.tabs.sendMessage（）

从后台/弹出页面发送到注入内容脚本的

chrome.runtime.onMessage

监听器，该监听器将在网页上执行操作，并根据文档通过

sendResponse

回调传递结果（注意：仅支持JSON ifiable对象，如数字、字符串、数组、简单对象，这意味着不支持DOM元素、类、函数）。如果内容脚本需要启动与扩展页的通信，则应使用

chrome.runtime.sendMessage（）

或使用Tabs API插入内容脚本：

chrome.tabs.executeScript（tabId，details，callback）

• 所需权限：

  “选项卡”

  ，

  “https://www.example.com/*“

  
  （或

  “

  和类似

  ”*：//*/*“

  ，

  “http://*/*”

  ，

  “https://*/*”

  ）的变体）

• 在显式用户激活的情况下，更好的选择是使用

  “activeTab”

  权限，而不是

  “tabs”

  和

  “

  ”，因为它可以替代

  ”

  ，但在安装过程中不会显示警告消息

• .executeScript（）

  可以与回调函数一起使用，回调函数接收注入内容脚本中最后计算的表达式数组，在选项卡中注入的每帧一个元素。Chrome使用

  JSON.parse（）

  和

  JSON.stringify（）

  ，从而将支持的类型限制为普通对象和简单的字符串化值，如number/string或其数组。
  因此，它不适用于DOM元素、函数、自定义属性、getter/setter：您需要手动映射/提取所需的数据，并将其传递到一个简单的数组/对象中

---

使用外部

src

将

标记放入

中，并使用加载事件确保加载了DOM。是否真的（至少）存在id为

NewGadget0 listBody

的元素中有100个类为

listBodyRow

的元素-每个元素至少有13个类为

listBodyCell

的元素。为什么要使用

document.getElementById（“NewGadget0 listBody”）.getElementsByClassName（“listBodyRow”）[i]

在一种情况下和

document.getElementsByCassName（“listBodyRow”）[i]

在另一种情况下？你知道它们可能不同……你听说过

.querySelector

和

querySelectorAll

吗？这些都会使你的代码更简单，这对document很有好处。getElementsByCassName（“listBodyRow”）[i]哦，太棒了，你这个天才！这是个愚蠢的错误，因为只有90个元素，所以当它循环时出错了。