Использование GM xmlhttpRequest вместо iframe для отображения соответствующей информации с внешней страницы

Question

Я загрузил https-страницу на Amazon.co.uk и хочу показать использование "GM xmlhttpRequest", чтобы запросить цену товара на связанной странице.

Чем я занимаюсь до сих пор

Я попытался использовать iFrame для отображения окна:

var prodLinks = $("td.product_description a:contains('View Amazon Product Page')");
if (prodLinks.length) {
var iframeSrc = prodLinks[0].href;
iframeSrc = iframeSrc.replace (/http:\/\//, "https://")
    $("body").append ('<iframe id="gmIframe" src="' + iframeSrc + '"></iframe>');


$("#gmIframe").css ( {
    "position":     "absolute",
    "bottom":       "1em",
    "left":         "2em",
    "height":       "25%",
    "width":        "84%",
    "z-index":      "17",
    "background":   "#00FF00"
} );
}

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

То, что я хочу увидеть

Давайте предположим, что связанная страница https://www.amazon.co.uk/gp/product/B001AM72BM/

Соответствующий фрагмент HTML с вышеупомянутой страницы:

<tr id="actualPriceRow">
<td id="actualPriceLabel" class="priceBlockLabelPrice">Price:</td>
<td id="actualPriceContent"><span id="actualPriceValue"><b class="priceLarge">£2.85</b></span>
<span id="actualPriceExtraMessaging">

Как именно я могу использовать GM xmlhttpRequest, чтобы получить страницу

Фон: я использую что-то похожее на GreaseMonkey

Это для Greasekit на Fluid.app (который очень старый, но я должен его использовать). Вы, вероятно, даже не должны знать это, поскольку это очень похоже на Greasekit. Таким образом, для целей этого вопроса, вы можете просто притвориться, что это так.

Моя попытка ответа

Я бы попробовал:

GM_xmlhttpRequest({
method: "GET",
url: "https://www.amazon.co.uk/gp/product/B001AM72BM/",
onload : function(response) {
// do something with the result here
document.getElementByClass(‘priceLarge').innerHTML = response.responseText;
}
});

Answer 1

Используйте jQuery для анализа ответа от GM_xmlhttpRequestи, в отличие от iframe, вам не нужно переписывать URL-адрес в SSL.

Так:

1. Вместо добавления iframe добавьте узел, который будет содержать вашу цену.
2. Получите URL продукта, как и раньше.
3. Получите URL с GM_xmlhttpRequest.
4. Используйте jQuery, чтобы найти .priceLarge узел.
5. Запишите содержимое этого узла в узел, созданный на шаге 1.

Полный код с некоторым пользовательским интерфейсом и обработкой ошибок выглядит следующим образом. Я проверил это на вашей странице образца, и это работает.

var prodLinks = $("td.product_description a:contains('View Amazon Product Page')");
if (prodLinks.length) {
    //--- Make a place to put the price.
    $("td.buybox table td.v_prod_box_topleft").append (
        '<p id="gmPriceResult">Fetching...</p>'
    );

    GM_xmlhttpRequest ( {
        method:     'GET',
        url:        prodLinks[0].href,
        onload:     getItemPrice,
        onabort:    reportAJAX_Error,
        onerror:    reportAJAX_Error,
        ontimeout:  reportAJAX_Error
    } );
}

function getItemPrice (resp) {
    /*--- Strip <script> tags and unwanted images from response
        BEFORE parsing with jQuery.  Otherwise the scripts will run and the
        images will load -- wasting time and bandwidth and increasing risk
        of complications.
    */
    var respText    = resp.responseText.replace (/<script(?:.|\n|\r)+?<\/script>/gi, "");
    respText        = respText.replace (/<img[^>]+>/gi, "");
    var respDoc     = $(respText);

    //-- Now fetch the price node:
    var priceNode   = respDoc.find (".priceLarge:first");
    if (priceNode.length) {
        $("#gmPriceResult").text (priceNode.text () );
    }
    else {
        $("#gmPriceResult").text ("Price not found!");
    }
}

function reportAJAX_Error (resp) {
    alert ('Error ' + resp.status + '!  "' + resp.statusText + '"');
}