I'm currently working on a Chrome extension that will allow me to filter out certain YouTube videos from my YouTube feed. I want to be able to remove any video that shows up, but something strange is happening, that appears to be exclusive to the YouTube feed.

For the time being, I'm creating a prototype of this by running code in the browser's console while on the page, before I try to implement it in an extension. Here is the code so far

// XPath for grabbing the container that holds all the videos
const mainFeedContainerFullXpath = '/html/body/ytd-app/div/ytd-page-manager/ytd-browse/ytd-two-column-browse-results-renderer/div[1]/ytd-rich-grid-renderer/div[6]'
const mainFeedContainer = document.evaluate(mainFeedContainerFullXpath, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
const firstElement = mainFeedContainer.children[0].children[0].children[0];

This code grabs the first video that appears in the feed. I can then delete the element by doing firstElement.remove().

However, the moment I try to zoom in/out which seems to refresh the grid, the element appears again. I can confirm the element itself is actually removed from the DOM, as I check the parent element that contains it and see it has one less child upon running the remove method. However, it seems YouTube has a way to cache the results of the feed and re-renders the entire feed whenever the zoom is changed, to try and accommodate more or less videos per row depending on the zoom.

Any ideas on how to deal with this?