Bdtjtk

EDIT #2

I've just tried selecting every div element on the website as each image is contained in a div. So, I used querySelectorAll followed with an if statement. The if statement checks the div and makes sure the image (class: FFVAD) is actually inside of the div before proceeding. But it's not working, it's now throwing a getElementsByClassName is not a function error.

My content script:

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

I am developing a chrome extension which injects a javascript-written script into Instagram. I am trying to get the src of each image displayed on the users profile.

I have tried using document.querySelectorAll('img') to get every image element, but that isn't working. So, I took a peek in the developer console and noticed each image has a class called FFVAD. So, I used document.getElementsByClassName('FFVAD') (reference here). I also noticed each image has a div element as their parent. So, I tried doing this with my code:

My content script:

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

    });

}

My exensions manifest:

{

  "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"

  ]

}

I used parentNode to get the parent of the image. I expect to see a red border around the image's div parent when it's hovered and seeing the src of the image in the console but I'm not seeing results. Any help will be appreciated, thank you!

This worked for me!
I looked deeper into the developer console and realized every image on Instagram is inside of multiple divs, so I put together this code that highlights the main div that contains the image, and it works perfectly!

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)