javascript - ajax调用后获取DOM中的元素

Question

关于这个问题有很多问题和答案，但我无法让它适用于我的情况。

我的扩展程序获取游戏得分页面上的位置 (1,2,...,100)。当我第一次加载页面时，我得到了前 100 个位置，但是还有更多页面，问题是其他页面是用 ajax 调用的，在 ajax 调用后我无法获取它们。

我得出的结论是，我可以使用Mutation Observers来检测 DOM 中的变化，但我尝试了很多不同的代码，但它们似乎都不起作用。

我的ma​​nifest.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

您需要在内容脚本上使用突变观察器，因为更改发生在那里。

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