YouTube uses Polymer.js as the basis to develope the UI.
The sidebar is one of the UI component. You can use MutationObserver to observe DOM changes to re-insert it after Youtube's change.
For example,
const observer = new MutationObserver(() => {
if (!document.querySelector('yt-sidebar #my-element')) {
reInsertMyElement();
}
});
observer.observe(document.body, { childList: true, subtree: true });
The changes of YouTube's UI components are quite dynamic.
I started by trying to add an item to the sidebar, as the beginning of an interface. I had no end of trouble doing it. And I finally ascertained that YouTube was sabotaging me. I made an observer to fix my item if its HTML wasn't what it should be. And I stepped through it in the console and saw a script called desktop_polymer.js corrupting my element every single time.
How do I get around desktop_polymer.js? How many other ways will YouTube's native scripts sabotage me down the line? How do I get around them?