Chrome扩展Manifest V3内容脚本中如何访问/修改DOM元素？

当然可以通过Chrome扩展的内容脚本修改DOM，你的代码问题出在操作了错误的节点类型，而非内容脚本的权限限制。

问题根源 #

你当前的代码在case 3（文本节点，nodeType=3）中尝试访问id和设置className，但：

• 文本节点仅包含纯文本内容，不存在id、className这类DOM元素属性，所以打印undefined，类名修改也不会生效。
• 测试页面中，Hello, World!是<div id="hello-world">这个元素节点（nodeType=1）的子文本节点，你需要操作的是这个父元素节点，而非文本节点本身。

修正后的代码示例 #

思路一：遍历元素节点时处理 #

直接在元素节点分支中打印ID并添加类名：

walk(document.body);

function walk(node) {
    let child, next;

    switch (node.nodeType) {
        case 1:  // 元素节点
            // 打印当前元素的ID
            console.log(node.id);
            // 给元素添加test类（用classList更稳妥，避免覆盖原有类）
            node.classList.add("test");
            // 继续遍历子节点
            child = node.firstChild;
            while (child) {
                next = child.nextSibling;
                walk(child);
                child = next;
            }
            break;
        case 9:  // 文档节点
        case 11: // 文档片段节点
            child = node.firstChild;
            while (child) {
                next = child.nextSibling;
                walk(child);
                child = next;
            }
            break;
        case 3: // 文本节点：无需操作，除非要处理其父元素
            break;
    }
}

思路二：针对包含文本的元素添加类 #

如果你的需求是给所有包含文本的元素加类，可以在文本节点分支中操作其父元素：

walk(document.body);

function walk(node) {
    let child, next;

    switch (node.nodeType) {
        case 1:  // 元素节点
        case 9:  // 文档节点
        case 11: // 文档片段节点
            child = node.firstChild;
            while (child) {
                next = child.nextSibling;
                walk(child);
                child = next;
            }
            break;
        case 3: // 文本节点
            // 确保父节点是元素节点
            if (node.parentNode.nodeType === 1) {
                console.log(node.parentNode.id);
                node.parentNode.classList.add("test");
            }
            break;
    }
}

关于manifest.json的说明 #

你的manifest.json配置是正常的，content_scripts已经正确匹配所有网址，且run_at: document_end确保DOM加载完成后执行脚本，world: MAIN只是让脚本运行在页面的主上下文，不影响DOM修改的能力。

内容的提问来源于stack exchange，提问作者Jezor