Question

我想制作一个小扩展程序，将简单的html注入视频下方的YouTube页面。如果我简单地访问youtube网址，它工作正常。但是，如果我从youtube商品中选择一个视频，那么我的html代码会被注入两次但会被删除。我可以看到它出现然后几乎立即消失。

我的代码是：

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

Answer 1

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

Answer 2

我猜youTube正在某些页面上使用Ajax调用来加载内容，因此您的代码将被Ajax响应替换。

使用setTimeout（）函数在几秒钟后检查代码是否在页面上，如果不是，请再次添加。

Answer 3

以下是使用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
  }
}

简而言之，您创建一个全局var chrome._LAST_RUN来跟踪此事件是否已在不到一秒钟之前触发。

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

Chrome扩展程序 - 页面更新两次，然后在YouTube

3 个答案: