Question

我正在尝试编写chrome扩展名（暂时），该扩展名更改具有特定“类名”的元素的背景色。此代码（内容脚本）不起作用：

let divs = document.getElementsByClassName('arbitrary-class-name');

for (let el of divs) {
    el.style['background-color'] = 'FFF298';
}

当我尝试执行时，出现“ Uncaught TypeError：divs不可迭代”。我还尝试检查源代码，并且发现要加载的所有元素都是在加载过程中动态创建的，也许我的代码正在尝试访问尚不存在的元素？

编辑：this是我要使用的页面，例如，我想更改所有“ partecipante-info” div的背景颜色。

edit2：此代码始终在我的脚本之后运行：

XHR finished loading: POST "https://some-link".
send @ jquery-1.12.4.js:10254
ajax @ jquery-1.12.4.js:9738
(anonymous) @ genera_tabellone_v2.js:15
fire @ jquery-1.12.4.js:3232
fireWith @ jquery-1.12.4.js:3362
ready @ jquery-1.12.4.js:3582
completed @ jquery-1.12.4.js:3617

Answer 1

简介

如果元素是动态生成的，则需要在元素生成后运行代码。

您可以使用几种方法，但我有2条建议：

您可以在页面加载后尝试运行一次代码。看看@以下链接。如果要检测镶边选项卡事件，可以使用以下命令：Chrome Extension: Make it run every page load。否则，您也可以尝试侦听人体负荷，但我不知道这样是否可行。
另一个选择是使用SetInterval并在特定时间搜索特定元素。将其放在chrome.tabs.onUpdated内，每隔1秒钟检查一次。.当发现具有特定类的元素时，请禁用setInterval。

可能的例子

   chrome.tabs.onUpdated.addListener( function (tabId, changeInfo, tab) {
      if (changeInfo.status == 'complete') {
    
            // do your things
        
        let divs = document.getElementsByClassName('arbitrary-class-name');

        //Check if iterable         
        if(divs == null || typeof divs[Symbol.iterator] !== 'function'){
             return;
        }

        if(di)
        for (elt of divs) {
            elt.style['background-color'] = 'FFF298';
        }
    
    
      }
    })

无法从网页获取所有“ div”元素

1 个答案:

简介

可能的例子

参考文献