Greasy Fork

Can't address element on AMZ Reviews page

I've been trying to select the 'Title' paragraph of a product on AMZ Reviews shopping page if it contains a certain word but I'm having no luck. The product listings are created after the script has already ran so my script doesn't see them. To test selecting them I'm currently using

$( "p:contains('Stone H')" ).css('background-color', 'red');

Which doesn't select anything despite there being a product with 'Stone H' in its title. I'm aiming for removing any products whose title match a custom list, but for the time being, just addressing the elements would help. Website is https://www.amzreviews.co.uk/product-list.php

Thank you

This is a dynamically populated page which means you have to use a MutationObserver, or check for the elements periodically in setInterval callback (poor choice because the unstyled elements will be visible for a fraction of a second), or find an event used by the page to signal the change (not the case here).

So let's break down the MutationObserver case since it seems the best choice.

Recursively observing the entire page for mutations will slow down its loading speed. It's best to observe the immediate parent container of the product tiles #box-container-inner without the recursive flag so that only immediate children of the container will be reported when added/removed.

Let's check if #box-container-inner is preserved between page navigations: type v = $('#box-container-inner') in web console (F12), then go to next/prev page and type v === $('#box-container-inner') - it displays False. That's a complication. However its parent #box-container is preserved between navigations. We'll have to wait for the outer container to appear in one observer, then wait for the inner container to appear in another observer.

// ==UserScript==
// @name         AMZ Product filter
// @match        https://www.amzreviews.co.uk/product-list.php*
// @require      https://greasyfork.org/scripts/12228/code/setMutationHandler.js
// @require      https://code.jquery.com/jquery-2.2.4.min.js
// @run-at       document-start
// ==/UserScript==

setMutationHandler(document, '#box-container', function gotOuterBox(nodes) {
    this.disconnect(); // stop the slow recursive observer as we don't need it anymore
    setMutationHandler(
        nodes[0],
        '#box-container-inner',
        gotProductsContainer,
        {childList: true} // no recursion
    );
});

function gotProductsContainer(nodes) {
    $('p:contains("Stone H")', nodes[0]).css('background-color', 'red');
}

As you can see only two observers were sufficient (the main one is nonrecursive which is a huge plus) because the entire product grid is added inside #box-container-inner html in one mutation by the site script. Otherwise we would have to use a global recursive observer for p tags, for example.

Thank you! That's helped a lot :)