SwitchBot用のChrome拡張機能を作りました
先日、思い立ってChrome拡張機能を作ったので記事にします。
どんな拡張機能か
最近流行りのSwitchBotを使ったコントローラーです。
筆者が使用しているのはハブミニというものですが、赤外線リモコン付きの機器であれば大体接続できます。
いつも帰る前にSwitchBot経由でエアコンをオンにしておくのですが、ある日スマホ（Macは絶対忘れない）を忘れてしまい操作できず。。。ご想像通り、クソ暑い部屋に入らないといけない状態です、終わりです。。。笑
そんなに発生する事案ではないんですが、なんか対策というか良い方法ないかなと思ったのがきっかけです。
後は、Chrome拡張機能を何か作ってみたかったというところです。
- アプリ 「my-switchbot-controller」
https://chrome.google.com/webstore/detail/my-switchbot-controler/ajhnghbfoleadocfplnfkfnkcbcamehl
初めて拡張機能作って見たのですが、アメリカと日本で何人か利用してもらえてるようです。
レビューもいただけて満足です。
使用技術
- Vite + React + Typescript
- Chakra UI
- SwitchBot Api
１から作ってもいいかなと思っていましたが、いろいろ検索して見た結果、すごく洗練されたボイラープレートがあったので利用させてもらいました。
Viteのplugin機能でmanifest作ってくれるかつ、書くときtypescriptで型保管（manifest-type.ts）が効くので良いです。
後は、やはりViteでの開発体験が良いですね、ビルドが早いと感じました。
SwitchBotAPIについてはこちら
スマホアプリからトークンを取得して、通信の際にAuthorizationに乗せるだけです。
const result = await fetch(`https://api.switch-bot.com/v1.0/devices/${param.deviceId}/commands`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
Authorization: param.token,
},
body: JSON.stringify({
command: param.command,
parameter: 'default',
commandType: 'command',
}),
});
なお、通信はポップアップ画面からはcorsで引っかかるのでバックグランドから行う必要があります。
なので下記のようにしています。
// デバイス一覧を取得するためにpopup.tsxからbackground.tsへメッセージ送信
// ./src/components/parts/SwitchBotList.tsx
const getCurrentDevices = async () => {
const token = await getStorageData<string>(MY_SWITC_BOT_TOKEN);
chrome.runtime.sendMessage({ type: GET_DEVICES, token }, (response: GetDeviceResult | undefined) => {
console.log({ response });
if (response?.message === 'success') {
setStorageData(MY_SWITC_BOT_DEVICES, response.body);
setDevices(response.body);
} else {
setStorageData(MY_SWITC_BOT_DEVICES, []);
setDevices(undefined);
}
});
};
// 取得したデバイスを返却（第三引数callback)
// ./src/pages/background/index.ts
chrome.runtime.onMessage.addListener((message, sender, callback) => {
try {
console.log({ message });
if (message.type === 'GET_DEVICES') {
// デバイス取得して返却
getDeviceList(message).then(callback);
return true;
}
} catch (e) {
console.error(e);
if (e instanceof Error) {
throw new Error(e.message);
}
throw new Error("Can't SwitchBot Deviece");
}
});
筆者の利用方法としては、電源ON・OFFくらいなので、この２点の機能に絞っています。
他にもAPI経由でいろいろ操作ができますので、機能追加も今後していこうかなと思っています。
アプリ立ち上げて操作するよりも楽に操作できるようになったかなと！！
参考にした記事
Discussion