Question

我正在尝试更改youtube页面的标题（以便浏览器顶部的标签更改为“测试”，而不是“ youtube”）。更改几秒钟，从“ youtube”更改为“ test”，然后在页面停止加载后恢复为默认的“ Youtube”。我正在使用Chrome和tampermonkey扩展来注入我的代码（也使用jquery）。如何在网页的生命周期中保留更改？这是下面的代码：

// ==UserScript==
// @name         Hello World App
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @include      *.youtube.*
// @require      https://code.jquery.com/jquery-3.3.1.min.js
// ==/UserScript==

var $ = window.jQuery;
$(document).prop('title', 'test');

Answer 1

使用MutationObserver来检测网站更改标题的确切时间：

// ==UserScript==
// @name     YT title
// @match    https://www.youtube.com/*
// @run-at   document-start
// ==/UserScript==

if (!checkHead()) {
  new MutationObserver((_, ob) => checkHead() && ob.disconnect())
    .observe(document.documentElement, {childList: true});
}

function checkHead() {
  if (document.head) {
    overrideTitle();
    return true;
  }
}

function overrideTitle(title = 'foo') {
  new MutationObserver(() => {
    if (document.title !== title) {
      document.title = title;
    }
  }).observe(document.head, {childList: true, characterData: true});
}

Answer 2

几乎可以肯定，YouTube会在页面的整个生命周期内动态更改其标题，因此它将覆盖您对此页面所做的任何更改。唯一的解决方法是定期更改标题，因此setInterval就是您想要的。

var $ = window.jQuery;
window.setInterval(function() {
    $(document).prop('title', 'test');
}, 1000);

1000表示每1000ms或1秒，标题将重置为“测试”。

更改标题仅保存几秒钟（直到页面停止加载）

2 个答案: