编辑 - 在我的 chrome 扩展程序上选择 Instagram 上的图片不起作用

Question

EDIT #2

我刚刚尝试选择网站上的每个 div 元素，因为每个图像都包含在 div 中。因此，我使用 querySelectorAll 后跟 if 语句。 if 语句检查 div 并确保图像 (class: FFVAD) 在继续之前确实在 div 内部。但它不起作用，它现在抛出 getElementsByClassName is not a function 错误。

我的内容脚本：

console.log('injected')
window.onload = function() {
    var imagediv = document.querySelectorAll('div')
    console.log('selected elements')
    var i;
    for (i = 0; i < imagediv.length; i++) {
        imagediv[i].addEventListener('mouseover', function(el){
            if (el.getElementsByClassName('FFVAD').length > 0) { //if the image with the class FFVAD is in the div
                el.target.style.border = "7px solid red" //change the certain div's color
            }
        })
    }
}

PREVIOUS QUESTION

我正在开发一个 chrome 扩展程序，它将 javascript 编写的脚本注入 Instagram。我正在尝试获取用户个人资料上显示的每张图片的 src。

我曾尝试使用 document.querySelectorAll('img') 来获取每个图像元素，但这不起作用。因此，我查看了开发者控制台，发现每张图片都有一个名为 FFVAD 的 class。所以，我使用了 document.getElementsByClassName('FFVAD') (reference here)。我还注意到每个图像都有一个 div 元素作为它们的父元素。所以，我尝试用我的代码这样做：

我的内容脚本：

console.log('injected')
var image = document.getElementsByClassName('FFVAD') // instagram sets all 
their images as the class FFVAD, as I looked in the inspect element window
console.log('selected elements')
while(image.length > 0){ //for every image
    image[0].parentNode.addEventListener("mouseover", function (event) { //when the image's parent is hovered
        event.style.border = "2px solid red";
    });
    image[0].parentNode.addEventListener("mouseout", function (event) { //when the image's parent isn't hovered
        event.style.border = "none";
        });
    image[0].parentNode.addEventListener("click", function(event){ //when the image's parent is clicked
        var child = event.childNodes; //get the image in the image's div
        console.log(child[1].src) //log the src of the image
    });
}

我的扩展清单：

{
  "manifest_version": 2,
  "name": "Testing",
  "description": "Test extension",
  "version": "0.0.1",
  "author": "tester123",
  "icons":{
      "16": "icon.png",
      "48": "icon2.png",
      "128": "icon3.png" 
  },
  "content_scripts": [{
      "all_frames": false,
      "js": ["imgselect.js"],
      "matches": [ "https://*.instagram.com/*"],
      "run_at": "document_end"
  }],
  "browser_action": {
      "default_icon": "icon.png",
      "default_popup": "popup.html"
  },
  "permissions": [
      "tabs"
  ]
}

我用 parentNode 来获取图像的父级。我希望在鼠标悬停时在图像的 div 父级周围看到红色边框，并在控制台中看到图像的 src，但我没有看到结果。任何帮助将不胜感激，谢谢！

Answer 1

这对我有用！我更深入地查看了开发者控制台，发现 Instagram 上的每张图片都在多个 div 中，所以我将这段代码放在一起，突出显示包含该图片的主要 div，并且效果很好！

console.log('injected')
function show(e) {
    console.log("post found")
    var img = this.getElementsByTagName('img')
    for (i = 0; i <img.length; i++){
        if (img[i].className == "FFVAD"){
            console.log(img[i].src)
            this.style.border = "5px solid red"
        }
    }
}
function hide(e){
    var img = this.getElementsByTagName('img')
    for (i = 0; i <img.length; i++){
        if (img[i].className == "FFVAD"){
            console.log(img[i].src)
            this.style.border = "none"
        }
    }
}

setInterval(function(){
    var imagediv = document.getElementsByClassName('KL4Bh')
    var i;
    for (i = 0; i < imagediv.length; i++) {
        var parent = imagediv[i].parentNode
        var secondparent = parent.parentNode
        var thirdparent = secondparent.parentNode
        var children = parent.children
        if (children.length > 1){
            children[1].remove()
            thirdparent.addEventListener('mouseover', show)
            thirdparent.addEventListener('mouseout', hide)
        }
    }
},1000)

编辑 - 在我的 chrome 扩展程序上选择 Instagram 上的图片不起作用

Edit - Selecting an image on Instagram is not working on my chrome extension

javascript

dom

google-chrome-extension

content-script