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));
Related
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 learning to use the Mutation observer class, mostly here: https://javascript.info/mutation-observer
I know how to listen to changes of attributes, and how to get old attribute values using attributeOldValue. But can I get the new attribute value from the same event? If so, how? Thanks
You can simply query current value directly from the changed object.
// is element is an input
const newValue = document.getElementByID('myElement').value;
// or, if it is a any text element
const newValue = document.getElementByID('myElement').innerHTML;
Also, each MutationRecord have a property named target which contains all detailed information about changed object. So depending on MutationRecord.type (which tells us what type of the change have happened) you can get new value from corresponding property inside MutationRecord.target
We can listen for mutations and take content from the target where it has already happened. (the example is not on your topic, but the principle is similar)
document.addEventListener('DOMContentLoaded', function () {
let targetEl = document.querySelector('body');
function checkChange(mutations, observer) {
//****************************
console.log(mutations[0].target.innerHTML);
//****************************
}
let observer = new MutationObserver(checkChange);
observer.observe(targetEl, {
subtree: true,
childList: true,
characterData: true,
characterDataOldValue: true,
})
})
I've seen from this post about Chromium DevTools that there exists the possibility to add DOM breakpoints. Given that I've a full range of elements to monitor I was trying to find a way to programmatically add such breakpoints. I also read this question about DOM breakpoints but it doesn't seem to give me any useful hint.
To achieve a similar result I've used to instrument the setAttribute() function of such DOM elements replacing it with a wrapper that uses the debugger; instruction to trigger the debugger. Anyway this approach fails when dealing with innerHTML or innerText assignments given that there is no way of achieving operator overloading in js.
Can someone suggest me a practical solution?
You may want to use MutationObserver, to observe for any change to a DOM at given root element. Also you can put debugger there and if devTools is open it should break.
const targetNode = document.getElementById('observed-element');
const config = { attributes: true, childList: true, subtree: true };
// Callback function to execute when mutations are observed
const callback = (mutationList, observer) => {
for (const mutation of mutationList) {
console.log(mutation.type);
console.log(mutation.target);
debugger;
}
};
// Create an observer instance linked to the callback function
const observer = new MutationObserver(callback);
// Start observing the target node for configured mutations
observer.observe(targetNode, config);
// change class
setTimeout(()=>{
targetNode.setAttribute('class', 'some-class')
}, 0);
// change innerText
setTimeout(()=>{
targetNode.innerText = 'some text';
}, 0);
<div id="observed-element">
</div>
You need to open Devtools-Over-Devtools and get references to instances of DOMModel and DOMDebuggerModel
// open Devtools (Ctrl+Shift+I)
// open DevtoolsOverDevtools (Ctrl+Shift+I in Devtools)
// open sdk.js from Ctrl+P pane
// set breakpoint in function setDOMBreakpoint(e, t)
// set HTML breakpoint in Devtools to pause on the created breakpoint
// inside setDOMBreakpoint(e, t)
window.domModel = e.domModel()
window.domDebuggerModel = this
// resume execution, disable breakpoint
_k = [...domModel.idToDOMNode.keys()][0]
_a = await domModel.querySelectorAll(_k, 'div')
_b = _a.map(e => domModel.idToDOMNode.get(e)).filter(Boolean)
_b.map(e => domDebuggerModel.setDOMBreakpoint(e, 'node-removed'))
// 'subtree-modified' | 'attribute-modified' | 'node-removed'
// now all elements are breakpointed
window.DEBUG = true; // toggles programmatic debugging
flag with a global check debug function, like so:
window.CHECK_DEBUG = function() {
if (window.DEBUG) { debugger; }
}
And then insert the following in any function you’re concerned about debugging:
function foo() {
CHECK_DEBUG();
// foo's usual procedure ...
}
To take this a step further (and to take a page out of Firebug's debug() and undebug() wrapper functions) you can decorate the native JavaScript Function object like so:
Function.prototype.debug = function(){
var fn = this;
return function(){
if (window.DEBUG) { debugger; }
return fn.apply(this, arguments);
};
};
Then you can dynamically debug any function by calling:
foo = foo.debug();
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.
const e = await page.querySelectorAll('body')
const htmlTag = await page.evaluate((e) => e.outerHTML, e)
const compStyle = await page.evaluate((e) =>
JSON.parse(JSON.stringify(getComputedStyle(e))), e)
Using the above code I'm getting the body html element and it's computed style. Like wise I have to get it's child elements and their style. How can I get it?
If you don't mind the ordering of elements, you can create an array of all elements using a simple selector body * and for loop.
First, let's abstract the style extractor because we will be using the same thing multiple times.
// get the styles for particular element
// apply all kind of JSON filtering here
function getElementStyles(elem) {
return JSON.parse(JSON.stringify(getComputedStyle(elem)))
}
// this will generate a single array containing all elements
function getStyleArray(selector) {
const styles = []
const allElements = document.querySelectorAll(selector)
for (const element of allElements) {
const style = getElementStyles(element)
styles.push(style)
}
return styles;
}
//usage
getStyleArray('body *')
If you do want to get a tree, there are already multiple libraries for that. That being said, here is how you can replicate one yourself. I used recursion to get through this.
// find if element is an element :D
function isElement(element) {
return element instanceof Element || element instanceof HTMLDocument;
}
// this will generate a tree style array
// all child elements are accesible using the child key
function getChildStyles(elem) {
const childStyles = []
for (let childNode of elem.childNodes) {
if (isElement(childNode)) {
const singleChildStyle = getElementStyles(childNode)
// recursion
if (childNode.hasChildNodes()) {
singleChildStyle.child = getChildStyles(childNode)
}
childStyles.push(singleChildStyle)
}
}
return childStyles
}
// usage
getChildStyles(document.body)
Note,
that this could be improved using better loops and other sorting/searching methods.
this will cost you a lot of time if the page has many elements.
Result:
It works!!!
Let's apply on puppeteer, You can just copy paste them or use addScriptTag.
await page.evaluate(() => {
// add the scripts we created somewhere and then use them here
return {
arrayBased: getStyleArray('body *'),
treeBased: getChildStyles(document.body)
}
})