Question

它在Console中工作时出现错误，但在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";
    }

}

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

Answer 1

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

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

chrome.tabs.sendMessage()从后台/弹出页面到注入的内容脚本的chrome.runtime.onMessage侦听器，该侦听器将在网页上执行操作并根据文档通过sendResponse回调传输结果（注意：仅支持JSON格式的对象，例如数字，字符串，数组，简单对象，这意味着不是DOM元素，不是类，也不是函数）。如果内容脚本需要启动与扩展页面的通信，则应使用chrome.runtime.sendMessage()。
或使用Tabs API注入内容脚本：
chrome.tabs.executeScript(tabId, details, callback)
- 所需的权限："tabs"，"https://www.example.com/*"
  （或"<all_urls>"以及"*://*/*"，"http://*/*"，"https://*/*"之类的变体）
- 在显式激活用户的情况下，更好的选择是使用"activeTab"权限而不是"tabs"和"<all_urls>"，因为它可以作为{ {1}}，但在安装过程中不显示任何警告消息。
- "<all_urls>"可以与回调函数一起使用，该回调函数在注入的内容脚本中接收最后评估的表达式的数组，每一个插入到选项卡中的帧中都有一个元素。 Chrome内部在结果上使用.executeScript()和JSON.parse()，因此将受支持的类型限制为普通对象和简单的可字符串化的值，例如数字/字符串或它们的数组。
  因此，它不适用于DOM元素，函数，自定义属性，getter / setter：您需要手动映射/提取所需的数据并将其传递到简单的数组/对象中。

Chrome扩展程序无法识别getElementsByClassName（“ listBodyRow”）[i]，但可以在chrome控制台中运行

1 个答案: