Chrome扩展程序中{j}点击行为的问题

Question

我目前正在开发Chrome扩展程序，以自动执行手动任务，为Springboard VR上的VR机器设置分配时间。

我遇到了一个问题，我的脚本在此过程中按下最后一个按钮似乎没有触发纠正网站上的响应。

该过程只需点击一系列提示（每次点击之间有一段时间延迟以允许加载）并在VR电台上设置时间延长（通常为15分钟）。所有步骤都成功执行，不会抛出任何错误，但不会添加时间。但是，如果我只删除最后一次单击，然后手动单击，则会将时间添加到工作站。

在chrome控制台中手动运行$("button.submit.extend")[0].click()也会触发正确的行为。我不知道为什么会这样......

我正在运行下面的脚本作为内容脚本

    "content_scripts" : [{
    "matches": ["https://monitor.springboardvr.com/*"],
    "js": ["lib/jquery.js", "js/time.js"]
}]

// runs the frontend process to add time to a given station
// selected station is an index, timeExt is minutes and clickDelay is milliseconds
function runScript(selectedStation, timeExt, clickDelay) {

    var addTimeBtn = $("button[title='Add Time']")[selectedStation];
    addTimeBtn.click();

    setTimeout(function() {
        
        var customTimeBtn = $("button:contains('+Custom')")[0];
        customTimeBtn.click();

        setTimeout(function() {
            var timeInput = $("input[name='minutes']");
            timeInput.val(timeExt);

            setTimeout(function() {
                
                var extendTimeBtn = $("button.submit.extend")[0];
                console.log(extendTimeBtn);
                extendTimeBtn.click();

            }, 3000);

        }, clickDelay);

    }, clickDelay)
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 1

The issue was being caused by Vue.js which was in use on the site. Vue was not able to detect changes in the input fields. In order to fix this I manually triggered a HTML event to force Vue to update its data model, this fixed the issue.

// creates a html event to force Vue.js to update its model
function createHtmlEvent() {

    var event = document.createEvent('HTMLEvents');
    event.initEvent('input', true, true);

    return event;
}

function allocateTime() {
    ....
    var event = createHtmlEvent();
    timeInput[0].dispatchEvent(event);
}