初めに
初めまして！ 株式会社iimonでエンジニアをしている黒田です。 今回は、chrome拡張アプリを作ろうと思います。 普段、拡張機能アプリを開発しているのですが、一から作ったことはなく、これを機会に挑戦してみようと思いました！使わない日はないくらい、毎日つかっているYoutbeでクリックしたら再生速度が変わる＆ループ再生がオンになるアプリを作りたいと思います。
Chrome拡張機能とは
拡張機能は、Chromeを使う上で便利になる追加アプリのことです。 例えば、文章を翻訳したり、音声を文字起こししてくれる機能などがあります。自分が欲しい機能がなければ自作するというのも良いと思います。chromeブラウザとエディタがあれば作れるのでぜひ一緒に書き進めていただけると嬉しいです。
作ってみる
ディレクトリ作成
mkdir sample-extensions
ファイル作成
touch manifest.json script.js
拡張機能を作成する上で、manifest.jsonとJavaScriptファイルが最低限必要になります。
manifest.jsonには作成するchrome拡張の設定全般について書いていきます。
manifest.jsonに設定を書き込む
{
"name": "youtube拡張機能",
"description": "youtubeの再生速度の変更、ループ再生ができる",
"version": "1.0.0",
"manifest_version": 3,
"content_scripts": [{
"matches": ["https://*.youtube.com/*"],
"js": ["script.js"]
}],
"web_accessible_resources": [{
"resources": [
"img/*"
],
"matches": ["https://*.youtube.com/*"]
}]
}
マニフェストファイルを書く際、
manifest_version
現時点での最新バージョンを指定
name
拡張機能の名前を指定
version
拡張機能のバージョンを指定。1 ~ 4 つの数値を「.」で区切って並べて作ることができる。それぞれ0 から 65535の数値を設定できる。
上の3つは必須項目となります。
content_scripts
特定のwebページのDOMの操作などが行うことができる。今回はyoutubeで機能を実行したいため、matchesにyoutubeのサイトURLを設定。
web_accessible_resources
拡張機能内のリソースを外部からアクセスできるようにする。今回はimgは以下の画像を全て読み込みたいのでimg/*と指定。画像が表示できていない場合、この設定をしていない可能性がある。
description
推奨項目で、拡張機能の説明を書く。
action
拡張機能のアイコンを選択した際の操作を設定できる。
icons
アプリのアイコンを設定できる。解像度に応じて適切なサイズの画像を用意してくれる。画像の形式は png 推奨。
default_locale
デフォルトの言語を設定
その他の項目は、任意のため、作るものによって設定を変えていきます。
項目の概要をまとめてくださっている記事があったので下記リンクもぜひ読んでみてください。
Chrome拡張機能開発の始め方 2022 manifest v3
再生速度を遅くする
ディレクトリ上にimgフォルダの作成し、画像ファイルを保存してください。
script.js
const speedDownButton = document.createElement("button"); //ボタンタグ作成
speedDownButton.classList.add("ytp-button");
const speedDownImg = document.createElement("img"); //imgタグ作成
speedDownImg.src = chrome.runtime.getURL("img/speedDown.svg");
speedDownButton.appendChild(speedDownImg); //ボタンタグの子要素にimgタグ追加
const div = this.document.querySelector(".ytp-right-controls");
div.appendChild(speedDownButton); //全画面の一覧にボタンタグ追加
const video = document.querySelector("video"); //video要素取得
speedDownButton.onclick = function () {
video.playbackRate -= 0.25; //再生速度の変更
};
拡張機能内のリソースにアクセスする場合、chrome.runtime.getURL()を使用する必要があります。これを利用するとChrome 拡張内の画像に対するパスを返してくれます。
Chromeへ適用
今書いた内容をchromeへ適用させていきます。
まずは、chrome://extensions/にアクセスします。
左上にある、「パッケージ化されていない拡張機能を読み込む」から、先程作成したファイルを選択します。下記のように表示されていれば、適用完了です。
実際に、youtubeを開いて動画をクリックしてみてください。
写真ように、右側に矢印のマークが追加されていればOKです。動画を再生して矢印マークを押すと0.25ずつ再生速度が遅くなっていると思います。
再生速度を速くする
script.js
//コードの続きに追加
const speedUpButton = document.createElement("button");
speedUpButton.classList.add("ytp-button");
const speedUpImg = document.createElement("img");
speedUpImg.src = chrome.runtime.getURL("img/speedUp.svg");
speedUpButton.appendChild(speedUpImg);
div.appendChild(speedUpButton);
speedUpButton.onclick = function () {
video.playbackRate += 0.25;
};
先ほど書いたコードの続きに、今度は0.25ずつ早くなるコードも追加してみてください。
適用後の画像は上のようになっています。
ループ再生ボタンを作成する
script.js
//コードの続きに追加
const toggle = document.createElement("div");
toggle.setAttribute("class", "ytp-autonav-toggle-button");
toggle.setAttribute("aria-checked", "false");
const container = document.createElement("div");
container.setAttribute("class", "ytp-autonav-toggle-button-container");
container.appendChild(toggle);
const button = document.createElement("button");
button.setAttribute("class", "ytp-button");
button.appendChild(container);
div.appendChild(button);
button.onclick = function () {
checked = toggle.getAttribute("aria-checked");
if (checked == "false") {
toggle.setAttribute("aria-checked", "true");
video.loop = true;
} else {
toggle.setAttribute("aria-checked", "false");
video.loop = false;
}
};
再度、chrome://extensions/に戻って変更分を読み込み、youtubeをリロードしてください。
ボタンが右に移動した状態で動画が終了すると、もう一度同じ動画が初めから再生されます。
まとめ
今回は、Youtubeの再生速度を変える&ループ再生をワンクリックでできる拡張アプリを作ってみました。簡単なものでしたが、１からつくるという経験ができてよかったです。
