こんにちは、AIと個人開発をテーマに活動しているK（@kdevelopk）です。

はじめに

デスクで作業をしているとき、照明やエアコンを操作するためだけにスマホを取り出してSwitchBotアプリを開くのが面倒だと感じたことはありませんか？

私はあります。ブラウザを開いているなら、そのままブラウザから操作したい。そう思い、SwitchBotをChromeブラウザから直接操作できる拡張機能を開発し始めました。

まだ開発途中のBeta版ですが、基本的な動作は確認できたので、リポジトリの公開とあわせて技術的な知見を共有します。

作ったもの

SwitchBotChromeExtension 現在Beta版としてGitHubで公開しています。

主な機能（現時点）

SwitchBotアカウントに紐づくデバイス一覧の取得
各デバイスの電源ON/OFF操作（Bot, Plug, Lightなど）
API Key / Secret Key の設定保存

(ここに拡張機能のポップアップ画面のスクリーンショットを貼ると効果的です) シンプルにデバイス名とON/OFFボタンが並んでいるUIのキャプチャなど

背景と動機

SwitchBotの公式アプリは高機能ですが、PC作業中に「今すぐ電気を消したい」というワンアクションのためにはステップ数が多いのが課題でした。 PC常駐のツールとして、Chrome拡張機能（Manifest V3）で実装するのが手軽だと考えました。

技術的なポイント

今回の開発でポイントとなったのは以下の点です。

1. SwitchBot API v1.1 の認証

SwitchBot API v1.1では、リクエストヘッダーに署名（Signature）を含める必要があります。これは API Key、Secret Key、現在時刻(t)、Nonce を組み合わせて HMAC-SHA256 でハッシュ化し、Base64エンコードする手順です。

JavaScript（CryptoJSなどを使用せず、標準のWeb Crypto APIを使う場合）での実装例は以下のようになります。

// 署名生成のイメージ（実際のコードとは異なる場合があります）
async function generateSign(token, secret, t, nonce) {
    const data = token + t + nonce;
    const encoder = new TextEncoder();
    const keyData = encoder.encode(secret);
    const messageData = encoder.encode(data);

    const cryptoKey = await crypto.subtle.importKey(
        "raw", keyData, { name: "HMAC", hash: "SHA-256" }, false, ["sign"]
    );
    
    const signature = await crypto.subtle.sign("HMAC", cryptoKey, messageData);
    return btoa(String.fromCharCode(...new Uint8Array(signature)));
}

2. CORSの制約

Chrome拡張機能から直接 SwitchBot API (https://api.switch-bot.com) を叩く際、CORSの制約に引っかかる場合があります。今回は Manifest V3 の host_permissions を適切に設定することで回避しています。

コードスニペット

{
  "name": "SwitchBot Controller",
  "version": "0.1.0",
  "manifest_version": 3,
  "permissions": [
    "storage"
  ],
  "host_permissions": [
    "https://api.switch-bot.com/*"
  ],
  ...
}

使い方 (Beta版)

現時点ではストア公開していないため、以下の手順で導入します。

GitHubリポジトリからコードをCloneまたはZIPダウンロード
Chromeの「拡張機能の管理」(chrome://extensions/) を開く
右上の「デベロッパーモード」をONにする
「パッケージ化されていない拡張機能を読み込む」を選択し、ダウンロードしたフォルダを選択
拡張機能アイコンをクリックし、SwitchBotアプリから取得した Token と Secret を設定画面に入力

今後の展望 (TODO)

現在はまだ作りかけ（Beta）のため、以下の機能実装や改善を予定しています。

対応デバイスの拡充（現在は基本的なON/OFFのみ）
デバイスのステータス取得（現在のON/OFF状態の反映）
UI/UXの改善
Chromeウェブストアへの公開

おわりに

あくまで自分用に作り始めたものですが、もし同じような「PCからSwitchBot操作したい」という方がいれば、ぜひ試してみてください。不具合報告やプルリクエストもお待ちしています。

Repository: https://github.com/UDteach/SwitchBotChromeExtension