Ekstensi Chrome- Bagaimana cara menyuntikkan elemen baru ke halaman saat sedang memuat? [duplikat]

Dec 23 2020

Saya sedang menulis ekstensi Chrome yang memasukkan file javascript ke halaman untuk menambahkan tombol. Saat saya membuka situs web yang ingin saya modifikasi, tombolnya selalu membutuhkan waktu sepersekian detik lebih lama untuk dimuat setelah halaman dimuat. Adakah cara agar saya dapat memuat tombol pada saat yang sama dengan elemen lain di halaman? Saya telah mencoba menggunakan MutationObserver, tetapi sepertinya saya tidak dapat memahaminya.

file manifest.json:

{
    "name": "Some extension",
    "version": "1.0",
    "description": "Some description",

    "content_scripts": [
        {
            "js": ["script.js"],
            "run_at": "document_start",
            "matches": ["https://*.familysearch.org/*"]
        }
    ],
    "manifest_version": 2
}

Script yang akan disuntikkan:

// Create a button and append it to an element with a class of 'primaryNav'
let navElement = document.getElementById('primaryNav');
let newElement = document.createElement('button');
newElement.classList.add('primary-nav-text');
newElement.classList.add('nav-menu-trigger');
let textNode = document.createTextNode("FHTL");
newElement.append(textNode);
navElement.append(newElement);

Saya sudah mencoba ini hanya untuk melihat apakah saya bisa mulai MutationObserverbekerja:

const observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
        if (mutation.addedNodes.length) {
            console.log(mutation.addedNodes[0]);
        }
    });
});
const navBar = document.getElementById('primaryNav');
observer.observe(navBar, {
    childList: true
});

Tetapi saya mendapatkan kesalahan ini (saya berasumsi itu karena elemen itu belum dimuat):

Uncaught TypeError: Failed to execute 'observe' on 'MutationObserver': parameter 1 is not of type 'Node'.

Judul

Jawaban

PredatorIWD Dec 23 2020 at 10:11

Seperti yang dikatakan dalam dokumentasi mengenai"run_at": "document_start" , DOM tidak dimuat saat skrip Anda berjalan sehingga tidak dapat menemukan navelemennya.

Gantilah dengan "run_at": "document_end", dan skrip akan dieksekusi tepat setelah DOM dimuat.

Dan mengenai MutationObserverkesalahan Anda , seperti yang dinyatakan, navBarbukanlah Nodekarena .getElementByIdtidak mengembalikan simpul.