Как добавить кнопку, используя userscript, при смене URL?

Question

[Minat0_]

Здравствуйте!
Нужно добавлять кнопку при изменении URL, сам придумал только такой код:

тык

let currentURL = window.location.href;

setInterval(function() {
  if(currentURL !== window.location.href) {
    if (window.location.pathname.split("/")[1] !== "" && window.location.pathname.split("/")[1] === "animes" && document.readyState === "complete") addButton();
  currentURL = window.location.href;
}, 1000);

function addButton() {
  if (document.querySelector('.slPlayFreePlayButton')) return;
    
  const id = window.location.pathname.split("/")[2].split('-')[0],
         a = document.createElement("a");
    
  a.classList.add('slPlayFreePlayButton');
  a.href = "https://example" + id + "/1";
  a.innerText = "Смотреть онлайн на Shikimøri Live";
  a.style.cssText = "padding: 1em; background-color: black; color: white; border-radius: 0.5em; display: block; margin: 0.5em 0";
  document.querySelector(".c-info-right").appendChild(a);
  }

Вся проблема в том, что по каким-то мне не виданным причинам бывает так, что кнопка то исчезает, то вдруг появляется две кнопки, а затем они исчезают. Был бы очень рад внятному объяснению.

И ещё вопрос: может ли userscript подгрузиться сам на динамическое веб-приложение на конкретные URL, без перезагрузки страницы, например, посредством директив?

Answer 1

[Чипекве]

Есть событие popstate, чтобы отслеживать изменение URL.

Для отслеживания изменения динамического контента есть MutationObserver.

Comments

[Minat0_]

Popstate — не работает конкретно в моём случае, а MutationObserver вызывается слишком много раз

[Чипекве]

Он и должен вызываться на каждую выбранную мутацию.

Проверяешь, есть ли нужный блок и нет ли уже твоей кнопки и запускаешь функцию вставки.

const observer = new MutationObserver((mutationsList) => {
    mutationsList.forEach(() => {
        const infoRightBlock = document.querySelector('.c-info-right');
        if (infoRightBlock && !document.querySelector('[href^="https://live.shikimorilive.top/"]')) addButton(infoRightBlock);
    });
});
observer.observe(document, { childList: true, subtree: true });

function addButton(targetBlock) {
    const id = window.location.pathname.split("/")[2].split('-')[0];
    targetBlock.insertAdjacentHTML('beforeend', `<div class="watch-online">
    <div class="line"><a class="b-link_button dark" href="https://live.shikimorilive.top/online/${id}/1" target="_blank" title="Shikimøri Live">
        <span class="translation_missing">Смотреть Онлайн</span></a></div>
    <div class="kind">Shikimøri Live</div></div>`)
}

[Minat0_]

Чипекве, спасибо за решение, однако я уже и сам решил проблему)