As for my humble knowledge in JS and Greasemonkey, it seems to me okay but as a beginner I might miss something. The includes are in place. The code is just fine (targeted my elements and either display:none or visibility:hidden).
You where right. I missed that. From now and long I will search for discrepancies between the name of the argument and what’s done with this argument below.
It is interesting though that the code still doesn’t work.
If I had an alert("hi); above document.querySelector("._1uh-").style.display = "none"; the alert works but if I add it right under it, it won’t work.
This is wired for me because I know that either the code is okay (fully executable) or it doesn’t, and also, that row seems okay to me.
This probably means that document.querySelector("._1uh-") didn’t find a matching element and thus returned null; and trying to set .style.display of null will throw a type error and the following code won’t run. So if you’re not absolutely sure the element exists by the time your script runs, you’d have to check if there actually was a result first:
var element = document.querySelector('._1uh-')
if (element) {
element.style.display = 'none'
}
It would also be important to note that facebook is an SPA with little to no static content; basically the entire page is generated dynamically with JS, so most elements won’t be there from the start. Now if you want to hide certain elements that are created dynamically, you might observe the whole document.body with a mutation observer, and hide these elements when they’re actually getting appended to the DOM.
You are right. I had a mistake there with the name because now the code generally works. What you say is very interesting to me.
As I understand, if I delete the elements that contains the data that emerges from the SPA behavior, these data won’t appear. For example, if I have a ul element to which all li elements are loaded from SPA, I could display:none or visibility:hidden this element, so that it won’t contain the SPA-loaded li children.
Yet, the real problem is when the ul and it’s li children are created together on the fly, as in the SPA.
I understand I have 2 ways to combat this:
Using a setInterval function to load the dispaly:none or visitbility:hidden each time anew for the newley created ul+li.
Targeting the event that triggers creation of the ul + li element to load the dispaly:none or visitbility:hidden each time anew, yet, I believe this second solution requires deep react.js knowledge I don’t have at the moment.
That would be possible too, although I’d assume that a mutation observer would be more efficient than actively polling the DOM for changes all the time. It might look like
You could also just observe a specific parent element instead of the whole document.body, but this would of course require that this element already exists.
I don’t think it’s possible to listen to React synthetic events from “outside”… and even if it was (say by means of a native DOM event listener), you still wouldn’t know when the new element got actually appended to the DOM.
Because the event handler will most likely not modify the DOM directly, but request a change to the application state. React will then figure out how (and when) to update the UI efficiently; for instance, it may delay the changes to apply multiple updates in a single batch.
This is of course very React-specific, but generally speaking you can’t know when an element will be appended to the DOM when there is some asynchronicity involved. For example, if you don’t append an element immediately but request an animation frame to do so: