Chrome 扩展和 Dom 捕获

Question

我为我的一个页面创建了 chrome 扩展程序。我在页面上的 dom 元素中获取数据并查询 api 并将其回调。在我获取数据的网站上，在页面之间切换时页面不会重新加载。所以我无法在foreground.js中捕获Dom加载或位置更改，因为页面没有刷新，我通过超时解决了我的问题。foreground.js中的dom仅在页面刷新时触发。我在settimeout中写的代码是在页面切换的时候触发的。我怎样才能在不超时的情况下解决这个问题？

background.js 代码

chrome.tabs.onUpdated.addListener((tabId, changeInfo,tab) => {
                if(changeInfo.status == "complete" && tab.status == "complete") {
                chrome.scripting.executeScript({
                    target: {tabId: tabId},
                    files: ["./foreground.js"]
                })
            }
});

foreground.js 代码

document.addEventListener("DOMContentLoaded", () => { alert('Dom'); }); //not working

window.addEventListener('locationchange', function(){
  console.log('location changed!');
}) //not working

setTimeout(() => {
let find = document.querySelector(".contentsdetailscontainer").textContent;
},1000); //this is working

Answer 1

foreground.js 在document.readyState 为complete 时执行，这意味着DOMContentLoaded 已经被触发了。

如果此时所需的元素在 DOM 中不存在，您可以使用 Mutation Observer 并等待它。

这是一个简单的例子（非常低效，因为它观察整个身体，如果只有特定元素发生变化，你应该观察它，所以只作为指导）：

var nodeFound = false;
const observer = new MutationObserver(() =>
{
  const node = document.querySelector(".contentsdetailscontainer");
  if (node && node.textContent)
  {
    if (!nodeFound)
    {
      //only show alert once per new page.
      alert("node found");
      nodeFound = true;
    }
  }
  else
  {
    nodeFound = false; //reset in case page updated again
  }
});

observer.observe(document.body, {subtree: true, childList: true});