在 AJAX 驱动的站点上选择和激活正确的控件

IT技术 javascript jquery greasemonkey tampermonkey
2021-02-07 03:50:00

所以,我试图让每次我访问任何 nike.com 运动鞋页面(没有 HTML 链接)时,它都会自动选择我的鞋码,将其添加到购物车,并为我结账。

我目前正在尝试使用这个脚本(如下),但是每次我进入运动鞋页面时,它都没有正确添加我想要的鞋码,而是直接去结账,我的购物车里什么都没有。

有人告诉我,我需要将代码与实际页面的 HTML 匹配,但我不知道该怎么做。请帮忙。

// ==UserScript==
// @name     _Nike auto-buy(!!!) script
// @include  http://*/*
// @require  http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js
// @require  https://gist.github.com/raw/2625891/waitForKeyElements.js
// @grant    GM_addStyle
// ==/UserScript==
/*- The @grant directive is needed to work around a design change
    introduced in GM 1.0.   It restores the sandbox.
*/

var okayToClickAddtoCart = false;

//-- Assumes that size is a standard <option> tag or similar...
waitForKeyElements (".selectBox-label[value='10']", selectShoeSize);

function selectShoeSize (jNode) {
    jNode.prop ('selected', true);

    okayToClickAddtoCart = true;
}


waitForKeyElements (".add-to-cart.nike-button", clickAddToCart);

function clickAddToCart (jNode) {
    if ( ! okayToClickAddtoCart) {
        return true;    //-- Don't click yet.
    }

    var clickEvent  = document.createEvent ('MouseEvents');
    clickEvent.initEvent ('click', true, true);
    jNode[0].dispatchEvent (clickEvent);
}


waitForKeyElements (".checkout-button", clickCheckoutButton);

function clickCheckoutButton (jNode) {
    var clickEvent  = document.createEvent ('MouseEvents');
    clickEvent.initEvent ('click', true, true);
    jNode[0].dispatchEvent (clickEvent);
}


链接到
目标 HTML的“目标页面”快照(以防目标页面被 Nike 删除或更改)

1个回答

我希望不只是根据问题更改脚本,而是快速概述如何使用 Greasemonkey/Tampermonkey 编写此类页面和操作的脚本。

步骤是:

  1. 请仔细注意您手动执行的操作。请特别注意由页面的 javascript 添加/更改的元素,以及所需的步骤序列(如果有)。

  2. 使用Firebug和/或 Firefox 的检查器,和/或 Chrome 的开发人员工具,为您将阅读或操作的所有元素确定 CSS/jQuery 选择器。使用 Firebug 尤其容易做到这一点。

  3. 使用 jQuery 来操作静态 HTML。使用waitForKeyElements处理由 javascript (AJAX) 添加或更改的节点。使用Greasemonkey API(Tampermonkey 也支持,Chrome 用户脚本部分支持)来执行任何跨域页面调用,或存储跨域页面集的页面加载之间的任何值。



具体例子:

  1. 对于OP 的目标页面,OP 想要:(a) 自动选择鞋码,(b) 将鞋子添加到购物车,以及 (c) 单击结帐按钮。

    这需要等待和/或单击五 (5) 个页面元素,如下所示:

    设置大小

    查看


  2. 使用 Firebug(或类似工具)我们获取关键节点的 HTML 结构。例如,SIZE下拉列表的 HTML 如下所示:

    <div class="size-quantity">
        <span class="sizeDropdown selectBox-open">
            ...
            <label class="dropdown-label selectBox-label-showing">SIZE</label>
            ...
            <a class="selectBox size-dropdown mediumSelect footwear selectBox-dropdown" ...>
                ...
            </a>
        </span>
    </div>
    

    链接实际上触发了一个mousedown事件,而不是点击。

    Firebug 为我们提供了一个 CSS 路径:

    html.js body div#body div#body-wrapper.fullheight div#body-liner.clear div#content div#pdp.footwear div#product-container.clear div.pdp-buying-tools-container div.pdp-box div.buying-tools-container div#PDPBuyingTools.buying-tools-gadget form.add-to-cart-form div.product-selections div.size-quantity span.sizeDropdown a.selectBox
    

    我们可以简化为:

    div.footwear form.add-to-cart-form span.sizeDropdown a.size-dropdown
    

    对于一个合理的选择器,它可能会在微不足道的页面更改中幸存下来,并且不太可能在不需要的页面/产品上触发。

    ~~~~~~~~~~~~~
    请注意,Firebug 还可以帮助我们查看哪些事件附加到哪些内容上,这在确定我们需要触发的内容时至关重要。例如,对于那个节点,我看到:

    关键第一个节点的事件

    该链接没有href,也不侦听click事件。在这种情况下,我们必须触发 a mousedown(或keydown)。

    ~~~~~~~~~~~~~
    对其他 4 个关键节点使用类似的过程,我们获得 CSS/jQuery 选择器:

    Node 1:     div.footwear form.add-to-cart-form span.sizeDropdown a.size-dropdown
    
    Node 2:     ul.selectBox-dropdown-menu li a:contains('10')
                (But this will need an additional check)
    
    Node 3:     div.footwear form.add-to-cart-form span.sizeDropdown a.selectBox span.selectBox-label:contains('(10)')
    
    Node 4:     div.footwear form.add-to-cart-form div.product-selections div.add-to-cart
    
    Node 5:     div.mini-cart div.cart-item-data a.checkout-button:visible
    


  3. 最后,我们使用waitForKeyElements将所需的事件发送到关键节点并按照正确的操作顺序进行排序。

