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非常感谢

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

1 个答案: