Jadi saya ingin membuat skrip sederhana yang akan menggantikan gambar di situs web (dengan gambar kucing tentunya). Masalahnya, saya ingin skrip terus mengganti gambar saat saya menggulir situs.

Misalnya. di gambar Google itu hanya akan memuat gambar kucing untuk gambar yang segera dimuat, bukan yang lain yang dimuat setelahnya.

Bagaimana saya bisa membuatnya sehingga gambar akan menggantikan gambar yang baru dimuat? Saya sudah berpikir tentang mungkin mendeteksi muatan konten tetapi tidak tahu bagaimana mendekati masalah ini karena saya baru dalam segala hal web.

Ini kode content.js saya:

if (document.readyState === 'loading') {
     document.addEventListener('DOMContentLoaded', replace);
 } else {
     replace();
 }

function replace() {
    let filenames = [
        "0.jpg",
        "1.jpg",
        "2.jpg",
        "3.jpg",
        "4.jpg",
        "5.jpg",
        "6.jpg",
        "7.jpg",
        "8.jpg",
        "9.jpg",
        "10.jpg"
    ];

    let imgs = document.getElementsByTagName('img');
    for (image of imgs) {
        let ran = Math.floor(Math.random() * 10);
        console.log(ran);

        let file = 'cat/' + filenames[ran];
        let url = chrome.extension.getURL(file);
        image.src = url;
    }
}
0
BunnyRabbit 19 November 2020, 19:30

1 menjawab

Jawaban Terbaik

Anda mungkin ingin melihat objek MutationObserver. (https://developer.mozilla.org/en-US/docs /Web/API/MutationObserver)

Pada dasarnya, yang dapat kita lakukan adalah meminta badan dokumen untuk memunculkan suatu peristiwa setiap kali ada modifikasi pada halaman yang memenuhi salah satu dari sejumlah kondisi. Dalam kasus Anda, Anda ingin melihat modifikasi subpohon, sehingga Anda diberitahu setiap kali lebih banyak konten ditambahkan ke halaman dan kemudian dapat meninjau dan memodifikasinya.

Karena kode Anda diharapkan dapat dijalankan berkali-kali pada satu halaman, Anda mengalami dilema. Apa yang harus dilakukan dengan gambar yang sudah Anda ubah? Haruskah mereka berubah lagi atau mempertahankan citra baru mereka? Saya telah menggunakan api .dataset (https: //developer.mozilla.org/en-US/docs/Web/API/HTMLOrForeignElement/dataset) untuk menyetel tanda yang menunjukkan bahwa gambar telah diubah dan harus diabaikan pada eksekusi berikutnya.

Berikut adalah contoh kasar yang harus Anda mulai. Anda dapat menghapus elemen aturan horizontal di inspektur elemen browser untuk memicu perilaku tersebut.

<!doctype html>
<html>
<head>
<script>
"use strict";
window.addEventListener('load', onWindowLoaded, false);
function onWindowLoaded(evt)
{
    const targetNode = document.body;
    const config = {attributes:true, childList:true, subtree: true};
    
    const observer = new MutationObserver(callbackFunc);
    observer.observe(targetNode, config);
    
    function callbackFunc(mutationsList, observer)
    {
        for (const mutation of mutationsList)
        {
            if (mutation.type == 'childList')
                updateImageSources();
        }
    }
}

function updateImageSources()
{
    let allImages = document.querySelectorAll('img');
    allImages.forEach( imgFunc );
    
    function imgFunc(img, index, collection)
    {
        let filenames = ['0.jpg', '1.jpg', '2.jpg', '3.jpg', '4.jpg', '5.jpg',
                         '6.jpg', '7.jpg', '8.jpg', '9.jpg', '10.jpg'];
        if (img.dataset.replaced == undefined)
        {
            img.dataset.replaced = true;
            let randomIndex = Math.floor( filenames.length * Math.random() );
            img.src = filenames[randomIndex];
        }
    }
}
</script>
</head>
<body>
    <img><img><img>
    <hr>
</body>
</html>
0
enhzflep 20 November 2020, 03:10