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，因为在那里发生了更改。

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