初めまして、サードスコープでWebエンジニアをしている藪中といいます。
3年ほど前からYouTubeでショート動画が投稿できるようになり、今では当たり前のようにほとんどの投稿者がショート動画を上げています。
短くて刺激的な内容を切り取っているので見てる間は楽しいのですが、長い動画を見ているときおすすめ欄に出てくると、気になってしまい見ている動画に集中できなくなりがちです。
そこでChromeの拡張機能でショート動画をおすすめ欄から消し、そもそも目に入らないようにしようというのが本記事の内容です。
プラグイン作成に必要なファイル
設定画面などを用意しない場合、プラグインのソースコードとして必要なファイルは下記の2つのみです。
.
└── src
├── content.js
└── manifest.json
manifest.json
作成するプラグインの設定ファイルになります。
今回は必須である下記の5項目のみを設定しており、content_scriptsでどこのURLでどのjsファイルを読み込むかを設定しています。
{
"name": "ショート動画削除プラグイン",
"version": "1.0.0",
"manifest_version": 3,
"description": "おすすめ欄からショート動画を消すプラグイン",
"content_scripts": [{
"matches": ["https://www.youtube.com/*"],
"js": [
"content.js"
]
}]
}
Javascriptファイル(content.js)
プラグインに読み込まれるjsファイル
とりあえずちゃんと読み込まれているかを確認するためalertを表示
alert("Hello World!");
これら二つのファイルをそれぞれsrcのディレクトリに保存し、拡張機能設定(chrome://extensions/) → 「パッケージされてない拡張機能を読み込む」 からsrcディレクトリをそのままアップロード
無事追加されました
そのまま有効化しhttps://www.youtube.com/ へアクセスすると
できました、次はこのcontent.jsの内容を編集しjsからショート動画を消していきます。
プラグイン実装
開発者ツールで見ているみるとショート動画のカードは全て特定のカスタム要素(ytm-shorts-lockup-view-model-v2)を使っていることが分かりました。
よってタグ名からカードを取得後、取得した要素を全て削除すればいけると思ったのですが 、動的にDOMが追加されており読み込み後の一回きりの実行だけではうまくいきませんでした。
//content.js
const SELECTOR = "ytm-shorts-lockup-view-model-v2";
const shortCardList = Array.from(document.getElementsByTagName(SELECTOR));
shortCardList.forEach((el) => el.remove());
その為observerを用いてDOMを監視し、DOMが書き換わるたびに対象のタグを探しあれば削除するように修正しました。
//content.js
const SELECTOR = "ytm-shorts-lockup-view-model-v2";
const removeShorts = () => {
Array.from(document.getElementsByTagName(SELECTOR)).forEach(el => el.remove());
};
//body要素を監視
const observer = new MutationObserver(removeShorts);
observer.observe(document.body, { childList: true, subtree: true });
// 初回実行
removeShorts();
うまくいきました、アイコンが残ってしまっていますがとりあえず今回はここまでで完了です。
※今回の実装方法はYouTubeの内部実装に依存しており
今後使えなくなる可能性あります(2025/11/11)
まとめ
ブラウザのプラグインを作成するのは初めてでしたが、思いの外手軽にでき短時間で便利なものが作れそうだと感じました。
是非皆さんも、よく使うwebサイトで少し不便と感じたりいじりたい思うことがあればやってみてください。