Ekstensi Chrome- Bagaimana cara menyuntikkan elemen baru ke halaman saat sedang memuat? [duplikat]
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 MutationObserver
bekerja:
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
Seperti yang dikatakan dalam dokumentasi mengenai"run_at": "document_start" , DOM tidak dimuat saat skrip Anda berjalan sehingga tidak dapat menemukan nav
elemennya.
Gantilah dengan "run_at": "document_end"
, dan skrip akan dieksekusi tepat setelah DOM dimuat.
Dan mengenai MutationObserver
kesalahan Anda , seperti yang dinyatakan, navBar
bukanlah Nodekarena .getElementById
tidak mengembalikan simpul.