Chrome uzantısı- Yüklenirken sayfaya yeni öğeler nasıl eklenir? [çiftleme]

Question

Düğme eklemek için bir sayfaya javascript dosyası ekleyen bir Chrome uzantısı yazıyorum. Değiştirmek istediğim web sitesine gittiğimde, sayfa yüklendikten sonra düğmenin yüklenmesi her zaman bir saniyeden daha uzun sürüyor. Düğmeyi sayfadaki diğer öğelerle aynı anda yükleyebilmemin bir yolu var mı? Kullanmayı denedim MutationObserverama çözemiyorum.

manifest.json dosyası:

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

Enjekte edilecek komut dosyası:

// 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);

Bunu sadece MutationObserverişe başlayıp başlayamayacağımı görmek için denedim :

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
});

Ama bu hatayı alıyorum (bunun o öğenin henüz yüklenmemiş olmasından kaynaklandığını varsayıyorum):

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

Başlık

Answer 1

İlgili belgelerde"run_at": "document_start" belirtildiği gibi, komut dosyanız çalıştırıldığında DOM yüklenmez, bu nedenle navöğeyi bulamaz .

İle değiştirin "run_at": "document_end", komut dosyası DOM yüklendikten hemen sonra çalıştırılacaktır.

Ve ilgili MutationObserverdevletler olarak hata, navBarbir değil Node, çünkü .getElementByIdbir düğüm döndürmez.