我一直在试验 Chrome 扩展机制,并一直在尝试编写一个可以操纵 Google 结果(添加评论、屏幕截图、网站图标等)的扩展
到目前为止,我已经设法编写了一个使用 RegEx 将 imgs 添加到链接的代码,并且它工作正常。
问题是它不适用于 Google 搜索结果。 我读了here发生这种情况是因为页面尚未完全加载;所以我添加了一个“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");
我收到所有“警报”,但它不适用于谷歌。为什么?
最佳答案
“DOMContentLoaded”是指页面的静态 HTML,但 Google 的搜索结果是使用 AJAX 获取的,因此在触发“DOMContentLoaded”事件时还不存在。
你可以使用 MutationObserver 相反,观察根节点及其后代上的“childList”DOM 突变。
(如果您选择这种方法, mutation-summary library 可能会派上用场。)
经过(非常浅的)搜索后,我发现(至少对我而言)谷歌将其结果放在 div
中。使用id search
.下面是执行以下操作的示例扩展代码:
注册一个 MutationObserver 来检测插入 od
div#search
进入 DOM。注册一个 MutationObserver 来检测
div#search
中的“childList”变化及其后代。每当一个
<a>
添加节点后,函数遍历相关节点并修改链接。 (出于显而易见的原因,脚本忽略了<script>
元素。
此示例扩展仅将链接的文本包含在 ~~
中, 但您可以轻松更改它以执行您需要的任何操作。
list .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
}],
}
content.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);
关于google-chrome-extension - 用于解析 Google 结果的 Chrome 扩展程序不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12042852/