Chrome擴展程序 - 頁面更新兩次，然後在YouTube上刪除

我想製作一個小擴展，將簡單的html注入視頻下的YouTube頁面。如果我簡單地訪問YouTube網址，它工作正常。但是，如果我從youtube優惠中選擇視頻，那麼我的html代碼會被注入兩次，但會被刪除。我可以看到它幾乎立即出現然後消失。Chrome擴展程序 - 頁面更新兩次，然後在YouTube上刪除

我的代碼是：

background.js

chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) { 

    if (changeInfo.status == 'complete' && tab.status == 'complete' && tab.url != undefined) { 

     chrome.tabs.query({active: true, currentWindow: true}, function(tabs) { 
      chrome.tabs.sendMessage(tabs[0].id, {method: "reDraw"}, function(response) { 
       console.log("Injection ready!"); 
      }); 
     }); 

    } 

});

content.js

chrome.runtime.onMessage.addListener(
    function(request, sender, sendResponse) { 
     if (request.method == "reDraw") { 
      $.get(chrome.extension.getURL('/mytest.html'), function(data) { 
       $(data).insertAfter('#placeholder-player'); 
      }); 
     } 
    } 
);

來源

2016-04-23 Vmxes

chrome.tabs.onUpdated也會觸發iframe，對於youtube，有很多iframe會觸發此事件，除此之外，當您從一個視頻轉到另一個視頻時，youtube不會重新加載頁面。有關YouTube的問題的更多細節，你可以在這些線程看看：

~~所以，我的建議是使用chrome.webNavigation API，並結合webNavigation.onCompleted與webNavigation.onHistoryStateUpdated，示例代碼將如下所示~~

考慮你是檢測的YouTube視頻頁面，我會建議你使用chrome.webNavigation.onHistoryStateUpdated

// To handle youtube video page 
chrome.webNavigation.onHistoryStateUpdated.addListener(function(details) { 
    if(details.frameId === 0) { 
     // Fires only when details.url === currentTab.url 
     chrome.tabs.get(details.tabId, function(tab) { 
      if(tab.url === details.url) { 
       console.log("onHistoryStateUpdated"); 
      } 
     }); 
    } 
});

來源

2016-04-24 03:32:11

該解決方案是工作在大多數情況下細，但我意識到，一個受歡迎的Chrome擴展的一個防止這種事件，火災等我的分機不能正常工作。 – Vmxes

@Vmxes，更多詳情？ –

您的解決方案工作正常，直到我安裝了「Magic Actions for YouTube 6.9.0.0」。如果啓用了此擴展，那麼onHistoryStateUpdated事件未被觸發或未訪問我的擴展偵聽器。 – Vmxes

我猜YouTube是使用Ajax調用一些頁面加載的東西，所以你的代碼正在被Ajax響應所取代。

使用setTimeout（）函數幾秒鐘後檢查代碼是否在頁面上，如果沒有，則再次添加它。

來源

2016-04-23 11:20:40 niandrei

下面是使用chrome.webNavigation.onHistoryStateUpdated

// background.js 
'use strict'; 

console.log('QboAudit Background Script'); 

chrome.runtime.onInstalled.addListener(details => { 
    console.log('QboAudit previousVersion', details.previousVersion); 
}) 

chrome.webNavigation.onHistoryStateUpdated.addListener((details) => { 
    console.log('QboAudit Page uses History API and we heard a pushSate/replaceState.') 
    if(typeof chrome._LAST_RUN === 'undefined' || notRunWithinTheLastSecond(details.timeStamp)){ 
    chrome._LAST_RUN = details.timeStamp 
    chrome.tabs.getSelected(null, function (tab) { 
     if(tab.url.match(/.*\/app\/auditlog$/)){ 
     chrome.tabs.sendRequest(tab.id, 'runQboAuditLog') 
     } 
    }) 
    } 
}) 

const notRunWithinTheLastSecond = (dt) => { 
    const diff = dt - chrome._LAST_RUN 
    if (diff < 1000){ 
    return false 
    } else { 
    return true 
    } 
}

總之你做一個全局變量chrome._LAST_RUN的辦法只有火一次跟蹤此事件是否已經在不到一秒鐘之前發起。

// contentscript.js 
chrome.extension.onRequest.addListener((request, sender, sendResponse) => { 
    //console.log('request', request) 
    if (request == 'runQboAuditLog') 
    new QboAuditLog() 
});

來源

2017-10-19 12:38:48 Minimul

Chrome擴展程序 - 頁面更新兩次，然後在YouTube上刪除

回答

相關問題