我正在开发chrome扩展程序，该扩展程序将修改网站中的元素。该网站在加载主文档以获取页面内容后发送了许多ajax调用（GWT框架体系结构）。我需要修改该网页的内容，并且要修改的元素只有在所有ajax调用之后才会创建。
让我们假设我要修改的元素的id为#idContainer > div > div.container.container\--wider.\\30，只有在ajax调用完成后才能使用。
该元素可用后，如何执行js代码（通过chrome扩展->内容脚本）。
注意： 我在stackOverflow中看到了许多类似的问题，但是如果不使用jQuery，它们都无法解决。
考虑使用Mutation Observer。这是我不得不解决完全相同的问题的一些项目的示例。
// observer callback
const callback = (mutations) => {
const matching = [];
for (const {addedNodes} of mutations) { // for each mutation
for (const node of addedNodes) { // iterate through all added nodes
if (node.nodeType !== Node.ELEMENT_NODE) {
continue; // only react to real element nodes
}
if (node.children[0]) { // Here you can check for what you want
matching.push(...node.getElementsByTagName('pre'));
}
}
}
if (matching.length === 2) { // I needed the second pre tag
ipcRenderer.send('note-result',matching[1].innerText);
}
};
// intialize the observer with the callback
const observer = new MutationObserver(callback);
// pass a targetNode and an options object in the observe method
observer.observe(document.body,{attributes: true,childList: true,subtree: true});
在此示例中，我对DOM中出现的第二个“ pre”标记的textContent感兴趣。
您也可以使用断开连接方法停止观察：
observer.disconnect();
您必须根据特定用例对代码进行一些调整，但这是使用变异观察器的要旨。
,如果您正在编写Chrome扩展程序，则可能应该使用chrome.webRequest API和onCompleted事件
chrome.webRequest.onCompleted.addListener(function callback)