Удаление контента конкретного сайта через Greasemonkey

Я знаю, что подобные вопросы задавались бесчисленное количество раз, я уже некоторое время их читаю, но, похоже, я не могу заставить их работать в моем случае, я прочитал следующее и попытался применить эти решения. в моем случае все из Stack Overflow, но у меня не было успеха, поэтому я был бы признателен за помощь.

Статья 1 Статья 2 Статья 3 Статья 4 Статья 5

Я хотел бы удалить статьи "This Week in Anime" из боковой панели на сайтах animenewsnetwork.com, пример кода, который я хотел бы удалить:

<div class="herald box column" data-topics="article141022 column anime">
  <div class="category-line column"></div>
  <div class="thumbnail" data-src="/thumbnails/cover400x200/cms/this-week-in-anime/141022/g24.png.jpg">
    <div class="overlay">
      <div class="category column">column</div>
      <div class="comments"> <a href="/cms/discuss/141022">51 comments</a> </div>
    </div>
    <a href="/this-week-in-anime/2018-12-20/.141022" data-track="id=66149&amp;from=HP.MF"></a>
  </div>
  <div class="wrap">
    <div>
      <h3>
        <a href="/this-week-in-anime/2018-12-20/.141022" data-track="id=66149&amp;from=HP.MF">This Week in Anime - Is Back Street Girls: Gokudols Worth Watching?</a>
      </h3>
      <div class="byline">
        <time datetime="2018-12-20T19:31:04Z" title="2018-Dec-20 11:31:04 -0800 (1.4 day ago)">Dec 20, 14:31</time>
        <div class="comments"> <a href="/cms/discuss/141022">51 comments</a> </div>
        <span class="topics"> <span class="anime">anime</span> </span>
      </div>
      <div class="preview">
        <span class="intro">Netflix's newest anime acquisition is controversial to say the least. Andy and Steve find out (the hard way) if there's any decent comedy hiding under this show's initial shock factor.
        </span>
        <span class="full">Netflix's newest acquisition, Back Street Girls: Gokudols, is controversial to say the least. This week, Andy and Steve find out if there's any decent comedy hiding under this show's initial shock factor. Disclaimer...
        </span>
      </div>
    </div>
  </div>
</div>

Я хотел бы полностью удалить это, я пытался, потому что я искал строку "this-week-in-anime", а затем удалял или скрывал ее родителя, но я так и не смог заставить его работать.

Я пробовал такие вещи:

var badDivs = $("div div:contains('this-week-in-anime')");
badDivs.hide ();

а также

var badDivs = $("div div:contains(this-week-in-anime)");
badDivs.parent ().hide ();

а также

$('li:contains("this-week-in-anime")').parent().hide();

Изменить: окончательная форма сценария и советы, полученные в другом месте.

 ==UserScript==
// @name     _Anime News Network, remove "This Week in Anime" articles
// @match    *://www.animenewsnetwork.com/*
// @grant    none
// @run-at   document-idle
// ==/UserScript==

(function () {
    'use strict';
    if (!Element.prototype.matches) {
        Element.prototype.matches =
            Element.prototype.matchesSelector ||
            Element.prototype.mozMatchesSelector ||
            Element.prototype.msMatchesSelector ||
            Element.prototype.oMatchesSelector ||
            Element.prototype.webkitMatchesSelector;
    }

    var getParent = function (node, selector) {
        while (node && node.parentNode) {
            node = node.parentNode;
            if (node.matches(selector)) {
                return node;
            }
        }
    };

    document.querySelectorAll(".thumbnail > a[href*='this-week-in-anime']").forEach(function (v) {
        var node = getParent(v, '.herald.box');
        if (node) {
            node.remove();
        }
    });
})();

Некоторые вещи для рассмотрения:

Инкапсулируйте ваши вещи в функцию. Это предотвращает доступ к вещам, которые вы объявляете доступными с самой страницы.

"use strict"; так как первая строка в функции исправляет некоторое раздражение JS, которое вы можете не уловить сразу. Например, опечатка в имени переменной.

Старайтесь избегать использования @require, Это может блокировать загрузку страниц на долгое время, если у этого ресурса возникают проблемы с доставкой

Если вы хотите удалить элементы, @run-at document-idle это хорошее начало, потому что оно обеспечивает запуск события load

Если элемент, который вы хотите удалить, динамически загружается позднее, используйте setInterval или лучше MutationObserver

Старайтесь избегать jQuery. Большинство его функций уже доступно в обычном JS.

В моем примере я полностью удаляю узел. Если вы не хотите этого, вы можете использовать node.style.display='none'

Источник

1 ответ

Решение

На самом деле, эта первая статья, на которую вы ссылаетесь, содержит необходимую вам технику. Поскольку ваша целевая страница добавляет оскорбительный контент с использованием JavaScript, вам нужно использовать что-то вроде waitForKeyElements(),

Обратите внимание, что :contains ищет текст, но оскорбительное "this-week-in-anime" находится в различных атрибутах узла. Итак, мы ищем ссылки с ним в их href,

Вот конфигурация для вашего целевого сайта:

// ==UserScript==
// @name     _Anime News Network, remove "This Week in Anime" articles
// @match    *://www.animenewsnetwork.com/*
// @require  https://gist.github.com/raw/2625891/waitForKeyElements.js
// @grant    none
// ==/UserScript==
//-- WARNING: Using the page's copy of jQuery.  This may blow up at some point.
/* global $, waitForKeyElements */

waitForKeyElements (".thumbnail > a[href*='this-week-in-anime']", hideContainerNode);

function hideContainerNode (jNode) {
    //-- jQuery closest() finds an ancestor of current node.
    var containerNode = jNode.closest (".herald.box");
    containerNode.hide ();
}
Источник
Другие вопросы по тегам