今回は、Google Chrome Extensionの画面表示について実装してみたので、内容を掲載したと思います。
ブロックチェーンのウォレットの動作に興味があり、以前からMetaMaskや各種ウォレットなどを使用していました。
多くのWebページでは、メイン画面のボタンをクリックするとGoogle Chrome Extensionウォレットの画面がポップアップ表示されるという挙動をしていました。
今回は、そのような挙動をするポップアップ画面の実装方法について紹介したいと思います。
やること
- メイン画面を実装します。このメイン画面にGoogle Chrome Extensionの画面表示するボタンを設置します。
- Google Chrome Extension画面の実装をします。
- Google Chrome Extension画面ポップアップは、ブラウザの右上に表示します。
- HTMLおよびJavaScriptでの実装をします。UI関連のフレームワークは使用しません。
ソースコード
今回、実装しましたソースコードをこちらに公開していますので、なにかの参考にしていただければ幸いです。
必要なツールとライブラリ
- Google Chrome
- Microsoft Visual Studio Code
- Live Server。Visual Studio コード拡張機能用のライブ サーバー
実行方法
> cd <Your dir>
> git clone https://github.com/qiita-mobileapps/ChromeExtensionSimplePopup.git
> cd ChromeExtensionSimplePopup
- Visual Studio Code を起動し、Live Server を実行して、ブラウザーでindex.htmlを開きます。
- Google Chrome を起動し、「extension」ディレクトリを Chrome 拡張機能として追加します。
- Index.html内の「拡張機能ポップアップを開く」ボタンをクリックすると、ポップアップ画面が表示されます。
Live Serverのインストールについて
-
メニューから「拡張機能」をクリックします。
-
「LiveServer」を検索してインストールします。
-
画面下部の「Go Live」をクリックするとWebサーバーが起動します。
Chrome拡張機能への簡易ポップアップアプリのインストールについて
-
Google Chromeを起動します。
-
Chrome のアドレス バーに「chrome://extensions/」と入力し、Enter キーを押します。これにより、3. Chrome 拡張機能ページが開きます。
-
通常は右上隅にある「開発者モード」トグル スイッチがオンになっていることを確認します。これにより、解凍された拡張機能をロードできるようになります。
-
「Load unpacked」ボタンをクリックします。
-
表示されるファイルダイアログで、Chrome 拡張機能ファイルを含む「extension」ディレクトリに移動して選択します。ここで、「extension」ディレクトリ（https://github.com/qiita-mobileapps/ChromeExtensionSimplePopup/tree/main/extension）を選択します。
-
「開く」または「フォルダーを選択」ボタンをクリックして拡張機能を Chrome に追加します。
動作結果（ポップアップ画像）
アニメーションで確認する場合はこちらを参照ください。
次回は
今回は、Google Chrome Extensionのポップアップ画面の実装と表示機能を実装してみました。
今後は、Google Chrome Extensionを使用した認証機能を実装していきたいと思います。Hyperledger Fabricのゲートウェイとして使用できるようなウォレットを作成したいと思います。