Расширение Chrome не распознает getElementsByClassName ("listBodyRow") [i], но работает в консоли Chrome.

Question

Это работает в консоли с ошибкой, но дает мне желаемый вывод на моем DOM.

Ниже приведена ошибка: Uncaught TypeError: Невозможно прочитать свойство 'getElementsByClassName' undefined в: 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 веб-страницы или манипулировать им, у вас есть два способа:

1. * 1007. и используйте обмен сообщениями:

   chrome.tabs.sendMessage() со своей фоновой / всплывающей страницы к прослушивателю внедренного содержимого chrome.runtime.onMessage, который будет выполнять действия на веб-странице и передавать результаты через sendResponse обратный вызовсогласно документации (примечание: поддерживаются только объекты с поддержкой JSON, такие как числа, строки, массивы, простые объекты, что означает не элементы DOM, не классы и не функции). Если сценарий содержимого должен инициировать связь со страницей расширения, он должен использовать chrome.runtime.sendMessage().

2. Или использовать API-интерфейсы Tabs для внедрения сценария содержимого :
   chrome.tabs.executeScript(tabId, details, callback)

   • Требуемые разрешения: "tabs", "https://www.example.com/*"
     (или "<all_urls>" и такие варианты, как "*://*/*", "http://*/*", "https://*/*")

   • В случае явной активации пользователя лучше выбрать разрешение "activeTab" вместо "tabs" и "<all_urls>", поскольку оно служит альтернативой для многих случаев использования "<all_urls>", но не отображает предупреждающее сообщение во время установки .

   • .executeScript() может использоваться с функцией обратного вызова, которая получает массив последних оцененных выражений в введенном содержимомскрипт, по одному элементу на каждый кадр, в который он вставляется на вкладке. Chrome использует JSON.parse() и JSON.stringify() для внутренних результатов, ограничивая поддерживаемые типы простыми объектами и простыми строковыми значениями, такими как число / строка или их массивы.
     Так что он не работает для элементов, функций DOM,пользовательские свойства, методы получения / установки: вам нужно вручную отобразить / извлечь необходимые данные и передать их в виде простого массива / объекта.