Chrome एक्सटेंशन- लोड होते ही पृष्ठ पर नए तत्वों को इंजेक्ट कैसे करें? [डुप्लिकेट]

Question

मैं एक क्रोम एक्सटेंशन लिख रहा हूं जो एक बटन जोड़ने के लिए एक जावास्क्रिप्ट फाइल को पेज में इंजेक्ट करता है। जब मैं उस वेबसाइट पर जाता हूं जिसे मैं संशोधित करना चाहता हूं, तो बटन हमेशा पृष्ठ लोड होने के बाद लोड करने के लिए दूसरे सेकंड का एक अंश लेता है। क्या कोई ऐसा तरीका है जिससे मैं बटन को उसी समय लोड कर सकता हूं जैसे पृष्ठ पर अन्य तत्व? मैंने प्रयोग करने की कोशिश की है MutationObserver, लेकिन मैं इसका पता नहीं लगा सकता।

मैनिफ़ेस्ट.जॉन फ़ाइल:

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

इंजेक्शन लगाने के लिए स्क्रिप्ट:

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

मैंने यह देखने की कोशिश की है कि क्या मुझे MutationObserverकाम मिल सकता है :

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

लेकिन मुझे यह त्रुटि मिली (मुझे लगता है क्योंकि यह तत्व अभी तक लोड नहीं हुआ है):

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

शीर्षक

Answer 1

जैसा कि दस्तावेज़ीकरण"run_at": "document_start" में कहा गया है , जब आपकी स्क्रिप्ट चलती है तो DOM लोड नहीं होता है इसलिए यह navतत्व नहीं खोज सकता है।

इसे प्रतिस्थापित करें "run_at": "document_end", और DOM भार के ठीक बाद स्क्रिप्ट निष्पादित की जाएगी।

और अपने बारे में MutationObserverत्रुटि है, के रूप में यह कहा गया है, navBarनहीं एक है Nodeक्योंकि .getElementByIdएक नोड वापस नहीं करता है।