Windows 10

YouTubeの「歌ってみた」動画を非表示にするMicrosoft Edge拡張機能

私はよくYouTubeで動画を見るのですが、公式PVを見たいだけなのに、いわゆる「歌ってみた」動画が引っ掛かるとイラッとしてしまいます。

そこで今回は、この“歌ってみた”動画を非表示にする、Edge向けの拡張機能を作ってみることにしました。

Microsoft Edgeの拡張機能とは?

当ブログでも下記記事で紹介していますが、Edgeの拡張機能とは、早い話がHTML + JavaScriptベースで開発可能なアドオンのことです。

詳しい話はMicrosoftのものえさんのブログに載っているので、そちらをご参照ください。

YouTubeの「歌ってみた」動画を非表示にするMicrosoft Edge拡張機能

ではさっそく拡張機能を作っていきます。
今回の拡張機能は下記環境で動作確認しました。

  • OS名:Microsoft Windows 10 Pro Insider Preview バージョン:10.0.16199 ビルド 16199
  • Microsoft.MicrosoftEdge 41.16199.1000.0
  1. 拡張機能用のフォルダを作成します(今回は「C:\EdgeExtensions\HideUtattemita」)。
  2. テキストエディタに下記コードを貼り付け、手順1.のフォルダに「manifest.json」ファイル(UTF-8)として保存します。
  3. {
      "name": "歌ってみたを隠してみた。",
      "description": "YouTubeの「歌ってみた」動画を非表示にする拡張機能です。",
      "version": "1.0.0.0",
      "locale": "ja",
      "default_locale": "ja",
      "author": "@kinuasa",
      "content_scripts": [
        {
          "matches": ["*://*.youtube.com/*"],
          "js": ["script.js"],
          "run_at": "document_start"
        }
      ]
    }
  4. テキストエディタに下記コードを貼り付け、手順1.のフォルダに「script.js」ファイル(UTF-8)として保存します。これが拡張機能の本体となります。
  5. /*
     * YouTubeの「歌ってみた」動画を非表示にするMicrosoft Edge拡張機能
     * 2017.5.18 @kinuasa
     *
     * 参考:http://stackoverflow.com/questions/38507161/getting-the-actual-html-after-a-transition-accures-in-a-youtube-page-chrome-ext
     *
     */
     
    function injectedCode(){
      document.addEventListener('spfdone', hideUtattemita);
      document.addEventListener('DOMContentLoaded', hideUtattemita);
      
      function hideUtattemita(){
        //--------------------------------------------
        // * 文字列パターン
        // * これにマッチした動画を非表示
        var ptn = '歌ってみた|うたってみた|歌ってみました|うたってみました|cover';
        //--------------------------------------------
        
        if(location.href.indexOf('watch?') > 0){
          //再生画面の動画処理
          var list_item = document.getElementsByClassName('video-list-item');
          if(list_item){
            [].forEach.call(list_item, function(elm){
              var video_text = elm.innerText.toLowerCase();
              if(video_text.match(ptn)){
                elm.style.display = 'none';
              }
            });
          }
        }else if(location.href.indexOf('results?') > 0){
          //検索画面の動画処理
          var yt_lockup_video = document.getElementsByClassName('yt-lockup yt-lockup-tile');
          if(yt_lockup_video){
            [].forEach.call(yt_lockup_video, function(elm){
              var video_text = elm.innerText.toLowerCase();
              if(video_text.match(ptn)){
                elm.parentNode.style.display = 'none';
              }
            });
          }
        }else{
          //上記以外の画面の動画処理
          var grid_item = document.getElementsByClassName('yt-shelf-grid-item');
          if(grid_item){
            [].forEach.call(grid_item, function(elm){
              var video_text = elm.innerText.toLowerCase();
              if(video_text.match(ptn)){
                elm.style.display = 'none';
              }
            });
          }
        }
      }
      
    }
    
    function getFunctionText(f) {
      return f.toString().match(/\{[\s\S]*\}$/)[0];
    }
    
    document.documentElement.appendChild(document.createElement('script')).text = getFunctionText(injectedCode);
  6. Microsoft Edgeを起動し、「about:flags」ページを開きます。
  7. 拡張機能の開発者向け機能を有効にする (これによりデバイスが危険にさらされる可能性があります)」にチェックを入れ、Edgeを再起動します。
  8. 「…」(設定など)から「拡張機能」を開きます。
  9. 拡張機能の読み込み」ボタンをクリックし、手順1.のフォルダを選択します、
  10. 手順2.と3.で作成した拡張機能が読み込まれます。
  11. この拡張機能が「オン」になっている状態でYouTubeを開くと、「歌ってみた」動画が表示されなくなります。
  12. これで拡張機能が意図した通りに動いてくれるのですが、Windows ストア経由でダウンロードしたのではない、信頼性の低い拡張機能とみなされるため、一度Edgeを終了してしまうと、自動的に拡張機能が「オフ」になってしまいます。以降、Edge起動時には「不明な発行元からの拡張機能を無効にしました。危険性があるため、無効にしておくことをお勧めします」といったメッセージが表示されるようになるため、「有効にする」ボタンをクリックして、拡張機能をオンにする必要があります。

拡張機能の仕組み

上記拡張機能の仕組みは単純です。
コンテンツスクリプトを使って表示中のページを調べ、指定した要素に特定の文字列(var ptn)が含まれていたら、style.displayプロパティを「none」にしているだけです。

コードを見れば分かる通り、判定もザックリとしたものなので、完璧にフィルタリングすることはできませんが、大まかには目的を達成することができるので、とりあえずはこれで良しとします。

ちなみに、この手の処理は対象となるサイトの構造が変わるたびにコードも修正しなくてはならず、管理上非常に面倒くさいため、ストア公開する予定はありません。

載せているコードは自由に使っていただいて構いませんので、どなたかのご参考になれば幸いです。

[Windows 10]ペイント 3Dを起動するコマンド前のページ

選択中の図形の書式設定を一括変更するPowerPointマクロ次のページ

関連記事

  1. Windows 10

    Windows 10 May 2020 UpdateをISO形式でダウンロードして実機にインストール…

    下記記事にもあるように、5月27日(米国時間)にWindows 10 …

  2. Windows関連

    ドラッグ&ドロップした画像をクリップボードにコピーするバッチファイル

    いくつか画像ファイルを編集する必要があったときに書いたバッチ(というよ…

  3. Windows 10

    [Windows 10]大型アップデートをサイレントインストールする方法

    下記記事で紹介しているように、Windows 10では「Windows…

  4. Windows 10

    [Windows 10]「コマンド ウィンドウをここで開く」を復元する方法

    この記事にあるように、これまではShiftキーを押しながらフォルダを右…

コメント

  • コメント (0)

  • トラックバックは利用できません。

  1. この記事へのコメントはありません。

Time limit is exhausted. Please reload CAPTCHA.

※本ページはプロモーションが含まれています。

Translate

最近の記事

アーカイブ

PAGE TOP