ツールTweetこんにちは、前回はchrome拡張機能のポップアップアプリケーションを作成する記事をご紹介しました。APIでTrelloにデータが保存される機能です。Keyなどのユーザ固有の情報がベタ書きされたままのため、他人に配布して、せっかく開発した拡張機能を共有することができない状態でした。ユーザ固有の情報は、設定画面などで入力を促すようにしたいところ。APIを用いれば、chromeにデータを保存することができます。KEYなどはオプション画面から値を入力し、chromeにデータを保存するようにしましょう。今回作るものディレクトリ構成manifest.jsonを変更するoptions.htmlを作成するjs/app.jsを変更する。動作確認まとめ今回作るもの今回は、前回作成した拡張機能に、オプション画面を追加します。www.true-fly.com以下のように画面上で値を入力し、chromeにデータを保存できるようにします。今回のディレクトリ構成は以下の通りです。前回との差分で、options.htmlというファイルを追加しています。popup.htmlmanifest.jsonを変更するmanifest.jsonを以下に書き換えます。}}追加したのは以下の2点です。APIの権限設定です。以下を追加することで、APIを有効化します。2点目はオプション画面の追加です。pageには画面のHTMLを設定します。}options.htmlを作成する以下を作成します。ベースはpopup.htmlで、API呼び出し処理はjs/app.js内のsaveOptions()で実装します。src="js/app.js"></script></body></html>js/app.jsを変更する。js/app.jsを以下に変更します。}});以下の3つの変数がオプション画面で設定する変数になります。trelloApiKeytrelloApiTokentrelloListIdcreatedで、Vueインスタンスが生成されたタイミングで、chrome.storage.sync.get()を実行し、chromeに保存されたデータを取得します。},オプション画面から値を入力し、chromeに保存するのは、saveOptions()内で実装しています。chrome.storage.sync.set()で値をchromeに保存しています。}動作確認manifest.jsonを変更したので、拡張機能を再読み込みしてデプロイしましょう。拡張機能のアイコンを右クリックして、「オプション」が活性化されているのが確認できます。「オプション」をクリックして、以下の画面が表示されたら無事完成です!まとめ以上、前回に引き続き、Chrome拡張機能の開発方法について簡単にご紹介しました。今回は超入門ということで、ちょっとしたポップアップアプリケーションを開発しましたが、Chrome拡張機能はページ情報の読み込みなど、今回ご紹介したこと以上にできることが多いので、今後も試していきたいと思います。Script】おはようございます。はてなブログPro都内でGCP、Python使ったデータエンジニアやってます。クラウドでの設計~開発・運用まで全部やります。20代文系エンジニアです。GCP、Python中心に、データエンジニアとして学んでいる技術をご紹介する記事を書いています。BigQueryとAirflowとバイクと鳥が好き。アイコンはたまたまお魚を加えていたときのカワセミさん。引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。