如何在 Chrome 扩展程序清单 V3 内容脚本中访问/修改 DOM 元素？-解网

问：

我有一个简单的 Chrome 扩展程序，可以在控制台中记录元素的 ID，并将所有文本元素类更改为“test”。

我：manifest.json

{
  "manifest_version": 3,
  "name": "Access DOM Example",
  "description": "A script accessing and modifying DOM elements",
  "version": "1.0",
  "content_scripts": [{
    "matches": ["<all_urls>"],
    "css": ["test.css"],
    "js": ["test.js"],
    "match_about_blank": false,
    "run_at": "document_end",
    "world": "MAIN"
  }]
}

和内容脚本，：test.js

walk(document.body);

function walk(node) {
    let child, next;

    switch (node.nodeType) {
        case 1:  // Element
        case 9:  // Document
        case 11: // Document fragment
            child = node.firstChild;
            while (child) {
                next = child.nextSibling;
                walk(child);
                child = next;
            }
            break;

        case 3: // Text node
            console.log(node.id);    // shows 'undefined'
            node.className = "test"; // change is never applied, why?
            break;
    }
}

然而，对于一个简单的页面：

<html lang="en">
  <body>
    <div id="hello-world">Hello, World!</div>
  </body>
</html>

脚本在控制台中显示“undefined”，并且不应用对类名的更改。

有什么方法可以从内容脚本修改 DOM？

javascript dom google-chrome-extension chrome-extension-manifest-v3 内容脚本

你可以通过正确地修改内容脚本中的 DOM：文本节点没有 or ，只有元素有。也许你可以更详细地描述你所说的“文本元素”是什么意思。P.S. 不要使用它，因为它在网页的不安全上下文中运行，您的代码可能会通过原型欺骗被劫持。idclassName"world": "MAIN"

0赞 Jezor 9/2/2023

啊，谢谢，我没有意识到文本节点与元素🤦不是一回事

答： 暂无答案

上一个：从扩展访问网页的“window”/DOM/HTML

下一个：从扩展访问页面上下文中定义的变量和函数

如何在 Chrome 扩展程序清单 V3 内容脚本中访问/修改 DOM 元素？

How to access / modify DOM elements in Chrome Extension Manifest V3 content script?

评论