无法在Wikipedia页面上读取null的属性“ innerHTML”

Question

我不是JS开发人员，所以请原谅我可能编写的任何可怕的代码

大家好，

我正在从事这个chrome扩展项目，但是遇到了一个非常奇怪的错误。该扩展程序旨在浏览网页并替换某些单词。除了维基百科，它似乎在我尝试过的所有网站上都能正常工作。在Wikipedia上，仅替换页面第一段中的单词，然后抛出Uncaught TypeError: Cannot read property 'innerHTML' of null错误。

Content.js

var nodes = [];
var wordMap = {'color':'colour'}
var regex = new RegExp(Object.keys(wordMap).join("|"),"gi");

if( document.readyState !== 'loading' ) {
    console.log( 'document is already ready, just execute code here' );
    myInitCode();
} else {
    document.addEventListener('DOMContentLoaded', function () {
        console.log( 'document was not ready, place code here' );
        myInitCode();
    });
}

function myInitCode() {
    var walker = document.createTreeWalker(
    document.body,
    NodeFilter.SHOW_TEXT,
    function(node) {
        var matches = node.textContent.match(regex);

        if(matches) { 
            return NodeFilter.FILTER_ACCEPT;
        } else {
            return NodeFilter.FILTER_SKIP;
        }
    },
    false);

    while(walker.nextNode()) {
        nodes.push(walker.currentNode);
    }

    for(var i = 0; node=nodes[i] ; i++) {
        node.parentNode.innerHTML = node.parentNode.innerHTML.replace(regex, function(match) {
            return wordMap[match];
        });
    }
}

Manifest.json内容脚本部分

"content_scripts": [
    {
        "matches": [
            "*://*/*"
        ],
        "js": [
            "content.js"
        ],
        "run_at": "document_end" 
    }
]

这是发生错误的屏幕截图：

这是错误的屏幕截图：

我试图四处寻找答案，并且我认为该错误正在发生，因为DOM尚未加载，因此我添加了代码来解决该问题，但该错误仍然会发生。 为什么会发生这种情况的任何想法？

谢谢！

Answer 1

正如@IsaacVidrine在对该问题的评论中所指出的那样，错误是由node没有parentNode引起的。要解决此问题，请像下面这样在for循环中检查parentNode是否存在：

for(var i = 0; node=nodes[i] ; i++) {
        if(node.parentNode){
            node.parentNode.innerHTML = node.parentNode.innerHTML.replace(regex, function(match) {
                return wordMap[match];
            });
        }
    }