Question

我已经为网站创建了一个镀铬扩展程序，该按钮会将一个按钮（让我们称之为x）添加到网页上的按钮（让我们称之为y）悬停＆＃ 39; Y＆＃39 ;.这个按钮＆＃39; y＆＃39;将出现在网站内导航的所有页面上。它就像一个博客或Facebook，其中每个帖子都有相似的按钮。这是第一次从主页点击链接，＆＃39; x＆＃39;被附加到y。但是，当从该页面点击其他链接时，新页面不会附加＆＃39; x＆＃39;在徘徊＆＃39;。但我注意到的是，在悬停之前的代码被执行了。我在on hover函数之前有console.log（）行，并且打印出来。但是，悬停不起作用，但是，如果重新加载页面，则悬停起作用并且＆＃39; x＆＃39;被附加到＆＃39; y＆＃39;。在这里，＆＃39; y＆＃39;是指p和＆＃39; x＆＃39;到了＆＃39; btnOne＆＃39;。

      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中的一段代码。在这里，＆＃34;在悬停之前达到＆＃34;和元素＆＃39; c＆＃39;每次在导航时都会打印，但悬停仅适用于重新加载，因此＆＃34; print＆＃34;没有印刷。这是我的背景脚本：

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中设置了一个断点（＆＃34;在悬停＆＃34之前达到;），每次都会打印，但由于调试器页面暂停仅在重新加载时如果没有重新加载，则没有任何断点暂停页面，但会打印消息。

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"});

});

Jquery悬停功能仅适用于页面重新加载 - chrome扩展

1 个答案: