Greasy Fork

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?

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.