3

我一直在试验 Chrome 扩展机制，并试图编写一个可以操纵 Google 结果的扩展（添加评论、屏幕截图、网站图标等）

到目前为止，我已经设法编写了一个使用 RegEx 将 imgs 添加到链接的代码，并且工作正常。

问题是它不适用于 Google 结果。我在这里读到它的发生是因为页面没有完全加载；所以我添加了一个“DOMContentLoaded”监听器，但没有帮助。

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

function parse_google()  {
document.body.innerHTML = document.body.innerHTML.replace(
        new RegExp("<a href=\"(.*)\"(.*)</a>", "g"),
        "<img src=\"http://<path-to-img.gif>\" /><a href=\"$1\"$2</a>"
    );
alert("boooya!");
};
alert("content script: before");
document.addEventListener('DOMContentLoaded', parse_google(), false);    
alert("content script: end");

我收到所有“警报”，但它不适用于谷歌。为什么？

4

2 回答 2

2

“DOMContentLoaded”是指页面的静态HTML，但是Google的搜索结果是使用AJAX获取的，因此在触发“DOMContentLoaded”事件时还不存在。

您可以改用MutationObserver来观察根节点及其后代上的“childList”DOM 突变。
（如果你选择这种方法，mutation-summary 库可能会派上用场。）

经过（非常浅的）搜索后，我发现（至少对我而言）谷歌将其结果放在了一个div带有id search的地方。以下是执行以下操作的示例扩展的代码：

  1. 注册一个 MutationObserver 来检测插入div#search到 DOM 中的 od。

  2. 注册一个 MutationObserver 以检测“childList”div#search及其后代的变化。

  3. 每当<a>添加节点时，函数都会遍历相关节点并修改链接。<script>（脚本出于显而易见的原因忽略了元素。

此示例扩展名仅将链接的文本包含在 中~~，但您可以轻松更改它以执行您需要的任何操作。

清单.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
    }],

}

内容.js：

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);
于 2013-11-04T23:49:54.077 回答
1

我刚刚写了一个操作谷歌搜索结果的扩展。似乎问题在于结果几乎总是通过 AJAX 获取。我使用MutationObserver定期检查结果的变化。有两种类型的 Google 搜索页面（到目前为止我遇到过）：标准和 Google Instant。对于标准页面，您需要观察正文元素（您可以使用选择器“#gsr”），但对于 Google Instant，您只需查找包含的 DIV（“#search”）。您将需要观察 childList 和 subtree 突变。

（根据@ExpertSystem 的评论编辑）

于 2013-11-04T13:14:34.127 回答