生成的完整的工作脚本是:

// ==UserScript==
// @name     _Nike auto-buy shoes(!!!) script
// @include  http://store.nike.com/*
// @include  https://store.nike.com/*
// @require  http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js
// @require  https://gist.github.com/raw/2625891/waitForKeyElements.js
// @grant    GM_addStyle
// ==/UserScript==
/*- The @grant directive is needed to work around a design change
    introduced in GM 1.0.   It restores the sandbox.
*/

var targetShoeSize  = "10";

//-- STEP 1:    Activate size drop-down.
waitForKeyElements (
    "div.footwear form.add-to-cart-form span.sizeDropdown a.size-dropdown",
    activateSizeDropdown
);
function activateSizeDropdown (jNode) {
    triggerMouseEvent (jNode[0], "mousedown");

    //-- Setup step 2.
    waitForKeyElements (
        "ul.selectBox-dropdown-menu li a:contains('" + targetShoeSize + "'):visible",
        selectDesiredShoeSize
    );
}

//-- STEP 2:    Select desired shoe size.
function selectDesiredShoeSize (jNode) {
    /*-- Because the selector for this node is vulnerable to false positives,
        we need an additional check here.
    */
    if ($.trim (jNode.text () ) === targetShoeSize) {
        //-- This node needs a triplex event
        triggerMouseEvent (jNode[0], "mouseover");
        triggerMouseEvent (jNode[0], "mousedown");
        triggerMouseEvent (jNode[0], "mouseup");

        //-- Setup steps 3 and 4.
        waitForKeyElements (
            "div.footwear form.add-to-cart-form span.sizeDropdown a.selectBox "
            + "span.selectBox-label:contains('(" + targetShoeSize + ")')",
            waitForShoeSizeDisplayAndAddToCart
        );
    }
}

//-- STEPS 3 and 4: Wait for shoe size display and add to cart.
function waitForShoeSizeDisplayAndAddToCart (jNode) {
    var addToCartButton = $(
        "div.footwear form.add-to-cart-form div.product-selections div.add-to-cart"
    );
    triggerMouseEvent (addToCartButton[0], "click");

    //-- Setup step 5.
    waitForKeyElements (
        "div.mini-cart div.cart-item-data a.checkout-button:visible",
        clickTheCheckoutButton
    );
}

//-- STEP 5:    Click the checkout button.
function clickTheCheckoutButton (jNode) {
    triggerMouseEvent (jNode[0], "click");

    //-- All done.  The checkout page should load.
}

function triggerMouseEvent (node, eventType) {
    var clickEvent = document.createEvent('MouseEvents');
    clickEvent.initEvent (eventType, true, true);
    node.dispatchEvent (clickEvent);
}
布洛克你太棒了,它完美无缺!再说一次,如果你有 Paypal,我很乐意捐赠给你!
2021-03-16 03:50:00
别客气。您可以捐赠给Adblock Plus的电子前沿基金会(EFF) 如果你想在我的名字。Adblock 的家伙还是一位慷慨且知识渊博的扩展开发讲师。
2021-04-09 03:50:00