时间戳

首页 > 解决方案 > 在控制台中它可以工作，但在内容脚本中没有

javascript - 在控制台中它可以工作，但在内容脚本中没有

问题描述

这是我的第一篇文章，因为我的 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>

标签： javascripthtmlgoogle-chrome-extensionundefined

解决方案

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

推荐阅读