在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。

我尝试了更多的代码并尝试改变我自己，没有运气。我可以使用另一种方法而不是Mutation Observers吗？在所有按钮中添加onclick功能可以触发我的内容脚本吗？感谢一些帮助。

编辑：所以我在DOM上看到我需要捕捉：<span class=" activePager">1</span>更改，当我点击第二页时，数字1代表第一页它变为2。

Answer 1

您需要在内容脚本上使用Mutation Observer，因为那里会发生更改。

在此之后，您可以将这些更改发送到“背景”页面并从那里进行处理。