Youtube 切换相关部分 - Tampermonkey

Question

我修改了一个现有脚本，为 hide/show YouTube 上的相关侧边栏创建了一个按钮。相关部分应该默认隐藏。与 FF 插件 YT Clean 类似。

如果 'related' 块默认可见（代码中没有 button.click()），则该按钮效果很好。如果我重新加载...观看页面也有效。

但是如果我来自默认的 youtube 页面或搜索结果（点击视频观看），我必须点击按钮两次才能隐藏 'related' 块。

我真的是初学者（我没有写这个），非常感谢任何帮助。

// ==UserScript==
// @name            Youtube - toggle related
// @namespace       -
// @version         1.0
// @match           https://www.youtube.com/*
// @grant           none
// @require         https://code.jquery.com/jquery-3.3.1.min.js
// @run-at          document-end
// @noframes
// ==/UserScript==

(function(){
  'use strict';
  console.log('X');
  let target = document.querySelectorAll('body')[0];
  let options = {'childList': true, 'subtree' : true};

  function callback(observer, node){
    if (node.nodeName.toLowerCase() == '#secondary-inner'){
      $('#secondary-inner').hide(); 
    }
  }

  let observer = new MutationObserver(function(mutations){
    mutations.forEach(function(mutation){
      if (mutation.type === 'childList'){
        mutation.addedNodes.forEach(function(node){
          callback(observer, node);
        });
      }
    });
  });

  let button = document.createElement('button');
      button.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="48" height="24" viewBox="0 0 24 24"><g fill="currentColor"><path d="M4 14h4v-4H4v4zm0 5h4v-4H4v4zM4 9h4V5H4v4zm5 5h12v-4H9v4zm0 5h12v-4H9v4zM9 5v4h12V5H9z"/></g></svg>';
      button.style = `
                      background: transparent;
                      border: 0;
                      color: rgb(96,96,96);
                      cursor: pointer;
                      outline: 0;
      `;
  
  let hide = false;

    button.onclick = ()=>{
    hide = !hide;
    if (hide){
      if ($('#secondary-inner')[0]) 
        $('#secondary-inner').hide()
      else
        observer.observe(target, options);
      
      console.log(`hide`);
    }
    else{
      observer.disconnect();
      console.log(`show`);

      $('#secondary-inner').show();
    }
  }

  button.click();
  
  let menu = $('#end')[0];
      menu.insertBefore(button, menu.lastElementChild);

  console.log('inserted');

} )()

Answer 1

如果你想让元素在没有任何按钮的情况下一直默认隐藏，你可以这样做：

// ==UserScript==
// @name            Youtube - Hide Related Sidebar
// @namespace       -
// @version         1.0
// @match           https://www.youtube.com/*
// @grant           none
// @require         https://code.jquery.com/jquery-3.6.0.min.js
// @run-at          document-end
// @noframes
// ==/UserScript==

(function(){
    'use strict';

    const callback = () => $('#secondary-inner').hide();

    const observer = new MutationObserver(function(mutations){
        mutations.forEach(function(mutation){
            if (mutation.type === 'childList'){
                mutation.addedNodes.forEach(function(node){
                    callback();
                });
            }
        });
    });

    observer.observe(document.body, {'childList': true, 'subtree' : true});
})(

)

Answer 2

这是一个工作版本。欢迎任何comments/revision。

// ==UserScript==
// @name            Youtube - Toggle Related Sidebar
// @namespace       -
// @version         1.2
// @match           https://www.youtube.com/*
// @include         https://www.youtube.com/watch*
// @grant           none
// @require         https://code.jquery.com/jquery-3.6.0.min.js
// @run-at          document-end
// @noframes
// ==/UserScript==
    
(function(){
  'use strict';
  
  let target = document.querySelectorAll('body')[0];
  let options = {'childList': true, 'subtree' : true};
  
  const callback = () => $('#related').hide();
  
      const observer = new MutationObserver(function(mutations){
        mutations.forEach(function(mutation){
            if (mutation.type === 'childList'){
                mutation.addedNodes.forEach(function(node){
                    callback();
                });
            }
        });
    });

  observer.observe(document.body, {'childList': true, 'subtree' : true});

  let button = document.createElement('button');
      button.innerHTML = '<svg width="48" height="24" viewBox="0 0 24 24"><g fill="currentColor"><path d="M4 14h4v-4H4v4zm0 5h4v-4H4v4zM4 9h4V5H4v4zm5 5h12v-4H9v4zm0 5h12v-4H9v4zM9 5v4h12V5H9z"/></g></svg>';
      button.style = ` background: transparent; border: 0; color: rgb(96,96,96); outline: 0; `;
  
  let hide = true;

    button.onclick = ()=>{
    hide = !hide;
    if (hide){
      if ($('#related')[0]) 
        $('#related').hide()
      else
        observer.observe(target, options);
        console.log(`hide`);
    }
    else{
      observer.disconnect();
      console.log(`show`);

      $('#related').show();
    }
  }

  
  let menu = $('#end')[0];
      menu.insertBefore(button, menu.lastElementChild);

  console.log('inserted');

} )()

Youtube 切换相关部分 - Tampermonkey

Youtube toggle related section - Tampermonkey

javascript

firefox

youtube

tampermonkey

togglebutton