Chrome 扩展 - 如何在页面加载时将新元素注入页面？ [复制]

Question

我正在编写一个 Chrome 扩展程序，将 javascript 文件注入页面以添加按钮。当我访问要修改的网站时，在页面加载后，按钮的加载时间总是要长几分之一秒。有没有一种方法可以让按钮与页面上的其他元素同时加载？我尝试过使用MutationObserver，但我似乎无法弄清楚。

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
}

要注入的脚本：

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

正如documentation regarding "run_at": "document_start" 中所说，当您的脚本运行时没有加载 DOM，因此它无法找到 nav 元素。

将其替换为"run_at": "document_end"，脚本将在 DOM 加载后立即执行。

关于您的MutationObserver 错误，正如它所说，navBar 不是Node，因为.getElementById 不返回节点。