Chrome扩展程序中的javascript点击行为问题

Posted 2021-05-05

我目前正在开发一个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>

答案

该问题是由网站上使用的Vue.js引起的。 Vue无法检测输入字段中的更改。为了解决这个问题，我手动触发了一个html事件来强制Vue更新其数据模型，这解决了这个问题。

// 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);
}