Страница видеоизображения Alter Youtube с помощью консоли Chrome JS & CSS

Question

Мне было интересно, смогу ли я настроить стиль некоторых html elmements на веб-странице с помощью консоли Google Chrome.

Я смотрю подкасты на youtube. И я ненавижу тот факт, что youtube предлагает похожие видеоролики, которые находятся впереди на временной шкале подкаста (я пытаюсь догнать). Я хочу настроить пару стилей элементов на сайте.

То, что я хочу добиться того, чтобы запустить следующий код каждый раз, YouTube видео загрузки страницы:

function youtubeVideoPageLoad() 
{ 
    youtubeFunction(); 
    $('body').on('transitionend', function(event) 
    { 
     if (event.target.id != 'progress') return false; 

     $('#watch7-sidebar-contents').remove(); 
     $('.html5-main-video').css("width","auto"); 
     $('.html5-main-video').css("height","auto"); 
     $('.player-height').css("height","720px"); 
     $('.ytp-chrome-bottom').css("width","100%"); 
     youtubeFunction(); 
    }); 
} 

$(youtubeVideoPageLoad); 

Это удаляет предложенные видео и делает видео и суб содержания большим. Просто лучше для меня.

Как я могу сделать это возможным, потому что получаю .css is undefined. Это проблема, потому что я не могу использовать jQuery в консоли.

И как я могу запускать его каждый раз, когда загружается страница с YouTube?

Благодаря

Answer 1

Как уже упоминалось RISM, если вы должны сделать это с помощью консоли и с помощью JQuery, вам нужно на самом деле внедрить Jquery на страницу себя как Google не использует JQuery на странице YouTube.

Вот как:

var script=document.createElement('script'); 
script.src='https://code.jquery.com/jquery-latest.min.js'; 
var head=document.getElementsByTagName('head')[0] 
head.appendChild(script); 

Затем вы можете использовать функции JQuery как jQuery.find('div').

Вы по-прежнему не можете использовать $, поскольку YouTube имеет другое значение, присвоенное $.

---

Это, я использую Stylebot для этого типа вещей. Это расширение хром Google, которое позволяет вам добавить свой собственный CSS на любой сайт. Он сохраняет ваш собственный CSS и применяет его в любое время, когда вы открываете эту веб-страницу.

Я лично использую его для удаления нежелательных рекламных разделов Google и исправления проблем с макетами страниц, когда я не владею страницей (неуклюжие меню, а что нет). Я также использую его для настройки наших рабочих веб-сайтов, таких как Atlassian Jira и Confluence. Это сработало хорошо для меня.

После его установки существует несколько способов его использования. Самое простое ...

Нажмите кнопку действия CSS браузера

Нажмите на кнопку "Редактировать CSS" в нижней части всплывающего меню

Написать свой обычай CSS в поле и нажмите «Сохранить»

Answer 2

Я понятия не имею, что ваш youTubeFunction должен представлять таким образом, я надеюсь, что вы делаете. По комментариям $, вероятно, не означает jQuery на YouTube, и это заключение подтверждается выходом console.log($). Так что лучше всего будет слишком просто использовать обычный JavaScript, как показано ниже или уплотнить его в одну строку:

function youtubeVideoPageLoad() 
{ 
    youtubeFunction(); 
    var uBody = document.getElementsByTagName('body')[0]; 
    uBody.addEventListener('transitionend', ytCustomizer); 
} 

function ytCustomizer(event) 
    { 
     if (event.target.id != 'progress') return false; 
     document.getElementById('watch7-sidebar-contents').style.display='none'; 
     var vid = document.getElementsByClassName('html5-main-video')[0]; 
     vid.style.width='auto'; 
     vid.style.height='auto'; 
     document.getElementsByClassName('player-height')[0].style.height= "720px"; 
     document.getElementsByClassName('ytp-chrome-bottom')[0].style.width= "100%"; 
     youtubeFunction(); 
    }); 

youtubeVideoPageLoad();