はじめに
私は、よく勉強しようと YouTube を見ても、おすすめに流れてくる誘惑をクリックしてしまいます。他のウェブサイトは Norton Family さん（カテゴリーによるウェブサイトの閲覧制限）と Microsoft Family Safety さん（パソコン全体の起動動時間制限）のお力を借りて見れなくしているのですが、YouTube はチャンネルごとに設定することができませんでした...。
もちろん、自制心をもてという話ですが、少しでも「あ、みたらだめだ💦」と気づけるように警告を表示する Chrome 拡張機能を作りました。学生の皆様は、ぜひご利用ください！
💡 Chrome で勉強用のユーザーを作成してもいいですが、Windows のユーザーアカウントごと分けておくことをおすすめします。
作品：Chrome 拡張機能「YouTube Study Focus」
作る過程をご紹介する前に、まずは出来上がったものを紹介します！
こちらからお試しください↓↓
作る過程
2年ほど前に作ろうと思って失敗しただけで、はじめての拡張機能開発だったので、「Chrome 拡張機能 作り方」でググってみました。
すると、Chrome拡張の作り方 (超概要)というめっちゃ分かりやすい記事に出会えました！本当にありがとうございました（泣
自分の場合は、ポップアップというよりもページを変えたかったので、少し変えて作りました。（一度作ってから知りました）
適当なフォルダを作って「manifest.json」と諸ファイルを作成
拡張機能用にフォルダを作成して、その中に src フォルダと以下のようなファイルを作成します。
ディレクトリ構成図
yt-study-focus/
└ src/
├ manifest.json
├ popup-dialog.html
├ whiteList.js
├ youtube.js
├ jquery-3.6.1.min.js
└ images/
└（後でアイコンを入れる）
manifest.json
「manifest.json」には、次のように記載します。
manifest.json
{
"name": "YouTube Study Focus",
"version": "0.0.1",
"manifest_version": 3,
"description": "勉強系以外の YouTube チャンネルの動画を再生する前に警告します",
"action": {
"default_popup": "popup-dialog.html"
},
"icons": {
"16": "icon/icon16.png",
"48": "icon/icon48.png",
"128": "icon/icon128.png"
},
"content_scripts": [
{
"js": [
"jquery-3.6.1.min.js",
"whiteList.js",
"youtube.js"
],
"matches": [
"https://youtube.com/*",
"https://www.youtube.com/*"
]
}
],
"author": "nao_hanpen"
}
jquery-3.6.1.min.js と whiteList.js
これは jQuery と勉強系チャンネルの配列を書いただけのファイルで、本質ではないので今回は省略します
youtube.js
ここで、①動画を再生されたら、②チャンネル ID を取得して、③ホワイトリストになければ警告を表示するということをします。
深夜テンションで書いたので汚いです、、書き方勉強します。
youtube.js
$(function() {
// 読み込んだら、loadCheck() を実行
loadCheck();
});
// YouTube は Single Page App 的なこと（ページ遷移しないでコンテンツを変更）をするので、タイトルの部分が変更されないかを監視します。
// 変更があったときも、loadCheck() を呼ぶので、このときに２重に監視しないように、監視済みかを設定しておきます。もっとスマートな方法もあると思います。
var is_observed = false;
/**
* チャンネル ID を取得して、ホワイトリストになければ警告を表示する
*/
function loadCheck() {
// 現在の URL を取得 (動画ページかどうかの判定に使用)
var now_url = location.href;
console.log( now_url );
// VideoID を取得
var videoId = getVideoId(now_url);
if ( videoId === "" ) {
// VideoID が取得できなければ 動画ページでないと判断して処理を停止
console.log("このページには動画が含まれません");
return;
}
console.log("VideoID: " + videoId);
// 処理中は再生を止める
var is_prevent_play = true; // 停止中かどうか（video が playing されたら停止スクリプトを実行するかどうか）
// ロード、再生、再生中に
$('video').on('load play playing', function(e) {
// 動画を停止
if( is_prevent_play ) $('video')[0].pause();
});
// 処理中にロード画面を追加
showLoad();
// チャンネル ID を取得
// 画面中の要素から取得しているので、YouTube は順にロードするようになっていて時間がかかる
// 1回目では取得できない。だいたい２～３回必要。
var channelURL = null; // チャンネル URL
var channelId = null; // チャンネル ID
var channelGetCount = 0; // 取得試行回数
getChannelId();
/**
* チャンネル ID を取得
*/
function getChannelId() {
channelGetCount++; // 試行回数を加算
if( $('#channel-name a.yt-simple-endpoint.style-scope.yt-formatted-string')[0] !== undefined ){
// 要素が存在したら
// チャンネル URL を取得
channelURL = $('#channel-name a.yt-simple-endpoint.style-scope.yt-formatted-string')[0].href;
console.log( "Channel URL:" + channelURL );
// チャンネル ID を抽出
channelId = channelURL.replace("https://www.youtube.com/channel/","");
channelId = channelId.replace("https://www.youtube.com/c/","");
console.log("ChannelId is #" + channelId);
// チャンネル ID を検証
checkChannelId();
// 要素の監視がまだされていなければ
if( is_observed === false ) {
// 監視する
const observer = new MutationObserver(function () {
var is_prevent_play = true;
loadCheck();
});
observer.observe($("ytd-watch-metadata #title")[0], { childList: true, subtree: true });
// フラグをオンに
is_observed = true;
}
}else{
// 要素が存在しなかったら
if( channelGetCount > 30 ) {
// 30 回以上試行してもできない場合は強制終了
console.log( "チャンネル ID を取得できませんでした。終了します" );
}else{
// 2秒後に再試行
console.log( "チャンネル ID を取得できませんでした。2秒後に再試行します..." );
setTimeout(getChannelId,2000);
}
}
}
/**
* チャンネル ID を検証 (ホワイトリストになければ警告を表示)
*/
function checkChannelId() {
console.log("チャンネル ID を検証します: " + channelId);
if( whiteChannel.indexOf(channelId) < 0 ) {
// ホワイトリストになければ、警告を表示
showBlock();
}else{
// ロード画面を閉じて動画を再生
hideLoad(); // ロード画面を閉じる
is_prevent_play = false; // 停止中フラグをオフに
$('video')[0].play(); // 動画を再生
}
}
/**
* ロード画面を表示
*/
function showLoad() {
$("body").append("<div id='loadingView'></div>");
$("#loadingView")[0].style.cssText = 'background: rgb(72 72 72 / 95%); content: ""; position: fixed; top: 0; left: 0; width: 100%; height: 100%; color: #fff; z-index: 2000; display: flex; justify-content: center; align-items: center; flex-direction: column;';
$("div#loadingView").append("<h1>Loading...</h1>");
}
/**
* ロード画面を非表示
*/
function hideLoad() {
if( $('#loadingView')[0] !== undefined ) {
$("#loadingView").remove();
}
}
/**
* 警告を表示
*/
function showBlock() {
hideLoad();
$("body").append("<div id='sendButton'></div>");
$("#sendButton")[0].style.cssText = 'background: rgb(204 0 0 / 95%); content: ""; position: fixed; top: 0; left: 0; width: 100%; height: 100%; color: #fff; z-index: 2000; display: flex; justify-content: center; align-items: center; flex-direction: column;';
$("div#sendButton").append("<h1>このコンテンツは時間を浪費する可能性があります</h1>");
$("div#sendButton").append("<p>時間を取り戻すことはできません</p>");
$("div#sendButton").append("<div id='agree-btn'>継続して時間を無駄にします</div>");
$("#agree-btn")[0].style.cssText = 'display: inline-block; margin-top: 20px; padding: 10px; background-color: #fff; color: rgb(88 88 88); border-radius: 6px; font-size: 14px; line-height: 1; font-weight: 600; cursor: pointer;';
$("#agree-btn").click(function() {
console.log('無視して動画を再生');
$("#sendButton").remove();
is_prevent_play = false;
$('video')[0].play();
});
}
}
/**
* URL から Video ID を抽出
* @param {str} url URL 文字列
* @return {str} ID または 存在しないときに空
*/
function getVideoId( url ) {
const { search } = new URL(url);
const params = new URLSearchParams(search);
if (params.has('v')) {
return params.get('v');
}
return '';
}
今後
この拡張機能は、今後、
・ユーザー専用ホワイトリスト
・ユーザー専用ブラックリスト
・保護者向け機能
・ホーム画面（おすすめ）から削除する機能
・コメント非表示機能
を実装する予定です。
「こんな機能あったらいいな」というものがありましたらお気軽にコメントください！
参考文献
- 「Chrome拡張の作り方 (超概要)」(2022/10/30 参照) https://qiita.com/RyBB/items/32b2a7b879f21b3edefc
- 「Chrome 拡張機能のマニフェストファイルの書き方」(2022/10/30 参照) https://qiita.com/mdstoy/items/9866544e37987337dc79
- 「Google Developers」(2022/10/30 参照) https://developer.chrome.com/docs/webstore/