The page removes my code from the content script, what should I do?

Question

JavaScript

Hello colleagues.
Today I got acquainted with a very interesting problem and I still do not quite understand how to solve it correctly. I have an extension for Google Chrome, which should embed elements on the site "n1.ru". They even appear, but it all looks very strange. The page loads, after my content.js is successfully embedded, after the page deletes everything that I have embedded.
Before writing here, I thought and came to the conclusion that this is some kind of protection from smart people like me. After that, I checked how the page relates to the elements that I create through the console (it turned out to be good and it does not overwrite them). Therefore, I thought, what if I embed the code after loading the page, I found in Google the option "document.addEventListener('load', submitAction);", but it does not work, because after the page is fully loaded, my code is completely removed from it . Another option that you can try is to inject code from background.js yourself, which will definitely end up on the page after it is loaded, but this option looks like a serious crutch to me.
PS When I tested it on Avito, the elements were built in successfully.
UPD (03/24/2018): I'll try both options from the comments, if at least something helps, I'll sign how I did it. If nothing helps, then I will look for a solution on the net, but in any case I will publish the solution.
UPD (03/25/2018): In a couple of hours spent reading the documentation, I found a solution. What we need to defeat the evil rendering on the site: content.js (embedded into the page first and even has time to complete), inject.js (here we store our buttons and courtesans, which we will embed into the site), background.js (here we will check loaded whether the page is complete and as soon as it does, we will immediately put inject.js into it), well, and his majesty manifest.json (everyone knows why it is needed).
So the plan of operation "gbljhcrbq N1" looks like this:
1. Our content.js is embedded, the purpose of which is to do this "chrome.runtime.sendMessage(msg, function(response){});"
2. Our background.js receives the message and finds out from which particular tab it was sent, to start keeping a close eye on it using chrome.tabs.onUpdated.addListener and as soon as the page is loaded and rendered, it uses chrome.tabs.executeScript to launch on page buttons and courtesans. Everything is quite simple and clear.

background.js

function Listen() {
    chrome.runtime.onMessage.addListener(
        function(message, sender, sendResponse) {
            if (message == 'Check'){
                console.log(sender);
                console.log(message);
                chrome.tabs.onUpdated.addListener(function(sender, changeInfo, tab){
                    console.log(changeInfo);
                    if (changeInfo.status == 'complete' && tab.active){
                        chrome.tabs.executeScript(tab.id, {file: 'RHSinject.js'})
                        console.log('pidor');
                    }
               })
            }
    });
}
Listen();

PS Thanks to those guys who suggested using the debugger and MutationObserver, it helped me avoid a bunch of other problems and straighten my arms a little.

Answer 1

put in the debugger a breakpoint at the moment of embedding your elements.
immediately after their appearance, put a breakpoint on their removal.modification.
when they are removed, see who did it, and how to get around it.

Answer 2

Just like any other technology (for example, the way you learned Java) - read a good book and write as much code as possible. There are a lot of C++ book reviews. If it's not your first language and you have a really good idea about programming, I can recommend Stroustrup www.ozon.ru/context/detail/id/5600302