如何让用户脚本重做同一URL的后续网页导航中的所有操作？

Question

我有一个如下所示的用户脚本：

document.querySelector('[title="Select: This option"]').checked = true
document.querySelector('[title="Click to continue"]').click()

“单击继续”后，浏览器将移至下一页，但 URL 保持不变。 我想让 UserScript 在所有后续页面中再次执行其所有操作，这些页面当然与 @match URL 匹配。 目前，这似乎没有发生，但我不确定这是因为用户脚本未重新启动还是因为第一行失败（即单击“选择：此选项”）。

我该怎么做？

我想设置一个循环定时器是一种选择，但是还有什么更简洁的吗？ 如果问题是第一行失败，因为该元素不存在于下一页中，有没有办法让用户脚本跳到下一个操作？

目前，这似乎没有发生，但我不确定这是因为用户脚本未重新启动还是因为第一行失败（即单击“选择：此选项”）。

Answer 1

wOxxOm 是对的：MutationObserver 是实现此解决方案的正确、现代的方法。然而，实施起来有点棘手。

如果您寻求一种快速而肮脏的“概念验证”方法，您可以尝试这样的方法：

// ==UserScript==
// @name         Check 'n Click
// @namespace    http://myuniquens.com
// @version      0.01
// @match        https://urdomaingoeshere.com/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=auvik.com
// @grant        none
// ==/UserScript==

(async function() {
    'use strict';
    const $ = document.querySelector.bind(document);

    loop-n-watch();

    async function loop-n-watch(){
        log_me_console();
        if ( $('[title="Select: This option"]') ){
            if ( !$('[title="Select: This option"]').checked ){
                $('[title="Select: This option"]').checked = true;
                await sleep(500);
                $('[title="Click to continue"]').click();
            }
        }
        setTimeout( () => { loop-n-watch() },1000);
    }
    function sleep(ms){
        return new Promise(function (resolve, reject) {
            setTimeout(()=>{
                resolve();
            },ms);
        })
    }
    function log_me_console(){
        //This adds a console log each loop to reassure it is running
        console.logCopy = console.log.bind(console);

        console.log = function(data){
            var timestamp = `[ ${Date.now()} ] `;
            this.logCopy(timestamp, data);
        };

        console.log('log_me_console()')
    }
})();

上面的脚本将永远循环，每秒都会检查该元素并选中复选框，等待半秒，然后单击按钮。

对

log_me_console()

的调用只会显示带有更新时间戳的控制台日志，以确保它正在运行。

此代码将在标准网页上运行...但如果该页面仅监视真实的用户交互，您可能还需要手动分派适当的事件，如本示例所示：

https://stackoverflow.com/a/77936551