popup画面の実装

ここで、前回までの説明にあった「popup画面を実装したブラウザ拡張」を実際に作成して登録し、その動きを確認していきたいと思います。

必要なコードは、「ブラウザ拡張機能/popup.htmlとpopup.jsとは②」の「実際によくある使い方」に記載したものを使用します。

記事に従い、実際にフォルダとファイルを作成していただくことが可能です。

尚、下記のボタン押下で、あらかじめ作成したブラウザ拡張機能の zip ファイルの取得が可能です。

(SHA-256 : b1b6674c58ff78b2b57765fd65651678c9a1a5b20ebdabb096e26666b6142d3e)

注：この ZIP ファイルは記事内で紹介しているサンプル拡張機能です。ソースコードはすべて本サイトで公開しており、ZIP はその内容をそのまままとめたものです。manifest.json の権限も最小限にしており、外部通信や個人情報の取得は行いません。

ダウンロード完了後、ターミナルを起動し、下記のコマンドにて同一のハッシュコードが表示されることを確認してください。

例：ユーザー名がtestの場合

certutil -hashfile "C:\Users\test\Downloads\url-display-extension.zip" SHA256

問題なければ、ユーザーフォルダー(例：c:\Users\test)やデスクトップなどに解凍して利用してください。

ブラウザ拡張機能の登録

今回作成した、ブラウザ拡張機能は、”url-display-extension”というフォルダーに作成しています。 ブラウザ拡張機能の名前は、”URL Display Extension”です。 それでは、popup 確認の為のブラウザ拡張機能を Edge に登録していきたいと思います。

1. Edgeの起動

タスクバーの Edge のアイコンをクリックして、Edge を起動する。

01-Edge起動

2. 拡張機能の設定画面を開く

起動された Edge の URL ボックスに、”edge://extensions/” を入力し、拡張機能の設定画面を開きます。

02-拡張機能設定画面表示

3. 拡張機能の設定画面の左ペイン展開

拡張機能の設定画面の「拡張機能」タイトルの「≡」アイコンをクリックして、左ペインを展開します。

※　既に左ペインが展開された状態の場合、この操作は必要ありません。

03-拡張機能設定メニュー表示

4. 開発者モードへの切り替え

開かれた拡張機能の設定画面の左ペインの下側にある「開発者モード」をONにします。

※　既にONの場合は、この操作は必要ありません。

04-開発者モードON後

5. ブラウザ拡張機能の読み込み依頼

拡張機能の設定画面の右ペインの先頭に、「開発者向けオプション」の行が表示されることを確認し、「展開して読み込み」をクリックします。

※　左ペインにより、画面が隠れている場合は、右ペイン側を一度クリックして、左ペインを閉じてください。

05-展開して読み込み

6. ブラウザ拡張機能フォルダの選択

ファイルダイアログが表示されることを確認し、ブラウザ拡張機能フォルダ”url-display-extension” フォルダを選択し、「フォルダの選択」をクリックします。

06-拡張機能フォルダ選択

7. 追加確認

拡張機能の設定画面の右ペインの一覧を下方にスクロールし、「URL Display Extension」が追加されていることを確認します。

※　既に「URL Display Extension」が表示されている場合、スクロールは不要です。

07-拡張機能追加完了

👉 以上で、ブラウザ拡張機能の登録は完了です。

ブラウザ拡張機能のアイコン表示

Edgeでは、デフォルトの状態では、拡張機能のアイコンが表示されません。 そこで、表示するように設定を変更します。

1. 拡張機能一覧の表示

ブラウザの URL ボックスの右側の「拡張機能」のアイコンをクリックします。

08-拡張機能一覧表示

2. 拡張機能のピン留め

表示されたウインドウを下方にスクロールし、追加した「URL Display Extension」を表示します。 ”URL Display Extension”の右側の「ツーバーにピン留めする」のアイコンをクリックします。

※　既に「URL Display Extension」が表示されている場合、スクロールは不要です。

09-拡張機能アイコン表示

3. 拡張機能アイコンの表示確認

ブラウザの URL ボックスと「拡張機能」のアイコンの間に、「URL Display Extension」のアイコンが表示されることを確認します。

10-拡張機能アイコン表示完了

動作確認

1. 新しいタブの作成

Edge のタブ領域の「＋」アイコンをクリックし、新しいタブを作成します。

11-新しいタブの作成

2. 任意のサイトの表示

新しいタブの URL ボックスに任意のサイトのアドレス（例：https://blog.konkitsune.com/）を入力し、ENTER キーを押下します。

12-任意のサイト表示

3. 追加したブラウザ拡張機能の popup 画面の表示

「URL Display Extension」のアイコンをクリックします。

13-拡張機能アイコンクリック

4. URL 取得処理の実行

アイコンの下に、ポップアップ画面が表示されることを確認し、「URL取得」ボタンをクリックします。

14-URL取得ボタンクリック

5. URL 表示確認

ポップアップ画面の「URL取得」ボタンの下に、取得されたURLが表示されることを確認する。

15-取得URL表示

👉 以上で実際の動作の確認が行えました。

ブラウザ拡張機能の削除

1. 拡張機能の設定画面を開く

Edge の URL ボックスに、”edge://extensions/” を入力し、拡張機能の設定画面を開きます。

※　既に拡張機能の設定画面のタブが開かれている場合は、そのタブをアクティブにします。

16-拡張機能画面表示

2. 追加した拡張機能の削除

拡張機能の設定画面の右ペインの一覧を下方にスクロールし、「URL Display Extension」を表示します。 表示した「URL Display Extension」の下部の「削除」をクリックします。

※　既に「URL Display Extension」が表示されている場合、スクロールは不要です。

17-拡張機能削除

3. 削除確認への応答

表示された削除確認のポップアップ画面の「削除」をクリックします。

18-拡張機能削除確認

4. 追加した拡張機能の削除確認

画面を再表示し、「URL Display Extension」が削除されていることを確認します。

19-拡張機能削除完了確認

👉 以上で、ブラウザ拡張機能の削除は完了です。

※　因みに削除後の再追加も可能です。

まとめ

  • Popup画面 は、通常の HTML, CSS, JavaScript で作成可能
  • アイコンのクリックで簡単に呼び出すことが可能
  • ユーザーとのインターフェースとして便利
  • activeTab権限により、アクティブなタブ情報へのアクセスが可能