如何使我的用户脚本在使用历史记录 API 的网站的特定页面上工作

我使用 arrive.js 库解决了这个问题。它提供了监视 DOM 元素创建和删除的事件。它在内部使用突变观察器。该库不依赖于jQuery，您可以将以下示例中的jQuery元素替换为纯javascript元素，它可以正常工作。

我引用其作者的这条评论：

我一直觉得 MutationObserver api 有点复杂，所以我构建了一个 库，到达.js，以提供更简单的 API 来侦听元素 创建/删除。

以及它的两种用途：

注意元素创建：

使用 到达事件监视元素创建：

// watch for creation of an element which satisfies the selector ".test-elem"
$(document).arrive(".test-elem", function() {
    // 'this' refers to the newly created element
    var $newElem = $(this);
});

和

注意元素去除

使用 leave 事件监视元素删除。第一个 离开不得是后代或子选择器，即您不能通过 .page .test-elem，而是通过.test-elem。这是因为 MutationObserver 的 API 中的限制。

// watch for removal of an element which satisfies the selector ".test-elem"
$(".container-1").leave(".test-elem", function() {
    var $removedElem = $(this);
});  [1]: https://github.com/uzairfarooq/arrive

而且，这是完整的脚本：

// ==UserScript==
// @name        Instagram - visible images counter
// @include     https://www.instagram.com/*
// @grant       none
// @require     https://code.jquery.com/jquery-3.0.0.min.js
// @require     https://greasyfork.org/scripts/21927-arrive-js/code/arrivejs.js?version=139586
// ==/UserScript==


function showCounter() {
    var visibleCount = $( "a[href*='taken-by']" ).length;   // Count of visible images
    var totalString = $("span:contains('posts')").eq(1).children().eq(0).html();    // The 'total' value (it's a string)
    var total = totalString.replace(/('d+),(?='d{3}('D|$))/g, '$1');    // Apply regex to 'total' string to strip the thousand comma seperator
    if (visibleCount > total){
        visibleCount = total;
    }
    var visiblePercent = ((visibleCount / total) * 100).toFixed(1); // Visible images as percentage
    var counter = visibleCount + ' / ' + totalString + ' that is ' + visiblePercent + '%';
    return counter;
}


function createDiv(){
    // Creation of the counter element
    document.body.appendChild(div);
    div.innerHTML = showCounter();      // Initial display of the counter
    div.style.top = '1px';
    div.style.right = '1px';
    div.style.position = 'fixed';
}

function observer(){
    /// ---------------------------------
    /// mutation observer -monitors the Posts grid for infinite scrolling event-.
    /// ---------------------------------
    observer1 = new MutationObserver(function(mutations) {
        mutations.forEach(function(mutation) {
            div.innerHTML = showCounter();                      // In each infinite scrolling event, re-calculate counter
        });
    }).observe($('article').children().eq(1).children()[0],     // target of the observer
        {
            // attributes: true,
            childList: true,
            // characterData: true,
        }); // config of the observer
}



var div = document.createElement('div');    // global variable
var observer1;                              // global variable
if (document.URL !== 'https://www.instagram.com/' &&
    document.URL.indexOf('https://www.instagram.com/p/') === -1 ){
    createDiv();
    observer();
}

$(document).arrive('article ._5axto', function() {      // 'article .5axto'
    createDiv();
    observer();
});

$(document).leave('article ._5axto', function() {
    div.remove();
    observer1.disconnect();
});

从我的回答中复制：

对于类似的用例，我使用MutationObserver并检查了每个mutation.addedNodes中每个节点的node.baseURI。

(async function() {
    'use strict';
    const selector = '.quiz--answered';
    const observer = new MutationObserver(mutations => {
        if (!mutations.some(mutation => Array.from(mutation.addedNodes).some(node => node.baseURI.includes('/quiz/')))) {
            return;
        }
        const elm = document.querySelector(selector);
        if (elm) {
            // work with elm
        }
    });
    observer.observe(document.body, {
        childList: true,
        subtree: true
    });
})();