12周年記念パーティ開催! 2024/5/10(金) 19:00

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

全7回

HTML、CSS、JavaScriptなどのウェブ技術でできている拡張機能を作って理解するシリーズです。Chrome向けの拡張機能を中心に解説します。

最終回 ポップアップページの作成と拡張機能の公開

Chrome拡張機能のポップアップページというUI機能を使い、拡張機能アイコンをクリックしたときにウィンドウが表示されるようにします。また、作成した拡張機能をChromeウェブストアに公開してみましょう。

第6回 バックグラウンドページとメッセージパッシング

オプションページに簡単にアクセスできるように、テンプレート編集ボタンから開けるようにします。これには、バックグラウンドページ機能と、バックグラウンドページとコンテンツスクリプトの間で通信を行うメッセージパッシング機能を使います。

第5回 オプションページの作成

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

第4回 ストレージ機能によるデータの保存と取得

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

第3回 コンテンツスクリプトによるDOM操作

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

第2回 マニフェストの設定

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

第1回 Chrome拡張機能の概要

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