Удалите некоторый элемент из текущего DOM в расширении chrome, используя Content Script

Question

Если на какой-либо веб-странице есть много <div> s, например:

<div tbinfo="ouid=1234567890&rouid=987654321"></div>
<div tbinfo="ouid=1234567891&rouid=987654321"></div>
<div tbinfo="ouid=1234567892&rouid=987654321"></div>
...

У меня есть сценарии содержимого, пытающиеся удалить из них некоторые подразделения, если либо ouid, либо rouid соответствует некоторому ключу:

var i;
for (i = 0; i < arrID.length; i++) {
    chrome.tabs.query(
        {active: true}, function(tabs) {
            var tab = tabs[0];

            let code = `document.querySelectorAll('div[tbinfo]')`;

            chrome.tabs.executeScript(tab.id, {code}, function (result) {
                const key = arrID[i];
                result.forEach(div => {
                    const tbinfoArr = div.getAttribute('tbinfo');
                    if (tbinfoArr.includes(key)) {
                        div.remove();
                    }
                });
            });
        }
    );
}

Но chrome говорит Error handling response: TypeError: div.getAttribute is not a function

Что здесь не так?

---

Предложено @wOxxOm, я изменил мой код, как показано ниже:

for (i = 0; i < arrID.length; i++) {
    alert(arrID[0] + ' ' + (typeof arrID[0])); // Alert No.1 // result: 123456789 string
    chrome.tabs.query(
        {active: true}, function(tabs) {
            var tab = tabs[0];

            const params = { ID: arrID[i] };
          alert(arrID[i] + ' ' + JSON.stringify(params)); // Alert No.2 // result = undefined {}

         alert(`(${ removeContent })(${ JSON.stringify(params) })`); // Alert No.4
            chrome.tabs.executeScript({
                code: `(${ removeContent })(${ JSON.stringify(params) })`
            }, ([result] = []) => {
                //
            });
        }
    );
}

function removeContent(ID) {
    var allElement = document.querySelectorAll('div[tbinfo]');
    alert(JSON.stringify(ID)); // Alert No.3
    var key = ID.ID;
    allElement.forEach(div => {
        const tbinfoArr = div.getAttribute('tbinfo');
        if (tbinfoArr.includes(key)) {
            div.remove();
        }
    });
    return {
        success: true,
    };
}

alert(JSON.stringify(ID)); показывает, что параметр ID пуст (результат: {}).

Итак, я проверил значение идентификатора и обнаружил, что // Alert No.1 работал хорошо, но // Alert No.2 был пуст.

Так что кажется, что переменная вне chrome.tabs.query( не может быть указана внутри ??

---

Значение (${ removeContent })(${ JSON.stringify(params) }) равно

(function removeContent(ID) {
    var allElement = document.querySelectorAll('div[tbinfo]');
    var key = ID.ID;
    allElement.forEach(div => {
        const tbinfoArr = div.getAttribute('tbinfo');
        if (tbinfoArr.includes(key)) {
            div.remove();
        }   
    });
    return {
        success: true,
    };
}) ({})

Это значение взято из // Alert No.4.

Answer 1

Как обсуждено в этом посте , асинхронный процесс внутри для l oop вызовет проблемы.

Замените l oop на forEach, чтобы решить проблему.