I have a content script which listens for the insertion of text-nodes on some websites. It's working great, except on Facebook. Some of the text-nodes inserted are not detected by the script.
script.js
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
if (mutation.type === "characterData") {
console.log(mutation.target);
} else {
for (var x = 0; x < mutation.addedNodes.length; x++) {
var node = mutation.addedNodes[x];
if (node.nodeType === Node.TEXT_NODE) {
console.log(node);
}
}
}
});
});
observer.observe(document, { childList: true, subtree: true, characterData: true });
If I allow logging of all node types, I can see the parent nodes of these text nodes in my log.
Thanks.
This is probably the same issue as this question. If a script "builds" elements outside of the DOM and then attaches the root, only the root will be reported as an added node. TreeWalker can be used to traverse the added node's subtree to find the text.
for (const addedNode of mutation.addedNodes) {
if (addedNode.nodeType === Node.TEXT_NODE) {
console.log(addedNode);
} else {
// If added node is not a Text node, traverse subtree to find Text nodes
const nodes = document.createTreeWalker(addedNode, NodeFilter.SHOW_TEXT);
while (nodes.nextNode()) {
console.log(nodes.currentNode);
}
}
}
Facebook has a way of detecting even when the debugger is opened on the website. I am guessing they have a way to detect mutation observers as well. They might just be blocking your content scripts. Besides I wouldn't really use the whole document as my object. Just try to monitor what you want using document.querySelector.
Related
I'm using a MutationObserver to notice when a certain element is added to the page. The way I do this is by observing the document and iterating through each MutationRecord's addedNodes array and querying for a certain selector:
added_node.querySelectorAll("tr[data-testid|='issue-table--row']")
This does work, but I do not get the results I expect. For example, on a particular page I should see a parentNode being added that has 18 of the tr html element somewhere in the tree.
So I created a script to debug this. What you see below, does output how many tr elements are found in the added Nodes. As well as each MutationRecord it inspects.
Oddly enough, when searchRecord() is invoked automatically during the scripts runtime, I don't see the expected result.
But after manually reviewing all MutationRecords that were printed to the debug logs, I could confirm that one of them indeed has the data I am looking for.
For example, this manual line in the debug console does return what I expect:
temp0[1].addedNodes[2].querySelectorAll("tr[data-testid|='issue-table--row']")
(temp0 being a MutationRecord the MutationObserver observed.)
Typing this into the debug console also yields the expected results:
searchRecord(temp0)
But when the same line is invoked by the script via the callback searchRecord(mutationRecords) then for some dubious reason it never returns the expected result.
What's happening? Is the MutationRecord incomplete at the time it is observed??
function searchRecord(mutationRecords) {
for (const r of mutationRecords) {
/* TARGET tests */
if (r.target instanceof HTMLElement) {
if (r.target.attributes["data-testid"] === "issue-table--body") {
console.debug("Target is 'issue-table--body'")
}
if (r.target.attributes["data-testid"] === "issue-table--row") {
console.debug("Target is 'issue-table--row'")
}
}
/* ADDEDNODES tests */
for (const node of r.addedNodes) {
if (node instanceof HTMLElement) {
/* direct */
if (node.attributes["data-testid"] === "issue-table--body") {
console.debug("Added node is 'issue-table--body'")
console.debug(node)
}
if (node.attributes["data-testid"] === "issue-table--row") {
console.debug("Added node is 'issue-table--row'")
console.debug(node)
}
/* nested */
tbodies = node.querySelectorAll("tbody[data-testid|='issue-table--body']")
if (tbodies.length > 0) {
console.debug(`Added node contains ${tbodies.length} 'issue-table--body'`)
console.debug(node)
}
trows = node.querySelectorAll("tr[data-testid|='issue-table--row']")
if (trows.length > 0) {
console.debug(`Added node contains ${trows.length} 'issue-table--row'`)
console.debug(node)
}
}
}
/* REMOVEDNODES tests */
for (const node of r.removedNodes) {
if (node instanceof HTMLElement) {
/* direct */
if (node.attributes["data-testid"] === "issue-table--body") {
console.debug("Removed node is 'issue-table--body'")
}
if (node.attributes["data-testid"] === "issue-table--row") {
console.debug("Removed node is 'issue-table--row'")
}
/* nested */
tbodies = node.querySelectorAll("tbody[data-testid|='issue-table--body']")
if (tbodies.length > 0) {
console.debug(`Removed node contains ${tbodies.length} 'issue-table--body'`)
}
trows = node.querySelectorAll("tr[data-testid|='issue-table--row']")
if (trows.length > 0) {
console.debug(`Removed node contains ${trows.length} 'issue-table--row'`)
}
}
}
}
}
new MutationObserver(function callback(mutationRecords) {
console.debug("-----------------------------------------------")
console.debug("Mutation observed. Logging mutation records ...")
console.debug(mutationRecords)
searchRecord(mutationRecords)
}).observe(document, {
attributes: false,
childList: true,
subtree: true,
})
Let's simplify the situation to make it easier to talk about: You want to watch for div elements with class example (div.example) being added and see how many span elements with class x (span.x) there are in the div.example that was added.
The nodes you receive are the actual nodes in the DOM document that were added. They will be as fully-populated as they are as of when your observer was called, which will be at some point after the element has been added to the container (because of JavaScript's run-to-completion semantics — the code adding the elements has to finish before any callbacks that triggers, such as your mutation observer, can be run). That means that:
If a div.example is added that contains (say) three span.x elements, your code will see the three span.x elements in the div when your observer callback is called, since they're already there.
If a div.example is added, then just afterward three span.x elements are added to it without yielding to the event loop (that is, without waiting for some asynchronous operation like ajax or a setTimeout), your code will still see those three span.x elements in the div.example when the observer callback is called, because they're there by the time it runs, even though they weren't when the div.example was first added.
Variation: If the div.example is added with span elements in it that don't have the x class yet, but then the x class is added afterward without yielding to the event loop, your code will see span.x elements, because the class will be there by the time it runs.
If a div.example is added, and then the span.x elements are added to it later after the code adding things has yielded to the event loop by waiting for some asynchronous operation, your code may not see the span.x elements in the div.example, since it may run before they're there.
Variation: If the div.example is added with span elements in it that don't have the x class yet, but then later after the code adding things has yielded to the event loop it adds the x class to the span elements, your code may not see span.x elements in the div.example, because although the span elements are there, they don't have the x class you're looking for yet, because your code ran before the class was added.
Here's an example of all three scenarios:
const observer = new MutationObserver((records) => {
for (const record of records) {
if (record.addedNodes) {
for (const node of record.addedNodes) {
if (node.nodeName === "DIV" && node.classList.contains("example")) {
const {
length
} = node.querySelectorAll("span.x");
console.log(`div.example "${node.id}" added, ${length} span.x elements found in it`);
}
if (node.querySelectorAll("span").length > 0) {
node.style.backgroundColor = "lightgreen"
}
}
}
}
});
const container = document.getElementById("container");
observer.observe(container, {
childList: true,
subtree: true,
});
function createDiv(id) {
const div = document.createElement("div");
div.id = id;
div.classList.add("example");
return div;
}
function addSpan(div, text) {
div.insertAdjacentHTML("beforeend", `<span class=x>${text}</span>`);
}
setTimeout(() => {
let div;
// Adding a fully-set-up div
div = createDiv("A: three spans");
addSpan(div, "1");
addSpan(div, "2");
addSpan(div, "3");
console.log("A: spans added");
container.appendChild(div);
// Adding a partially-set-up div, then adding to it after, but without
// yielding to the event loop
div = createDiv("B: three spans, added after (no yield)");
container.appendChild(div);
addSpan(div, "1");
addSpan(div, "2");
addSpan(div, "3");
console.log("B: spans added");
// Adding a partially-set-up div, then adding to it after yielding to
// the event loop
div = createDiv("C: three spans, added after (yield)");
container.appendChild(div);
setTimeout(() => {
addSpan(div, "1");
addSpan(div, "2");
addSpan(div, "3");
console.log("C: spans added");
}, 0);
}, 100);
.as-console-wrapper {
max-height: 70% !important;
}
<div id="container"></div>
So if you're seeing the element without the descendants you expect to see, it would appear you're running into scenario #3 above: The descendants are being added to it (or the charateristics of them you're looking for are set) after a delay.
The crucial point is: The elements you get in the observer callback are the actual elements in the DOM, so they'll have the contents and characteristics those elements have as of when you look at them. They aren't copies or placeholders or representative examples.
Context:
The code is from the "content-script" of a chrome extension.
Given a target node, i would like to get every childNode(a div) and add a button on it.
I tried the simplest solution:
const target = document.querySelector(targetSelector);
const childNodes = target.childNodes;
childNodes.forEach(node => { //some function that add a button on this node});
Obviously, it works untill i scroll down the page, when new nodes are added on the DOM, and I can't keep track of them anymore.
Thus i decided to try with MutationObserver:
const target = document.querySelector(targetSelector);
const config = { childList: true, subtree: true };
const callback = (mutationList, observer) => {
for (const mutation of mutationList) {
console.log(mutation); //it doesn't return the node, but some kind of mutation object, so i can't get the refernce and work whit it.
}
};
const observer = new MutationObserver(callback);
observer.observe(target,config);
There's a solution? Can i finally keep track of new added nodes and work with them?
EDIT: As #Jridyard suggested, i tried both "target" property and "mutation.addedNodes" property.
This partially fixed the problem, in the sense that I finally got the references to the nodes initially, but not the dynamically loaded ones in the DOM, getting this error when I try to access the innerText property.
index2.js:52 Uncaught TypeError: Cannot read properties of undefined (reading 'innerText')
at MutationObserver.callback
Example:
const callback = (mutationList, observer) => {
for(const mutation of mutationList) {
//works with the initially loaded nodes,not tracking the others dinamically loaded after page scroll.
/*if(mutation.target.classList[0] === "Comment") {
console.log(mutation.target.innerText);
} */
//works with the initially loaded nodes, the gives me the above error with the others nodes dinamically loaded after page scroll.
if(mutation.addedNodes[0] !== null) {
console.log(mutation.addedNodes[0].innerText);
}
}
};
I finally found a solution (not written by me, courtesy of a reddit user) and figured out that the initial problem stemmed from Reddit.
Because I tried to do the same on youtube and it worked fine.
In practice Reddit updates parts of a comment at different times, so simply monitoring the added nodes(as I did above) was not enough, but the comments had to be parsed after each mutation in the DOM.
Probably computationally very inefficient, but currently working.
The code below shows the solution tailored for reddit:
function processComment(comment)
{
const avatar_link = comment.querySelector("[data-testid=comment_author_icon]");
const user_link = avatar_link?.getAttribute("href");
const user_picture_link = avatar_link?.querySelector("img")?.getAttribute("src");
const user_name = comment.querySelector("[data-testid=comment_author_link]")?.textContent;
const body = comment.querySelector("[data-testid=comment]")?.textContent;
return {
user_link,
user_picture_link,
user_name,
body,
div: comment,
};
}
function getComments(parent)
{
return [...(parent ?? document).querySelectorAll(".Comment")].map(processComment);
}
function observeComments(callback, parent)
{
parent ??= document;
const mo = new MutationObserver(() => getComments(parent).map(callback));
mo.observe(parent, {attributes: true, childList: true, subtree: true});
return mo;
}
observeComments((m)=>console.log(m.body));
I have a script that watches DOM manipulation made by 3-rd party library script. I want to update element text property. However, in some cases when I try to append string to existing text (lets say elm.textContent += "text") i got infinite callback cycle.
I want to append text to elm.textContent any help with this will be appreciated !
const config = { childList: true, subtree: true };
const callback = function(mutationsList, observer) {
for(const mutation of mutationsList) {
console.log(mutation.);
var elms = document.querySelectorAll(".FAxxKc");
for(var elm of elms) {
elm.textContent = elm.textContent + "TEXT"; // this causes infinite loop.
// elm.textContent = "TEXT"; // works as expected.
}
}
};
const observer = new MutationObserver(callback);
// Start observing the target node for configured mutations
var div = document.getElementById("YPCqFe");
observer.observe(div, config);
Well, of course this causes an infinite loop.
You listen for changes, and when something changes you generate another change.
In your change listener you need to decide that the change you made must be ignored. There are several ways to do that. In this case you could check if it ends in "TEXT", whether that makes sense or not depends on your situation.
You could also ignore the next time you enter the change listener after you made the change. ie:
let iMageChange = false;
callback = function(mutationsList, observer) {
if (iMadeChange === true) {
elm.textContent = elm.textContent + "TEXT";
iMadeChange = true;
}
iMadeChange = false;
}
These solutions are far from ideal, the root cause is that you're doing this with mutation observers. Ideally the library just generates the correct text.
I am building a Chrome Extension that look for a word , and if that word is present on the web page it gets blurred. To achieve this I look for all the text (node type 1) nodes on the web page and replace them with a new node. Problem occurs when I create a new node and assign it the text of the node to be replaced, this script when run gives error "RangeError: Maximum call stack size exceeded"
This problem doesn't occur when I assign a constant string to the node to be created. And this script runs fine.
var targetNode=document.body
var config = { attributes: true, childList: true, subtree: true };
var callback = function(mutationsList, observer) {
walk(document.body);
};
var observer = new MutationObserver(callback);
observer.observe(targetNode, config);
function walk(node)
{
var child, next;
switch ( node.nodeType )
{
case 1: // Element
case 9: // Document
case 11: // Document fragment
child = node.firstChild;
while ( child )
{
next = child.nextSibling;
walk(child);
child = next;
}
break;
case 3: // Text node
handleText(node);
break;
}
}
function handleText(textNode)
{
var str = textNode.nodeValue;
if (str == "Manchester"){
//console.log(str);
p=textNode.parentNode;
const modified = document.createElement('span');
modified.id="bblur";
modified.textContent = "Constant"; // this works
modified.style.filter="blur(5px)";
modified.addEventListener("mouseover", mouseOver, false);
modified.addEventListener("mouseout", mouseOut, false);
p.replaceChild(modified, textNode);
}
//textNode.nodeValue = str;
//textNode.style.filter="blur(5px)";
}
function mouseOver()
{
this.style.filter="blur(0px)";
}
function mouseOut()
{
this.style.filter="blur(5px)";
}
This handleText function doesn't work
function handleText(textNode)
{
var str = textNode.nodeValue;
if (str == "Manchester"){
//console.log(str);
p=textNode.parentNode;
const modified = document.createElement('span');
modified.id="bblur";
modified.textContent = str; //this doesn't work :/
modified.style.filter="blur(5px)";
modified.addEventListener("mouseover", mouseOver, false);
modified.addEventListener("mouseout", mouseOut, false);
p.replaceChild(modified, textNode);
}
}
I don't want new node to be created with a fixed string but i want the text content of old node in the new one. What I can do to avoid this call stack limit reached problem. Thanks!
Infinite loop is caused because you modify DOM from MutationObserver callback. It works with "Constant" because you have condition "if (str == "Manchester")" which prevents DOM modification and does not trigger MutationObserver callback. Try using constant "Manchester" and you will see infinite loop again.
Easiest fix would be to ignore nodes which you already replaced:
function walk(node)
{
var child, next;
switch ( node.nodeType )
{
case 1: // Element
case 9: // Document
case 11: // Document fragment
child = node.firstChild;
while ( child )
{
next = child.nextSibling;
if (child.id !== 'bblur') {
walk(child);
}
child = next;
}
break;
case 3: // Text node
handleText(node);
break;
}
}
Also your code will assign same id to all replaced elements. It would be better to use different way to mark new nodes, for example you can use dataset attributes.
As mentioned, infinite loop, your modifying the DOM, which triggers the callback, which modifies the DOM etc.
Maybe run the code first.
Register your listener,
When the listener fires, remove the listener.
Once changes have been made, register the listener again.
That way your code won’t trigger itself and will only listen to changes when it’s idle.
Think of it like a holding page on an e-commerce website. If your moving the database but still taking orders it’s gonna get messy. So you disable taking new orders whilst your doing the processing and enable them once your done. Same logic here
I intend to use MutationObserver on observing the appearance and changing of element's value, but to be honest I'm not sure how this should be implemented.
The target of MO would be div.player-bar and what I'm trying to accomplish is to detect when el-badge__content appears in page and when el-badge__content element value is changed (for example instead 1 would change to 2).
Please note that el-badge__content appears at the same time with the creation of div.new-bar and many times div.new-bar would not be present in the page, that's why I need to listen to div.player-bar.
Is this possible? So far I was thinking of something like this:
var target = document.getElementsByClassName('player-bar')[0];
var config = { attributes: true, childList: true, subtree: true };
const observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
mutation.forEach(function(addedNode) {
var e = addedNode.document.getElementsByClassName('el-badge__content')[0];
if (e) {
console.log("Element appearance/changed")
};
});
});
});
observer.observe(target, config);
Thank you in advance.
mutation is a MutationRecord object that contains the array-like addedNodes NodeList collection that you missed in your code, but it's not an array so it doesn't have forEach. You can use ES6 for-of enumeration in modern browsers or a plain for loop or invoke forEach.call.
A much easier solution for this particular case is to use the dynamically updated live collection returned by getElementsByClassName since it's superfast, usually much faster than enumeration of all the mutation records and all their added nodes within.
const target = document.querySelector('.player-bar');
// this is a live collection - when the node is added the [0] element will be defined
const badges = target.getElementsByClassName('el-badge__content');
let prevBadge, prevBadgeText;
const mo = new MutationObserver(() => {
const badge = badges[0];
if (badge && (
// the element was added/replaced entirely
badge !== prevBadge ||
// or just its internal text node
badge.textContent !== prevBadgeText
)) {
prevBadge = badge;
prevBadgeText = badge.textContent;
doSomething();
}
});
mo.observe(target, {subtree: true, childList: true});
function doSomething() {
const badge = badges[0];
console.log(badge, badge.textContent);
}
As you can see the second observer is added on the badge element itself. When the badge element is removed, the observer will be automatically removed by the garbage collector.