Chrome 扩展程序 - 如何在加载时将新元素注入页面？

问题描述

我正在编写一个 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'.

标题

解决方法

如 documentation regarding "run_at": "document_start" 中所述，脚本运行时未加载 DOM，因此无法找到 nav 元素。

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

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