jQuery悬停功能仅在页面重新加载时有效-Chrome扩展

Question

我为网站创建了一个chrome扩展程序，在将鼠标悬停在y上时，将按钮（我们称为x）添加到网页中存在的按钮（我们称为y）上。 该按钮“ y”将出现在网站内浏览的所有页面上。 就像博客或Facebook这样，每个帖子都点赞按钮。 第一次从首页单击链接时，“ x”将附加到y。 但是，当从该页面单击其他链接时，新页面不会在将鼠标悬停在“ y”上时附加“ x”。 但是我注意到的是，悬停执行之前的代码。 我在on-hover函数之前有console.log（）行，并且此行被打印出来。 但是，悬停功能不起作用，但是，如果重新加载页面，悬停功能会起作用，并且'x'会附加到'y'之后。 在此，“ y”表示p，“ x”表示“ btnOne”。

      console.log("ready");
      var c = document.getElementsByClassName("multirecord u-flexColumn u-width60")[0];
 console.log("c");

      var btnOne = document.createElement('button');
      btnOne.setAttribute("id","b1");
      var textOne = document.createElement('span');
      textOne.textContent = '10';
      textOne.style.color = ColorCode
      btnOne.appendChild(textOne);
      btnOne.setAttribute("style","display:block;position: absolute;left:-25px;top:-20px;border:1px solid #ccc; background-color: #fff; border-radius: 50%; transition: background-color 0.5s ease")


      var count;
      var delay=20000, setTimeoutConst;
      var p = document.getElementsByClassName("multirecord  u- u-marginBottom10 u-width60")[0];

      function RemoveButton(){
        p.removeChild(btnOne);

      }
      console.log("reached before hover");
      console.log(c);

      $(c).hover(function(e) {
          console.log("print");
          if (!p.contains(btnOne)) {
            p.appendChild(btnOne);
        },
      function(e) {
          setTimeoutConst = setTimeout(function(){
            if(btnOne){
              $('#b1').off('click');

                if (p.contains(btnOne)) {
                  RemoveButton();
                }
            }
       }

这是我的content.js中的一段代码。 在这里，“在悬停之前到达”和元素“ c”在每次导航时都会被打印，但是悬停仅在重新加载时有效，因此“ print”不会被打印。 这是我的背景脚本：

chrome.tabs.onUpdated.addListener(function(tabId,changeInfo,tab) {
    if(changeInfo.url){
     console.log("tab url changed");
    chrome.tabs.executeScript(tabId, {file: "js/jquery-3.2.1.min.js"});
         chrome.tabs.executeScript(tabId, {file: "payload.js"});
        }

});

我观察到的另一件事是，我在console.log（“ hover before hover”）处设置了一个断点，它每次都会打印，但是由于调试器仅在重新加载时页面才会暂停。 如果未重新加载，则所有断点都不会暂停页面，但会打印消息。

Answer 1

当我将后台脚本更改为此时，悬停功能就开始起作用：

chrome.webNavigation.onHistoryStateUpdated.addListener(function(details) {
       chrome.tabs.executeScript(null, {file: "js/jquery-3.2.1.min.js"});
         chrome.tabs.executeScript(null, {file: "payload.js"});

});