Google chrome extension 解析谷歌搜索结果的Chrome扩展不'；行不通_Google Chrome Extension

Google chrome extension 解析谷歌搜索结果的Chrome扩展不'；行不通

google-chrome-extension

Google chrome extension 解析谷歌搜索结果的Chrome扩展不'；行不通,google-chrome-extension,Google Chrome Extension,我一直在试验Chrome扩展机制，并试图编写一个可以操纵谷歌结果的扩展（添加评论、截图、favicon等）到目前为止，我已经成功地编写了一个代码，它使用正则表达式将IMG添加到链接中，并且工作正常问题是它在谷歌搜索结果上不起作用。我读到这是因为页面没有完全加载；因此，我添加了一个“DOMContentLoaded”侦听器，但没有任何帮助以下是我的代码（内容脚本）：函数解析_google（）{ document.body.innerHTML=document.body.innerHTML

我一直在试验Chrome扩展机制，并试图编写一个可以操纵谷歌结果的扩展（添加评论、截图、favicon等）

到目前为止，我已经成功地编写了一个代码，它使用正则表达式将IMG添加到链接中，并且工作正常

问题是它在谷歌搜索结果上不起作用。我读到这是因为页面没有完全加载；因此，我添加了一个“DOMContentLoaded”侦听器，但没有任何帮助

以下是我的代码（内容脚本）：

函数解析_google（）{
document.body.innerHTML=document.body.innerHTML.replace(
new RegExp（“我刚刚编写了一个处理Google搜索结果的扩展。问题似乎在于，结果几乎总是通过AJAX获取的。我过去经常定期检查结果中的更改。有两种类型的Google搜索页面（到目前为止我遇到过）：Standard和Google Instant。对于标准页面，您需要观察body元素（您可以使用选择器“#gsr”），但是对于Google Instant，您可以只查找包含的DIV（“#search”）。您需要观察子列表和子树的变化
（根据@ExpertSystem的评论编辑）“DOMContentLoaded”指的是页面的静态HTML，但Google的搜索结果是使用AJAX获取的，因此在触发“DOMContentLoaded”事件时还不存在
您可以使用来观察根节点及其子节点上的“childList”DOM突变。

（如果您选择此方法，可能会派上用场。）
经过一次（非常肤浅的）搜索，我发现（至少对我来说）Google将其结果放在一个id为search的div
中。下面是一个示例扩展的代码，它执行以下操作：
注册一个MutationObserver来检测DOM中的插入oddiv#search

注册一个MutationObserver以检测div#search
及其子体中的“childList”更改
每当添加
节点时，一个函数就会遍历相关节点并修改链接。（由于明显的原因，脚本忽略了
元素。）
此示例扩展仅将链接的文本包含在~
中，但您可以轻松地将其更改为所需的任何内容
manifest.json:
{
    "manifest_version": 2,
    "name":    "Test Extension",
    "version": "0.0",

    "content_scripts": [{
        "matches": [
            ...
            "*://www.google.gr/*",
            "*://www.google.com/*"
        ],
        "js":         ["content.js"],
        "run_at":     "document_end",
        "all_frames": false
    }],

}

console.log("Injected...");

/* MutationObserver configuration data: Listen for "childList"
 * mutations in the specified element and its descendants */
var config = {
    childList: true,
    subtree: true
};
var regex = /<a.*?>[^<]*<\/a>/;

/* Traverse 'rootNode' and its descendants and modify '<a>' tags */
function modifyLinks(rootNode) {
    var nodes = [rootNode];
    while (nodes.length > 0) {
        var node = nodes.shift();
        if (node.tagName == "A") {
            /* Modify the '<a>' element */
            node.innerHTML = "~~" + node.innerHTML + "~~";
        } else {
            /* If the current node has children, queue them for further
             * processing, ignoring any '<script>' tags. */
            [].slice.call(node.children).forEach(function(childNode) {
                if (childNode.tagName != "SCRIPT") {
                    nodes.push(childNode);
                }
            });
        }
    }
}

/* Observer1: Looks for 'div.search' */
var observer1 = new MutationObserver(function(mutations) {
    /* For each MutationRecord in 'mutations'... */
    mutations.some(function(mutation) {
        /* ...if nodes have beed added... */
        if (mutation.addedNodes && (mutation.addedNodes.length > 0)) {
            /* ...look for 'div#search' */
            var node = mutation.target.querySelector("div#search");
            if (node) {
                /* 'div#search' found; stop observer 1 and start observer 2 */
                observer1.disconnect();
                observer2.observe(node, config);

                if (regex.test(node.innerHTML)) {
                    /* Modify any '<a>' elements already in the current node */
                    modifyLinks(node);
                }
                return true;
            }
        }
    });
});

/* Observer2: Listens for '<a>' elements insertion */
var observer2 = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
        if (mutation.addedNodes) {
            [].slice.call(mutation.addedNodes).forEach(function(node) {
                /* If 'node' or any of its desctants are '<a>'... */
                if (regex.test(node.outerHTML)) {
                    /* ...do something with them */
                    modifyLinks(node);
                }
            });
        }
    });
});

/* Start observing 'body' for 'div#search' */
observer1.observe(document.body, config);

