Изменить - выбор изображения в Instagram не работает на моем расширении Chrome - PullRequest
Новая
       32

Изменить - выбор изображения в Instagram не работает на моем расширении Chrome

0 голосов
/ 28 декабря 2018

РЕДАКТИРОВАТЬ # 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, чтобы получить родительский элемент изображения.Я ожидаю увидеть красную рамку вокруг родительского элемента изображения, когда он наведен, и вижу, как в консоли отображается изображение, но я не вижу результатов.Любая помощь будет оценена, спасибо!

1 Ответ

0 голосов
/ 28 декабря 2018

Это сработало для меня!Я заглянул глубже в консоль разработчика и понял, что каждое изображение на 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)
...