如何在Greasemonkey中重定向到我的youtube订阅页面? [英] How can I redirect to my youtube subscription page in Greasemonkey?

问题描述

我不想在开始屏幕上看到分散注意力的youtube建议，我只想在我转到youtube的/路径时重定向到我的订阅页面.我试图通过使用javascript自动从/路径重定向到/feed/subscriptions 路径来重新设计DOM中的youtube页面.

I don't want to see distracting youtube recommendations on my start screen, I just want to be redirected to my subscription page whenever I go to the / path of youtube. I tried to redesign the youtube page in my DOM by using javascript to redirect from the / path to the /feed/subscriptions path automatically.

我创建了以下脚本，不幸的是，该脚本仅在页面重新加载时有效.

I created the following script, which unfortunately only works on page reload.

// ==UserScript==
// @name        YT redir /home -> /sub
// @match       https://www.youtube.com/*
// @grant       none
// @run-at      document-start
// @version     1.0
// @author      -
// @description 5/30/2020, 12:16:13 PM
// ==/UserScript==

var current_location = location.pathname;
if(current_location == "/"){
     window.location.replace("https://youtube.com/feed/subscriptions")
}

我希望该脚本在浏览youtube并单击主页"或youtube徽标按钮时也能正常工作.但是，它仅适用于页面重新加载.

I expected this script to also work when I browse youtube and click on the home or youtube logo button. However it only works on page reload.

如何在不重新加载youtube的情况下使此脚本正常工作?

要解决此问题以实现相同的目标，我尝试仅替换主页按钮和徽标按钮的href属性.

To work around this problem to achieve the same goal I tried to just replace the href attribute of the home button and the logo button.

// ==UserScript==
// @name        YT test
// @match       https://www.youtube.com/*
// @grant       none
// @run-at      document-start
// @version     1.0
// @author      -
// @description 5/30/2020, 12:16:13 PM
// ==/UserScript==

document.getElementById("endpoint").href="/feed/subscriptions";
document.getElementById("endpoint").removeAttribute('class');
document.getElementById("logo").href="/feed/subscriptions";
document.getElementById("logo").removeAttribute('class');

但是，尽管这些命令在JS控制台中有效，但是即使我将 run-at 属性放在 document-end 上，它们也不能作为油脂猴子脚本起作用.

However, although these commands work in the JS console, they do not take effect as greasemonkey script even if I put the run-at attribute to document-end.

如何通过Greasemonkey自动进行这些更改?

推荐答案

问题:

1. YouTube页面在一个文档中包含具有相同 id 的多个元素，这违反了HTML标准，因此 document.getElementById("logo")会找到错误的一个.您可以改用 document.querySelector('a#logo').

1. YouTube pages have multiple elements with the same id in one document, which is a violation of the HTML standard, so document.getElementById("logo") will find the wrong one. You can use document.querySelector('a#logo') instead.

该页面是使用JavaScript动态构建的，因此元素在DOMContentLoaded事件发生后可能会显示很长时间.您可以使用MutationObserver(可能会消耗资源)或setTimeout/setInterval(不精确).

The page is built dynamically using JavaScript so the elements may appear long time after DOMContentLoaded event has occurred. You can use MutationObserver (may be resource-consuming) or setTimeout/setInterval (not precise).

YouTube网站是SPA(单页应用程序)，它通过使用

YouTube site is a SPA (single page application) which imitates navigation by using History API but userscripts are executed only on real navigation.

---

解决方案:

---

Solution:

可以说有很多解决方案，但是我建议在捕获阶段使用一个简单的 click 侦听器(addEventListener的第三个参数是 true )，以便您不要不必依赖元素的确切选择器，将来站点代码更新时，选择器的选择可能会发生不可预测的变化.

There could be many solutions, arguably, but I suggest using a simple click listener in capture phase (the third parameter of addEventListener is true) so that you don't have to depend on the exact selector for the element, which may change unpredictably when the site code updates in the future.

// ==UserScript==
// @name        YT redir /home -> /sub
// @match       https://www.youtube.com/*
// @grant       none
// @run-at      document-start
// ==/UserScript==

if (location.pathname === '/') {
  location.pathname = '/feed/subscriptions';
}
window.addEventListener('click', e => {
  const a = e.target.closest('a');
  if (a && a.href === 'https://www.youtube.com/') {
    a.pathname = '/feed/subscriptions';
    a.className = '';
  }
}, true);

这篇关于如何在Greasemonkey中重定向到我的youtube订阅页面?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！