Как внедрить пользовательские скрипты во встроенный контент веб-страницы?

Question

У меня есть пользовательский скрипт, который я хотел бы добавить после нажатия на ссылку, чтобы открыть встроенную веб-страницу.В частности, я хотел бы знать, как мне нужно внедрить этот скрипт:

Array.from(document.querySelectorAll('span')).filter(i => /(\d+)\spoint/.test(i.innerHTML)).forEach(i => i.style.display = 'none');

Array.from(document.querySelectorAll('div')).filter(i => /moreComments-/.test(i.id)).forEach(i => i.querySelector('p').click());

setTimeout(function() {
    Array.from(document.querySelectorAll('span')).filter(i => /(\d+)\spoint/.test(i.innerHTML)).forEach(i => i.style.display = 'none');
},7000)

Во все встраиваемые подстраницы Reddit, то есть во все связанные потоки, загруженные с главной страницы субредита:

Изображение, иллюстрирующее встроенную подстраницу Reddit в отличие от стандартной полностью загруженной страницы

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

Какие правильные шаги нужно предпринять для решения проблемы в подобном случае?Какой код я должен рассмотреть?

Answer 1

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

Есть несколько способов достичь вашей цели.Один из самых простых подходов включает использование функции setInterval.Это вызывает вашу функцию периодически (используя разумный промежуток времени, скажем, 500 мс).С помощью этой функции вы должны выбрать нужные вам узлы и обрабатывать только новые прибывающие узлы.Вы можете пометить объекты DOM вашего узла чем-то вроде _is_processed свойства.И, наконец, это может быть включено в другую функцию, скажем doForEachOnce.Например:

function doForEachOnce(list,theFunc) {
    list.forEach(i => {
        if (!i._is_processed) { i._is_processed = true; return theFunc(i); } else { return null; }
    });
}

doForEachOnce(Array.from(document.querySelectorAll('span')).filter(i => /(\d+)\spoint/.test(i.innerHTML)), i => i.style.display = 'none');
doForEachOnce(Array.from(document.querySelectorAll('div')).filter(i => /moreComments-/.test(i.id)), i => i.querySelector('p').click());

setInterval(function() {
  doForEachOnce(Array.from(document.querySelectorAll('span')).filter(i => /(\d+)\spoint/.test(i.innerHTML)), i => i.style.display = 'none');
},500);

Я успешно протестировал этот пользовательский скрипт с помощью Tampermonkey.Он расширяет все комментарии, скрывает карму при загрузке страницы, а затем снова скрывает карму при каждом новом поступлении.Надеюсь, это то, что вам нужно.

Answer 2

Ваш вопрос слишком общий, но я предполагаю, что вы спрашиваете что-то простое.Если вы ориентируетесь на какую-то конкретную платформу, уточните свой вопрос.

Я предполагаю, что вы хотите просто внедрить код JavaScript в веб-страницу HTML или часть страницы HTML.

Обычно это делается с помощью тега script

    <script>
    /* Your code is here */
    Array.from(document.querySelectorAll.......
    </script>

Чтобы заставить ссылку вызывать ваш код, вы должны заключить код в функцию и отформатировать атрибут href тега как javascript: func_name ()

    <script>
    function my_func()
    {
      /* Your code is here */
      Array.from(document.querySelectorAll.......
    }
    </script>
    <a href="javascript:my_func()">click me</a>