javascript - 在控制台中有效，但在内容脚本中无效

Question

这是我的第一篇文章，因为我的 Chrome 扩展程序有问题。 我需要使用内容脚本向页面添加一些按钮和内容。但是我的代码:

function ModifyInsta() {
  var root = {
    img: document.getElementsByClassName("FFVAD"),
    btn: document.getElementsByClassName("ltpMr Slqrh")
  };
  for (var i = 0; i < root.btn.length; i++) {
    if (typeof root.btn[i].getElementsByClassName("btnInsta")[i] === 'undefined') {
      chrome.storage.sync.get("OPTION", function(data) {
        var img = document.createElement("img");
        var space = document.createElement("a");
        var txt1 = document.createTextNode("Download");
        var txt2 = document.createTextNode("");

        space.appendChild(txt2);
        root.btn[i].appendChild(space);

        img.appendChild(txt1);
        root.btn[i].appendChild(img);

        space.innerHTML = "&emsp;&ensp;";
        space.setAttribute('style', "cursor: default; user-select: none")

        if (data.OPTION == "download")
          img.setAttribute('src', chrome.extension.getURL('download.png'));
        else
          img.setAttribute('src', chrome.extension.getURL('view.png'));
        img.setAttribute('href', "#");
        img.setAttribute('role', "button");
        img.setAttribute('class', "btnInsta");
        img.setAttribute('style', "cursor: pointer; user-select: none");
      });
    }
  }
}

在某些页面的控制台中运行良好，但在内容脚本中运行不佳。它说undefined在 root.btn[i].appendChild(space); (“响应 storage.get 时出错:TypeError:无法读取未定义的属性‘appendChild’”)……我真的不知道出了什么问题。每次当我需要帮助时，我都会用谷歌搜索。但我认为这个问题不可能用谷歌搜索。

请帮帮我。我什么都试过了

编辑:

一段 HTML:

<section class="ltpMr Slqrh"><a class="fr66n tiVCN" href="#" role="button"><span class="Szr5J coreSpriteHeartOpen ">Páči sa mi to</span></a><a class="_15y0l OV9Wd" href="#" role="button"><span class="Szr5J coreSpriteComment">Komentovať</span></a><a class="wmtNn fscHb " href="#" role="button" aria-disabled="false"><span class="Szr5J coreSpriteSaveOpen ">Uložiť</span></a></section>

Answer 1

function ModifyInsta() {
var root = {
    img: document.getElementsByClassName("FFVAD"),
    btn: document.getElementsByClassName("ltpMr Slqrh")
};
for(let i = 0; i < root.btn.length; i++) {
    if (typeof root.btn[i].getElementsByClassName("btnInsta")[i] === 'undefined') {
        chrome.storage.sync.get("OPTION", function(data){
            var img = document.createElement("img");
            var space = document.createElement("a");
            var txt1 = document.createTextNode("Download");
            var txt2 = document.createTextNode("");

            space.appendChild(txt2);
            root.btn[i].appendChild(space);

            img.appendChild(txt1);
            root.btn[i].appendChild(img);

            space.innerHTML = "&emsp;&ensp;";
            space.setAttribute('style', "cursor: default; user-select: none")

            if (data.OPTION == "download")
                img.setAttribute('src', chrome.extension.getURL('download.png'));
            else
                img.setAttribute('src', chrome.extension.getURL('view.png'));
            img.setAttribute('href', "#");
            img.setAttribute('role', "button");
            img.setAttribute('class', "btnInsta");
            img.setAttribute('style', "cursor: pointer; user-select: none");
        });
    }
}

@Keith 非常感谢