使用 Chrome 控制台 JS 和 CSS 更改 Youtube 视频页面答案

【问题标题】：Alter Youtube Video Page using Chrome Console JS & CSS使用 Chrome 控制台 JS 和 CSS 更改 Youtube 视频页面
【发布时间】：2015-11-17 02:28:03
【问题描述】：

我想知道是否可以使用 google chrome 控制台调整网页上某些 html 元素的样式。

我在 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 页面时运行它？

谢谢

【问题讨论】：

Stylebot 是一个 chrome 扩展程序，可让您超级轻松地将 CSS 应用到任何网站
@DelightedD0D 不错！你个人使用它，你如何使用它，你有它的目的是什么？
当然可以，因为$().css 是jquery。在运行代码之前导入或仅使用纯 js
@cwiggo 我在下面添加了一个答案，以更好地解释我对 Stylebot 的使用。如果您仍然好奇为什么您的 jquery 不起作用，您可以发布一个指向您尝试使用它的页面的链接吗？
@DelightedD0D $ 不代表jQuery，只是将jQuery 替换为$ 的代币。 $ 可以设置为任何值。打开一个youtube视频页面的源，搜索jQuery，你找不到。

标签： javascript jquery html css youtube

【解决方案1】：

正如 rism 所提到的，如果您必须通过控制台并使用 jQuery 来执行此操作，您需要自己将 jQuery 实际注入页面，因为 Google 不会在 YouTube 页面上使用 jQuery。

方法如下：

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.find('div')这样的jQuery函数。

您仍然无法使用 $，因为 YouTube 已经为 $ 分配了不同的值。

也就是说，我使用Stylebot 处理这类东西。这是一个谷歌浏览器扩展，允许您将自己的 CSS 添加到任何网站。它会保存您的自定义 CSS，并在您打开该网页时应用它。

我个人使用它来删除不需要的谷歌广告 div，并在我不拥有页面时解决页面布局问题（跳转菜单等等）。我还使用它来定制我们的工作网站，例如 Atlassian Jira 和 Confluence。它对我来说效果很好。

安装后，有几种使用方法。最简单的就是...

点击 CSS 浏览器操作按钮

点击弹出菜单底部的“编辑 CSS”按钮

在提供的框中写入您的自定义 CSS，然后点击“保存”

【讨论】：

【解决方案2】：

我不知道你的youTubeFunction 应该代表什么，所以我希望你知道。根据 cmets $ 可能并不意味着 YouTube 上的 jQuery，这是 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();

【讨论】：