Ajax調用后在DOM中獲取元素

Question

關於這個問題有很多疑問和答案，但是我無法使其適合我的情況。

我的擴展程序獲取游戲分數頁面上的位置（1,2，...，100）。 當我第一次加載頁面時，我獲得前100個位置，但是有更多頁面，問題是其他頁面都用ajax調用，而在ajax調用之后我無法獲取它們。

我得出的結論是，我可以使用Mutation Observers來檢測DOM中的更改，但是我嘗試了很多不同的代碼，而且它們似乎都不起作用。

我的manifest.json文件：

{
    "manifest_version": 2,
    "name": "Ogame Fleet Counter",
    "short_name": "OFC",
    "version": "1.0",
    "icons": { "16": "16.png",
               "48": "48.png",
               "128": "128.png"
    },
    "browser_action": {
        "default_icon": "48.png"
    },
    "background": {
        "scripts": ["js/background.js"]
    },
    "content_scripts": [
        {
            "matches":[
                "https://*.ogame.gameforge.com/game/index.php?page=shipyard*",
                "https://*.ogame.gameforge.com/game/index.php?page=highscore"
            ],
            "js": ["js/jquery.js", "js/content.js"] 
        }
    ]
}

我的background.js文件：

chrome.browserAction.onClicked.addListener(function(tab) {
  chrome.tabs.executeScript(null, { file: "js/jquery.js" }, function() {
    chrome.tabs.executeScript(null, { file: "js/content.js" });
  });
});
var insertedNodes = [];
var observer = new MutationObserver(function(mutations) {
 mutations.forEach(function(mutation) {
   for (var i = 0; i < mutation.addedNodes.length; i++)
     insertedNodes.push(mutation.addedNodes[i]);
 })
});
observer.observe(document, { childList: true });
console.log(insertedNodes);

我的擴展僅包含background.js ， content.js （內容腳本）和jquery.js 。

我嘗試了更多的代碼，並嘗試更改自己的代碼，但是沒有運氣。 我可以使用除“ 突變觀察者”之外的其他方法嗎？ 在所有按鈕中添加onclick函數以觸發我的內容腳本嗎？ 感謝一些幫助。

編輯：因此，我在DOM上看到需要捕獲的內容： <span class=" activePager">1</span>更改，當我單擊第二頁時，其中的數字1代表第一頁，更改為2。

Answer 1

您需要在內容腳本上使用Mutation Observer，因為在那里發生了更改。

之后，您可以將這些更改發送到“后台”頁面並從那里進行處理。