content.js:
{
    "manifest_version": 2,
    "name":    "Test Extension",
    "version": "0.0",

    "content_scripts": [{
        "matches": [
            ...
            "*://www.google.gr/*",
            "*://www.google.com/*"
        ],
        "js":         ["content.js"],
        "run_at":     "document_end",
        "all_frames": false
    }],

}

console.log("Injected...");

/* MutationObserver configuration data: Listen for "childList"
 * mutations in the specified element and its descendants */
var config = {
    childList: true,
    subtree: true
};
var regex = /<a.*?>[^<]*<\/a>/;

/* Traverse 'rootNode' and its descendants and modify '<a>' tags */
function modifyLinks(rootNode) {
    var nodes = [rootNode];
    while (nodes.length > 0) {
        var node = nodes.shift();
        if (node.tagName == "A") {
            /* Modify the '<a>' element */
            node.innerHTML = "~~" + node.innerHTML + "~~";
        } else {
            /* If the current node has children, queue them for further
             * processing, ignoring any '<script>' tags. */
            [].slice.call(node.children).forEach(function(childNode) {
                if (childNode.tagName != "SCRIPT") {
                    nodes.push(childNode);
                }
            });
        }
    }
}

/* Observer1: Looks for 'div.search' */
var observer1 = new MutationObserver(function(mutations) {
    /* For each MutationRecord in 'mutations'... */
    mutations.some(function(mutation) {
        /* ...if nodes have beed added... */
        if (mutation.addedNodes && (mutation.addedNodes.length > 0)) {
            /* ...look for 'div#search' */
            var node = mutation.target.querySelector("div#search");
            if (node) {
                /* 'div#search' found; stop observer 1 and start observer 2 */
                observer1.disconnect();
                observer2.observe(node, config);

                if (regex.test(node.innerHTML)) {
                    /* Modify any '<a>' elements already in the current node */
                    modifyLinks(node);
                }
                return true;
            }
        }
    });
});

/* Observer2: Listens for '<a>' elements insertion */
var observer2 = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
        if (mutation.addedNodes) {
            [].slice.call(mutation.addedNodes).forEach(function(node) {
                /* If 'node' or any of its desctants are '<a>'... */
                if (regex.test(node.outerHTML)) {
                    /* ...do something with them */
                    modifyLinks(node);
                }
            });
        }
    });
});

/* Start observing 'body' for 'div#search' */
observer1.observe(document.body, config);

console.log（“注入…”）；
/*MutationObserver配置数据：侦听“childList”
*指定元素及其后代的突变*/
变量配置={
儿童名单：是的，
子树：真
};
var regex=/[^0）{
var node=nodes.shift（）；
如果（node.tagName==“A”）{
/*修改“”元素*/
node.innerHTML=“~~”+node.innerHTML+“~~”；
}否则{
/*如果当前节点有子节点，请将它们排队等待进一步的操作
*正在处理，忽略任何“”标记*/
[].slice.call（node.children）.forEach（函数（childNode）{
if（childNode.tagName！=“脚本”）{
nodes.push（childNode）；
}
});
}
}
}
/*Observer1:查找“div.search”*/
var observer1=新的突变观察者（功能（突变）{
/*对于“突变”中的每个突变记录*/
突变。一些（功能（突变）{
/*…如果已添加节点*/
if（mutation.addedNodes&&（mutation.addedNodes.length>0））{
/*…查找“div#search”*/
var node=mutation.target.querySelector（“div#search”）；
如果（节点）{
/*找到“div#search”；停止观察者1并启动观察者2*/
observer 1.disconnect（）；
observ2.observe（节点，配置）；
if（regex.test（node.innerHTML））{
/*修改当前节点中已存在的任何“”元素*/
修改链接（节点）；
}
返回true；
}
}
});
});
/*Observer2:侦听“”元素的插入*/
var observer2=新的突变观察者（功能（突变）{
突变。forEach（功能（突变）{
if（突变加节点）{
[].slice.call（mutation.addedNodes）.forEach（函数（节点）{
/*如果“节点”或其任何描述为“”*/
if（正则表达式测试（node.outerHTML））{
/*…对他们做点什么*/
修改链接（节点）；
}
});
}
});
});
/*开始观察“div#search”的“body”*/
observer1.observe（document.body，config）；
正则表达式显示不好，但它可以工作。它所做的只是在有标记的地方添加标记。不完全清楚问题是什么，因为您提供的链接似乎可以解决您的问题。如果您提出比“您能建议”更具体的问题，您会得到更好的答案".Mike，谢谢你的回答。问题是我遵循了那里演示的方法，但它没有解决问题。我仍然不能让我的正则表达式影响google结果。高级感谢。你试过听DOMNodeInserted吗？setInterval
对于这项任务来说太过分了。改用MutationObserver。Mut的问题是AnationObserver是，在某些情况下，结果元素及其父元素还不存在。我想这仍然可以完成，但需要更复杂的编码。身体始终存在，因此您可以选择祖先：）（99.9%的情况下，从一开始就存在层次结构中更深层次的父容器。没错-现在只是想弄清楚为什么观察家没有向Google.com开火谁说它没有开火？