実践
つくってみようChrome拡張機能
5

拡張機能の動作をカスタマイズできる機能を持つ、オプションページを作成します。これを利用して、ユーザーが「商品説明」のテンプレートの登録や編集ができるようにしましょう。

山田 敬美
山田 敬美 | フロントエンド・エンジニア

Chromeのストレージ機能であるchrome.storageを利用し、ユーザーが直前に選択したセレクトボックスの値を保存しておき、それを初期値として利用できるようにしていきます。

山田 敬美
山田 敬美 | フロントエンド・エンジニア

策定した仕様に沿って、処理を実装していきます。今回は、ウェブページ上のコンテンツを操作するコンテンツスクリプトという機能を使い、ウェブページを拡張機能から操作してみましょう。

山田 敬美
山田 敬美 | フロントエンド・エンジニア

Chrome拡張機能を作るため、まずはどのような仕様が必要か考えていきます。仕様が決まったら、設定ファイルとなるマニフェストを定義していきましょう。

山田 敬美
山田 敬美 | フロントエンド・エンジニア

ブラウザに機能を追加したり、特定のウェブサイトの見た目や機能を変更できる、ブラウザ拡張機能について解説していきます。まずはその概要を理解し、簡単なChrome拡張機能を作ってみましょう。

山田 敬美
山田 敬美 | フロントエンド・エンジニア