kintoneプラグイン入門（３）とほほさんのサンプルを試してみる

先週は、公式のChrome拡張チュートリアル「Hello World 拡張機能」を試しました。検索して見つけたChrome拡張機能開発入門記事の中では、とほほさんの「とほほのChrome拡張機能開発入門」がシンプルで理解の助けになりそうでした。今週は、とほほさんの「とほほのChrome拡張機能開発入門」を試しながら、マニフェストの仕様を学習したいと思います。

とほほのChrome拡張機能開発入門に入門

今週もkintone拡張にたどり着けていませんが、基本をコツコツ学習したいと思います。とほほさんのとほほのChrome拡張機能開発入門の何が良いって、段階的に、マニフェストに定義を追加しながら、どこを変更すると何ができるようになるか？を確認できるところが素晴らしいです。

ショートカットの追加

基本の拡張機能は、前回作ったのと同じなので割愛します。次に、マニフェストにショートカットを追加してみました。

    "commands": {
        "_execute_action": {
        "suggested_key": {
            "default": "Ctrl+Shift+H",
            "mac": "MacCtrl+Shift+H"
        }   ,
        "description": "Run extension."
      }
    }

deafultのショートカットキーは、Ctrl+Shift+Hを定義しています。macの場合は、Ctrlキーの代わりにMacCtrlキー（コマンドキー）を使うように記述します。更新後に、ショートカットキーを入力すると、拡張機能のページが表示されました。おおお！

ちゃんと拡張機能が表示される～！感動～！

オプション設定の追加

続いて、オプション設定画面のoption.htmlとoption.jsを追加しました。オプション設定画面でクリックしたボタンの色情報を、storageに保存します。オプションページについては、「ユーザーに選択肢を提供する」に詳細が解説されています。

Greenをクリックしたので、"Set color to Green”と表示されている

拡張機能のRunボタンクリック時の処理を追加

非同期関数 tabs.query() で現在のタブ情報を取得し、得られたタブに対して onRun() 関数を実行する（対象タブの背景色が、オプションで選択された色に変わる）ようにpopup.htmlを修正、popup.jsを追加しました。
Runボタンクリック時の関数は、とほほさんの入門記事をもとに、出力ログを追加しました。

function onRun() {
    let currentColor = document.body.style.backgroundColor;
    console.log(`Run button clocked! current color = ${currentColor}`)
    chrome.storage.sync.get(null, (options) => {
        document.body.style.backgroundColor = options.colorValue;
        console.log(`backgroundColor = ${options.colorValue}`);
    });
}

実行してみると、選択中のタブの背景色がオプション設定でクリックした色に変わりました。成功です。

背景にオプション設定で指定した色が適用された

まとめ

今回は、とほほさんの「とほほのChrome拡張機能開発入門」を、ほぼそのまま試してみました。次回は、この拡張機能をもとに、kintone拡張のサンプルのマニフェストやソースコードをどう修正して追加すればよいかを確認します。今週もあまり進捗がありませんが、ここまでにします。
そうだ、最近「フロントエンドの知識地図」を読み始めたので、そちらも試したことを記録していきたいと思います。

更新履歴：
言い回しが不自然な箇所を修正（2023-02-04）