Как я могу успешно добавить новую кнопку в верхнюю панель нового макета Reddit

Question

Я пытаюсь создать пользовательский скрипт для добавления новой кнопки в новый дизайн Reddit, чтобы я мог легко вернуться к старому макету.Новая кнопка где-то здесь .

Это мой простой код:

var parent = document.getElementsByClassName('s17th0jh-5 iAfVlC')

var bOld = document.createElement("button");
bOld.innerHTML = "old";
parent[0].appendChild(bOld);

bOld.addEventListener("click", function() {
  var url = document.URL;
  url = url.replace('/www.', '/old.');
  window.location.href = url;
});

Проблема в том, что каждый раз, когда я загружаю илиперезагрузите страницу, новая кнопка появляется и быстро исчезает в течение секунды.Как я могу это исправить?

Answer 1

Возможно, проблема в том, что поскольку reddit использует реагирует, ваши изменения перезаписываются из-за повторного рендеринга. Потому что после выполнения вашего скрипта компонент будет перерисован. Но решение этой проблемы заключается в использовании setTimeout. При этом после завершения рендеринга компонента / заголовка ваш скрипт добавит вашу кнопку / ссылку

var parent = document.getElementsByClassName('s17th0jh-5 iAfVlC')

var bOld = document.createElement("button");
bOld.innerHTML = "old";
setTimeout(function(){
    parent[0].appendChild(bOld);

    bOld.addEventListener("click", function() {
        var url = document.URL;
        url = url.replace('/www.', '/old.');
        window.location.href = url;
    });
},1000)

Answer 2

Можете ли вы добавить свою функцию в функцию window.load или что-то еще? Похоже, что у reddit есть какой-то javascript, который выполняется после вашего (что имеет побочный эффект от удаления вашей кнопки). Если вы можете заставить свою работать после reddit, возможно, это сработает?

window.addEventListener('load', function() { /*YOUR CODE*/ });