How to remove elements before it render similar to uBlock?

Question

I want to filter out nonsense recommendations from YouTube using channel's name. The idea is if the video isn't from a channel in allowed_channels then delete it.

Currently I'm using something along the line of

allowed_channels = ['Nemean', 'Nintendo'];
window.setInterval(removecraps, 200);
function removecraps(){
grids = document.getElementsByTagName("ytm-rich-item-renderer");
grid_inner = grid.innerText.split('\n');
grid_inner_info = grid_inner[grid_inner.length - 1].split("•");
channel = grid_inner_info[0];
for (var i = 0; i < grids.length; i++) { 
    grid = grids[i];
    if (!allowed_channels.includes(channel)) grid.remove();
}
}

However the recommended videos showed up first then got removed, which interrupt scrolling in the mobile (Firefox Nightly).

If I want to remove videos based on the title instead, I can do this in uBlock

youtube.com##ytd-rich-item-renderer:has-text(/Man Utd/)

And these things will never show up in the first place.

My question is, how does uBlock remove elements before it render?

I looked into the 2 posts in @wOxxOm's comment but as I'm not really familiar with JS I have no idea how to implement them.

See [Deleting DOM elements before the Page is displayed to the screen (in a Chrome extension)](https://stackoverflow.com/a/32537455) and [How to detect page navigation on YouTube and modify its appearance seamlessly?](https://stackoverflow.com/a/34100952) — wOxxOm, Apr 15 '22 at 12:07
I gave up. uBlock's source list was too complicated for me to understand. By inserting style="display:none" in the ytd-rich-item-renderer of the non-target channel with Mutation, only the target channel could be displayed. However, when narrowing down with tabs, ineligible channels may be displayed. Youtube seems to dynamically change the child nodes of ytd-rich-item-renderer. — Norio Yamamoto, Oct 07 '22 at 06:56

score 2 · Answer 1 · answered Oct 07 '22 at 01:45

I think you can use MutationObserver to observe the changes of the DOM.

const observer = new MutationObserver(mutations => {
  mutations.forEach(mutation => {
    if (mutation.type === 'childList') {
      // do something
    }
  });
});

observer.observe(document.body, {
  childList: true,
  subtree: true
});

How to remove elements before it render similar to uBlock?

1 Answers1