はじめに
楽天が運営しているNBA Rakuten。
日本のNBAファンは基本的にここ以外でNBAを見る方法はないのだが
このサイト、使いづらすぎる
いろいろと気に入らない部分はあるが、なによりショートカットキーが全く設定されていないのだ。
YouTubeを代表とする他の動画サイトでは
スペースキー で 再生/停止
←/→ で ◯秒戻す/◯秒進む
等のショートカットキーが設定されているものだが、それが全くない。
ということで誰か作ってないかなーとググってみると、あった。
使ってみた。
キーの設定が思ってたのと違う・・・
他のショートカットキーも欲しい・・・
ということで勉強がてらにChrome拡張機能を作ることにした。
機能
実装するショートカットキーは下記。
| キー | 機能 |
|---|---|
| 矢印キー左 | 10秒戻し |
| 矢印キー右 | 10秒スキップ |
| , (コンマ) | 30秒戻し |
| . (ドット) | 30秒スキップ |
| スペースキー | 停止/再生 |
| F | 全画面表示 |
| M | ミュート切替 |
| 1~4 | 各クォーターに移動 |
ディレクトリ構成
ChromeExtensionTest
├─ manifest.json
└─ main.js
manifest.json
1つ目のファイルは拡張機能の設定をするmanifest.json
このファイルはファイル名固定。
{
"name": "Add shortcut key to NBA Rakuten",
"version": "0.0.1",
"manifest_version": 3,
"description": "Chrome拡張機能を自作してみるテスト。",
"content_scripts": [
{
"matches": ["https://nba.rakuten.co.jp/games/*"],
"js": ["main.js"]
}
]
}
matchesに対象とするサイトを記載する。
すべてのページに適用させたい場合は、下記でいけるらしい。
"matches": [<all_urls>]
jsには追加する機能のjavascriptファイルを記載する。
今回はmain.jsとした。
main.js
ここで追加する機能を作っていく。
window.onload = function() {
window.onkeydown = function(e) {
if (e.isComposing || e.keyCode === 229) {
return;
}
// spaceで再生/停止
if (e.keyCode==32){
const buttons = document.querySelectorAll(".playButton");
// NodeListを配列に変換
const buttonsArray = [].map.call(buttons, (ele) => ele);
// 表示されている要素のみ抽出
const button = buttonsArray.filter(
(ele) => ele.style.display !== "none"
);
button[0].querySelectorAll(".playButton-background")[0].click();
return false;
}
// →で10秒スキップ
if (e.keyCode==39){
document.querySelectorAll(".icons-ff-10s")[0].click();
}
// ←で10秒戻す
if (e.keyCode==37){
document.querySelectorAll(".icons-rew-10s")[0].click();
}
// >(,)で30秒スキップ
if (e.keyCode==188){
document.querySelectorAll(".icons-rew-30s")[0].click();
}
// <(.)で30秒戻す
if (e.keyCode==190){
document.querySelectorAll(".icons-ff-30s")[0].click();
}
// fで全画面表示
if (e.keyCode==70){
document.querySelectorAll(".icons-screen-full")[0].click();
}
// mでミュート切り替え
if (e.keyCode==77){
document.querySelectorAll(".volume-icon")[0].click();
}
// 1で1Q
if (e.keyCode==49|e.keyCode==97){
document.querySelectorAll(".quarterSkip-list-item")[0].click();
}
// 2で2Q
if (e.keyCode==50|e.keyCode==98){
document.querySelectorAll(".quarterSkip-list-item")[1].click();
}
// 3で3Q
if (e.keyCode==51|e.keyCode==99){
document.querySelectorAll(".quarterSkip-list-item")[2].click();
}
// 4で4Q
if (e.keyCode==52|e.keyCode==100){
document.querySelectorAll(".quarterSkip-list-item")[3].click();
}
};
};
基本的には最初に紹介したRakuten NBA Keyboard Shortcutsのコードを参考にした。
コードの構成としては、
1.指定したキーが押されたときに
2.指定したクラスを持つ要素にclick()
という処理をそれぞれ設定している形になる。
キーの指定はキーボードの各キーに割り当てられているキーコード(数字)で行う。
キーコードはキーコード一覧で調べることができる。
拡張機能の追加方法
Chromeの拡張機能管理画面を開くと、左上に「パッケージ化されていない拡張機能を読み込む」というボタンがあり、それを押すとディレクトリ選択を要求される。
そして、作成したディレクトリを選択すれば拡張機能一覧に追加される。