はじめてのアドベントカレンダー Advent Calendar 2025

Kiiteを使いやすくするChrome拡張を作ろう

Last updated at 2025-12-01Posted at 2025-12-01

こんにちは、苔コッコーです。
言うまでもなく、我々エンジニアとボカロ文化の親和性は極めて高く、その結果として多くのエンジニアが作業用BGMにKiiteを選んでいることと思います。（※ソース：俺）
しかし、集中が乗ってきた時に限って、曲送りや一時停止のためにマウスへ手を伸ばすのは大きなタイムロスですよね？
そんな悩みを解決すべく、グローバルショートカットでKiiteを操作できるChrome拡張機能を作りました。
この記事では、その拡張機能を解説していこうと思います。
リポジトリはこちらです。

ここまで読んでわかるように、この記事には結構な偏見が詰め込まれています。ご了承ください。

Kiiteとは？

みんな大好きクリプトン・フューチャー・メディアとみんな大好き産総研が共同開発した音楽発掘サービスです。みんな大好きニコニコ動画に投稿されている音声合成楽曲を効率よく探索し、好きな曲を見つけることができます。
~~そして、個人的に思う一番大きな特徴が、Qiitaと名前が似ていることです。キータとキーテです。ほとんど同じですね。~~
知らなかった人はぜひ使ってみてください。

本文

それでは、解説に入っていきましょう。

拡張機能の導入

機能

機能は非常にシンプルです。

再生 / 一時停止
次の曲へ
前の曲へ
この3つの機能にショートカットキーを割り当てることができます。

導入方法

インストールは3ステップで完了します。

ファイルのダウンロード
Chromeへのインストール

次に、ダウンロードしたファイルをChromeにインストールします
Chromeのアドレスバーに chrome://extensions と入力し、拡張機能管理ページを開きます。
ページの右上にある「デベロッパーモード」のスイッチをオンにします。
左上に「パッケージ化されていない拡張機能を読み込む」というボタンが表示されるので、クリックします。
先ほど解凍したフォルダ（manifest.json が入っているフォルダ）を選択します。

ショートカットキーの設定

Chromeのアドレスバーに chrome://extensions/shortcuts と入力してショートカット設定ページを開きます。
「Kiite Global Controller」の項目を探し、各操作の横にある入力欄をクリックして、お好みのキーの組み合わせを設定します。
入力欄の左にある、「Chrome専用」というプルダウンから「グローバル」を選択します。
これで設定は完了です！ Kiiteのタブを開いた状態で、他の作業をしながらショートカットキーを試してみてください。

【少し技術的な話】どうやって実現しているか

この拡張機能は、主にChrome拡張機能が提供する2つのAPIで実現しています。

chrome.commands API
manifest.json でコマンドを定義し、"global": true を設定することで、Chromeがアクティブでない時でもショートカットキーを検知できるようにしています。
manifest.json
```
"commands": {
  "toggle-play": {
    "description": "再生/一時停止",
    "suggested_key": { "default": "Ctrl+Shift+Space" },
    "global": true
  },
  // ...
}
```

chrome.scripting.executeScript API
バックグラウンドで動作する background.js がショートカットキーの入力を検知したら、chrome.tabs.query でKiiteのタブを探し出し、executeScript を使ってそのタブに対してクリックイベントを実行するスクリプトを送り込みます。

background.js

// ショートカットキーが押されたら...
chrome.commands.onCommand.addListener((command) => {
  // Kiiteのタブを探して...
  const tabs = await chrome.tabs.query({ url: "https://kiite.jp/*" });
  if (tabs.length > 0) {
    // スクリプト（クリック命令）を実行させる
    chrome.scripting.executeScript({
      target: { tabId: tabs[0].id },
      function: () => {
        document.querySelector(".pl-btn-play")?.click();
      }
    });
  }
});

非常にシンプルな仕組みですが、これだけで日常の音楽体験が格段に向上しました。

展望

Kiiteでは歌詞を閲覧できないので、対応する歌詞を初音ミク@wikiとかから持ってこれるようにしたいなーとか思ってます。

おわりに

今回、自分の「ちょっと不便だな」という気持ちをきっかけに、初めてChrome拡張機能を作ってみました。もし同じような不便さを感じていた方がいれば、ぜひ使ってみてください！

バグ報告や改善の提案などがあれば、お気軽にGitHubのIssuesまでお願いします。

最後に、素晴らしい音楽との出会いの場を提供してくださるKiiteに、心からの感謝を。

余談

せっかく拡張機能を作ったのに、その日のうちにKiiteからKiite Cafeの方を使うようにしたのでもう必要なくなっちゃいました。

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up