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

Question

编辑#2

我刚刚尝试选择网站上的每个div元素，因为每个图像都包含在div中。因此，我使用了querySelectorAll，然后是if语句。if语句在继续之前检查div并确保图像(类：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
}
})
}
}

以前的问题

我正在开发一个chrome扩展，它将javascript编写的脚本注入Instagram。我正在尝试获取用户配置文件中显示的每个图像的src。

我尝试过使用document.querySelectorAll('img')来获取每个图像元素，但这不起作用。因此，我在开发人员控制台中看了一眼，注意到每个映像都有一个名为FFVAD的类。因此，我使用了document.getElementsByClassName('FFVAD')(此处参考)。我还注意到每个图像都有一个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)