Chrome扩展无法编辑DOM元素：获取目标元素异常求助

核心问题原因 #

你遇到的现象根源在于HTMLCollection是动态实时集合：

• 当执行console.log(priceBlock)时，浏览器不会立即打印集合的当前状态，而是在你展开控制台的集合条目时，才去DOM中查询最新内容。这就导致你看到的展开结果是后续DOM更新后的状态，但在DOMContentLoaded回调执行的瞬间，.price-block元素还未被渲染到页面中，所以此时Array.from(priceBlock)是空数组，priceBlock[0]返回null。
• 你的MutationObserver逻辑存在漏洞：它仅检查mutation.target本身是否带有.price-block类，但如果.price-block元素是作为子节点被添加到其他元素中的，mutation.target会指向父元素，此时就无法触发你的插入逻辑。

修复后的代码实现 #

以下是调整后的方案，确保能正确捕获.price-block元素并插入自定义内容：

document.addEventListener("DOMContentLoaded", () => {
    // 先尝试获取已存在的.price-block元素
    const existingPriceBlocks = document.querySelectorAll(".price-block");
    const paragraph = document.createElement("p");
    paragraph.textContent = "Your text";
    
    existingPriceBlocks.forEach(element => {
        // 克隆节点避免重复插入同一个元素（单个DOM元素只能存在于一个位置）
        element.appendChild(paragraph.cloneNode(true));
    });
});

// 改进MutationObserver逻辑，监听所有子节点添加事件
const observer = new MutationObserver((mutationsList) => {
    for (const mutation of mutationsList) {
        // 检查新增的节点中是否包含.price-block元素
        if (mutation.addedNodes.length > 0) {
            mutation.addedNodes.forEach(node => {
                // 仅处理元素节点
                if (node.nodeType === Node.ELEMENT_NODE) {
                    // 如果当前节点就是.price-block
                    if (node.classList.contains("price-block")) {
                        const abobusElement = document.createElement("p");
                        abobusElement.textContent = "Abobus";
                        node.appendChild(abobusElement);
                    }
                    // 递归检查子节点中是否有.price-block
                    const childPriceBlocks = node.querySelectorAll(".price-block");
                    childPriceBlocks.forEach(block => {
                        const abobusElement = document.createElement("p");
                        abobusElement.textContent = "Abobus";
                        block.appendChild(abobusElement);
                    });
                }
            });
        }
    }
});

observer.observe(document.body, { subtree: true, childList: true });

关键优化点 #

• 用querySelectorAll替代getElementsByClassName：前者返回静态的NodeList，不会随DOM变化实时更新，避免后续逻辑出现意外。
• 克隆DOM节点：同一个p元素不能被多次添加到不同父元素，必须用cloneNode(true)创建副本。
• 完善MutationObserver逻辑：不仅检查新增节点本身，还递归检查其子节点，确保不会漏掉动态添加的.price-block元素。

内容的提问来源于stack exchange，提问作者Даниил Ельчуков