Youtube 切换相关部分 - Tampermonkey
Youtube toggle related section - Tampermonkey
我修改了一个现有脚本,为 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');
} )()
如果你想让元素在没有任何按钮的情况下一直默认隐藏,你可以这样做:
// ==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});
})(
)
这是一个工作版本。欢迎任何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');
} )()
我修改了一个现有脚本,为 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');
} )()
如果你想让元素在没有任何按钮的情况下一直默认隐藏,你可以这样做:
// ==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});
})(
)
这是一个工作版本。欢迎任何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');
} )()