Microsoft Edge 拡張の作り方:pageAction 編


前回の記事に引き続き、Microsoft Edge の以下のアクションの拡張を作成する方法について紹介します。

今回はページアクションの拡張について紹介します。

(※Edge 拡張の概要と、コンテキストメニューの実装サンプルについてはこちらの記事をご覧ください。)

ページアクション

ページアクションの拡張は Web ブラウザーのアドレスバーに表示されるアイコンから機能を呼び出します。

アドレスバーの横にアイコンが表示されるという動作上、特定の URL のコンテンツに対しなにがしかの作業を行う用途に使用するのが良いでしょう。(もしくは、短縮 URL を生成するとか、でしょうか)

image

 

以降、ソースを使用して説明を行いますが、お手元で実際に動作させるには e-19.png という名前の 19 x 19 ピクセルのアイコン用の画像ファイルが必要です。

作成するのが面倒な方は以下の画像を保存して使用してください。

image

 

ページアクションの manifest.json

ブラウザーアクションの manifest.json は以下のようになります。

manifest.json のキー “page_action” の内容に注目してください。

default_icon” キーで、ツールバーに表示されるサイズのアイコンを、”default_title” でアイコン上に表示されるタイトルを指定しています。

このへんの指定は前回紹介したブラウザーアクションと一緒です。必要があればブラウザーアクションと同様に “default_popup” キーにポップアップとして使用する html ファイルを指定することもできます。

background” キーの “scripts”  では、ブラウザーの背後で動作する JS ファイルを指定しています。 サンプルでは background.js という名前をファイルを指定していますが、名前は任意のものでもかまいません。

同 “background” キー内の “persistent” は Background スクリプトやページを永続化させるかどうかを指定します。 なお “persistent” は Edge では必須となっており、 これを指定しないと動作しませんので注意が必要です。

permissions” キーでは権限を指定します。今回のサンプルではブラウザーのタブにアクセスし、タブ内のコンテンツにアクセスするので “tabs” と URL (“*://*/*”) を指定しています。

 

ページアクションの background.js (サンプル)

ページアクションの拡張の機能を記述する background.js  のソースは以下のとおりです。

browser.tabs.onUpdated イベントリスナでタブの更新を監視しており、更新された際にはタブから URL を取得します。

URL に “edge” という文字列が含まれていた場合は、browser.pageAction.show メソッドでアドレスバーの横にアイコンを表示します。

表示されたアイコンへのアクションは browser.pageAction.onClicked リスナーが監視しており、クリックされると引数として渡されたハンドラーが呼び出されます。

今回のサンプルコードでは browser.tabs.executeScript メソッドを使用して、引数に文字列として指定されたコードをタブ内のコンテンツにインジェクションして実行させます。

 

ページアクションのサンプルの実行

前述のサンプルコードを実際に Microsoft Edge で動作させるには、以下の手順を実行します。

  1. 拡張用の各ファイルを配置するための空の作業フォルダを作成します。
     
  2. フォルダ内に icon という名前でフォルダを作成し、e-19.png という名前で 19 x 19 ピクセルの画像を保存します。
     
  3. テキストエディタに ブラウザアクションの manifest.json のサンプルコードの内容を貼り付け、manifest.json という名前で作業フォルダに保存します。
     
  4. テキストエディタで新しいテキストを作成し、ページアクションの background.js (サンプル) のサンプルコードの内容を貼り付け background.js という名前で作業フォルダに保存します。
     
  5. Edge 拡張のテストインストール の内容を参考に Edge に拡張をインストールします。
     
  6. http://bit.ly/mk_ext_edge などの URL に “edge” という文字を含むページをブラウズし、アドレスバーの横にアイコンが表示されるのを確認します。

    image
     
  7. アドレスバーの横に表示されたアイコンをクリックし、ページの文字の色が緑色に変化することを確認してください。

 

タブ内のコンテンツへの JS ファイルでのインジェクション

今回のサンプルでは、browser.tabs.executeScript メソッドの引数に、文字列で渡されたコードをタブ内のコンテンツにインジェクションしていますが、この方式だとステップ数の多い長いコードを実行するのが大変です。

そのため browser.tabs.executeScript メソッドではインジェクションするコードを JS ファイルで渡す書式もサポートしています。

具体的には以下のような書式になります。

browser.tabs.executeScript(null,{
        “file”: “injectionCode.js”
    });


 

この書式を使用して、Edge のタブ内に表示されているコンテンツに新しいエレメントを追加するように改造してみましょう。


 

手順は以下のとおりです。

  1. background.js のソース内の browser.tabs.executeScript の引数のコメントアウトの行を以下のように変更します。
     
    browser.tabs.executeScript(null,{
            //”code”: “document.body.style.color=’green'”,
            “file”: “add_h1.js”
        });


     

  2. テキストエディタで新しいテキストを作成し、以下のコードを貼り付けて add_h1.js という名前で作業フォルダに保存します。

以上で拡張の改造は完了です。

現在インストールされている拡張を再読み込みして実行します。

Edge 拡張の再読み込みの手順に再読み込みを行ったあと、アドレスバーの横のアイコンをクリックし、表示されているコンテンツをいちばん下までスクロールしてください。

h1 タグが表示され、以下のような文字が表示さているのが確認できます。

image

まとめ

今回は Microsoft Edge のページアクション拡張について紹介しました。

ページアクションを使用すると、アドレスバー横のアイコンから拡張の機能を呼び出すことができます。

次回はコンテントスクリプツ拡張について紹介します。

 

Real Time Analytics

Clicky

Comments (0)

Skip to main content