Chrome拡張機能-ページの読み込み中に新しい要素をページに挿入するにはどうすればよいですか？[複製]

Question

ボタンを追加するためにJavaScriptファイルをページに挿入するChrome拡張機能を書いています。変更したいWebサイトにアクセスすると、ページが読み込まれた後、ボタンの読み込みに常に1秒もかかりません。ページ上の他の要素と同時にボタンをロードできる方法はありますか？使ってみましたMutationObserverが、わからないようです。

マニフェスト.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
}

挿入するスクリプト：

// 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ノードを返しません。