2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

FirefoxのYouTubeコメントのスクロールバーを消す

Last updated at Posted at 2023-06-18

やりたいこと

FirefoxでYouTubeを見ていると、短いコメントでもスクロールバーと「続きを読む」が表示されて気になる。
→Firefoxの拡張機能で、任意のJavascriptを実行できるTampermonkeyを使えば、削除できるかも

ちなみに私はJavascriptを書いたことがないので、賢いChatGPTのちからを借りてコーディングする。

環境(追記:2023/06/19)

この記事を書いた段階では、Windows10の入ったSurface Pro 4で、Firefox 114.0.1を使っている。

方法(追記:2023/06/20)

記事を公開してからもう一度考えてみると、単にスクロールバーを消せばいいのでは?と思ったので試してみるとうまく行ったので追記。
スクロールバーを消す方法は、スクロールを引き起こす要素にCSSでoverflow: hiddenを指定する。こうすると、はみ出た要素を隠したままスクロールバーを消せる。
開発者ツールで調べると、コメントのytd-expanderタグがスクロールバーを作り出す原因のようなので、これにスタイルを適用する。スクリプトは以下の通り。

// ==UserScript==
// @name         Delete Comment's Scrollbar on YouTube
// @namespace    http://tampermonkey.net/
// @version      0.4
// @description  Delete Comment's Scrollbar on YouTube
// @author       
// @match        https://www.youtube.com/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=rightcode.co.jp
// @grant        none
// ==/UserScript==

(function() {
    'use strict';
    let scrollCount = 0;
    window.addEventListener("scroll", function(){
        scrollCount++;
        if(scrollCount % 4 == 0){
            var elements = document.getElementsByTagName('ytd-expander');
            console.log(elements);
            for(var i=0; i < elements.length; i++) {
                elements[i].style.overflow = "hidden";
            }
        }
    }, false);
})();

これを実行したところ、きれいにスクロールバーが消えた。
また、スクロールバーが表示されていたときはコメントの上でマウスホイールを動かしてもスクロールが効かなかったのだが、スクリプト実行後はコメントの上でスクロールができるようになった。「続きを読む」の表示が残っているが気にならないだろう。

このスクリプトの方が確実かつ簡単に消せるのだが、前の方法も試行錯誤の跡として残しておく。

方法(旧)

開発者ツールでスクロールバーを表示している要素を探したところ、「続きを読む」を表示しているtp-yt-paper-buttonタグがスクロールバーを表示しているようだ。
Tampermonkeyでこれらの要素をすべて削除する。

削除できてない

しかし、スクリプトを実行しても、要素が削除できていない。色々調べてみると、どうもページを読み込んだときにしかスクリプトを実行していないことが原因だった(YouTubeはスクロールしないとコメントをロードしない)。
→スクロールするごとにスクリプトを実行する
ただし、毎回実行する必要はないので、4回に1回だけ実行する。

コメントが見れない

しかし、「続きを読む」を削除すると、普通に長いコメントの続きが見れなくなる。
→削除する前にコメントを展開する
そのために、ytd-expanderタグのcollapsed属性を削除する。

コード(旧)

最終的なTampermonkeyのコードはこのようになった。

// ==UserScript==
// @name         Delete Comment's Scrollbar on YouTube
// @namespace    http://tampermonkey.net/
// @version      0.3
// @description  Delete Comment's Scrollbar on YouTube
// @author       You
// @match        https://www.youtube.com/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=rightcode.co.jp
// @grant        none
// ==/UserScript==

(function() {
    'use strict';
    let scrollCount = 0;
    window.addEventListener("scroll", function(){
        scrollCount++;
        var expanders = document.getElementsByTagName('ytd-expander');
        for( var i=0; i < expanders.length; i++){
            expanders[i].removeAttribute('collapsed');
        }

        if(scrollCount % 4 == 0){
            var elements = document.getElementsByTagName('tp-yt-paper-button');
            console.log(elements);
            while (elements.length > 0) {
                elements[0].parentNode.removeChild(elements[0]);
            }
        }
    }, false);
})();

結果

Tampermonkeyを使って、Firefoxで見るYouTubeの煩わしいスクロールバーを削除した。まったく知らない言語でもチャットボット様のおちからを借りればコーディングできた。

2
1
4

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?