javascript - 用于替换文本 DOM 节点的 Chrome 扩展......不

Question

更新:在“am no I am”的指导下，我已经解决了这个问题；工作代码在最后。

我目前正在开发我的第一个 Chrome 扩展程序，它旨在对查看的网页执行文本替换。我一直在努力了解 DOM 操作，最终得出以下结论。理论上，这应该遍历整个 DOM 表，找到文本节点，克隆它们，替换文本(如果适用)，并用克隆替换原始节点。

这是我的 manifest.json...

{
    "name": "My app",
    "version": "1.0",
    "manifest_version": 2,
    "description": "Do thing.",
    "permissions": [
        "tabs", "http://*/"
    ],
    "content_scripts": [
        {
            "matches": ["http://*/*"],
            "js": ["myapp.js"],
            "run_at": "document_end"
        }
    ]
}

还有 myapp.js；

function myapp() {
    var nodes = document.getElementsByTagName("*");
        for(var i = 0; i < nodes.length; i++) {
             if(nodes[i].type == "text") {
                  var parent = nodes[i].parentnode;
                  var newnode = nodes[i].cloneNode(true);
                  newnode.data.replace("test text","replacement test text");
                  parent.replaceChild(newnode, nodes[i]);
             };
        };
};
myapp();

我已经导入并激活了扩展。 Chrome 的 javascript 控制台之前显示错误，这意味着它正在运行，但现在没有了，这意味着没有基本的拼写错误。我假设要么我对如何更改或交换文本节点有误，要么对如何设置 list 文件或 js 文件有基本的误解，但我在试图弄清楚是哪一个时遇到了困难。

如有任何帮助，我们将不胜感激!

更新:这是工作版本。

function myapp() {
    var nodes = document.getElementsByTagName("*");
    for(var i = 0; i < nodes.length; i++) {
         var subNodes = nodes[i].childNodes;
         for (var j = 0; j < subNodes.length; j++) {
            var node = subNodes[j];
            if (node.nodeType === 3) {
                if (node.data) {
                    node.data = node.data.replace(/test text/g,"replacement test text");
                }
            }
        }
    }
};
myapp();

Answer 1

迭代可能也有问题，因为您正在修改 DOM，nodes 是一个“实时”NodeList，它将使用 DOM 更改进行更新。

不确定这是否是一个问题，因为您似乎在同一索引处进行交换，但我不确定。您可以尝试将 NodeList 转换为数组，或尝试反向迭代。

---

但由于您只处理文本节点，因此您似乎根本不需要 .replaceChild。您可以直接更新文本节点的 .data。

---

还有一件事是您正在检查 .type 属性，而它应该是 .nodeType 属性...

if(nodes[i].nodeType == 3) {

或者 nodeName...

if(nodes[i].nodeName == '#text') {

---

哦，还有一件事。您无法使用 getElementsByTagName('*') 获取文本节点，因为它仅获取元素。

如果您决定这样做，您将需要添加代码来处理元素的子文本节点。

function myapp() {
    var nodes = document.getElementsByTagName("*");
    for(var i = 0; i < nodes.length; i++) {
         var el = nodes[i];
         for (var j = 0; j < el.childNodes; j++) {
             var node = el.childNodes[j];
             if (node.nodeType === 3)
                 node.data = node.data.replace("test text","replacement test text");
         }
    }
};