检测 ajax 页面更改并使用 DOM 添加组件（Chrome 扩展，JavaScript）

Question

我正在尝试向页面添加 DOM 个元素 https://anilist.co/user/diskxo/animelist

var divEntryRow = document.getElementsByClassName("entry row")[x]
    var playbutton = document.createElement("DIV");
    playbutton.className = "playbutton";
    var aInput = document.createElement("A");
    var img = document.createElement("IMG");   
    aInput.appendChild(img);
    playbutton.appendChild(aInput);
    divEntryRow.appendChild(playbutton);

，但加载时并未显示整个页面，因此我的扩展没有在一些地方添加元素（右边的播放按钮）

此外，当我在站点的选项卡之间移动时，扩展不会重新加载，因为更新仅由 ajax 在后台进行。我一直在寻找检测更改和重新加载扩展的方法，包括这些：

$.ajax({
    processData: false,
    contentType: false,
    success: function() {
        doThings();
       
    },
});

或：

function DOMModificationHandler(){
    $(this).unbind('DOMSubtreeModified.event1');
    setTimeout(function(){
        doThings();
        $('#ContentContainer').bind('DOMSubtreeModified.event1',DOMModificationHandler);
    },1000);
}

//after document-load
$('#ContentContainer').bind('DOMSubtreeModified.event1',DOMModificationHandler);

我在扩展中包含了 jquery 库。这是我的 manifest.json 文件：

{
    "manifest_version": 2,
    "name": "JiyuMe",
    "version": "1.0",

    "description": "Your next anime streaming website... it's not a streaming website!",

    "content_scripts": [{
        "matches": ["*://*.anilist.co/*"],
        "js": ["js/jquery-3.6.0.min.js", "js/client.js"]
    }],

    "background": {
        "scripts": ["js/background.js"]
    },

    "browser_action": {
        "default_popup": "popup.html"
    },

    "permissions": [
        "*://anilist.co/*",
        "nativeMessaging",
        "tabs",
        "activeTab"
    ],
    "content_security_policy": "script-src 'self' https://apis.google.com; object-src 'self'"

}

您对解决此问题有什么想法吗？

Answer 1

对于第二个问题，我用一个简单的函数解决了：

//Sleep function
function sleep(ms) {
    return new Promise((resolve) => setTimeout(resolve, ms));
}

//Wait for Ajax site load
$.ajax({
    processData: false,
    contentType: false,
    success: async function() {
        onPageChange("1");
    },
});

async function onPageChange(oldPage_val) {
    var currentPage = window.location.href;
    if (currentPage != oldPage_val) {
        oldPage_val = currentPage;
        pageScan();
        await sleep(500);
        onPageChange(oldPage_val);
    } else {
        await sleep(500);
        onPageChange(oldPage_val);
    }
}

我等待页面加载，然后启动 onPageChange() 函数，如果页面的 link 发生变化，则每 500 毫秒检查一次。由于变量：oldPage_val

，比较旧的 link 和新的 link

检测 ajax 页面更改并使用 DOM 添加组件（Chrome 扩展，JavaScript）

Detect ajax page changes and add components with DOM (Chrome Extensions, JavaScript)

javascript

ajax

dom

google-chrome-extension