Microsoft Edge 拡張の作り方:contentScripts 編


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

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

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

コンテントスクリプツ

コンテントスクリプツの拡張は、マニフェストファイルに記載されたリストにあるパターンにマッチした URL に対し、コンテンツのスクリプトファイルをロードするようブラウザに指示します。
ユーザーがその機能を呼び出すための UI は持ちません。

image

スクリプトファイルと URL パターンの関連付けが JavaScript コードの記述なしでできるので、簡易的なホワイト/ブラックリストを管理する拡張などが作成できます。

以降、ソースを使用して説明を行います。

 

コンテントスクリプツの manifest.json

コンテントスクリプツの manifest.json は以下のようになります。

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

matches” キーで拡張の機能を動作させる URL を、”js” で JavaScript ファイルを指定しています。

 

コンテンツスクリプツで呼び出される JS ファイル

コンテンツスクリプツの拡張から呼び出される JS ファイル内のコードについて、特別な記述はとくに必要ありません。

一般的な Web コンテンツ上で使用される JavaScript 構文から拡張が提供する API を呼びだすことができます。

今回のサンプルでは、URL ごとに呼び出された JS ファイルが判別できるように、各々以下のようなしごく単純なコードを記述しています。

コンテンツスクリプツ拡張サンプルの実行

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

  1. 拡張用の各ファイルを配置するための空の作業フォルダを作成します。
     
  2. テキストエディタに ブラウザアクションの manifest.json のサンプルコードの内容を貼り付け、manifest.json という名前で作業フォルダに保存します。
     
  3. テキストエディタで新しいテキストを作成し、コンテンツスクリプツで呼び出される JS ファイル のサンプルコードの内容を各々貼り付け、forMSDN_Blog.js、forMsEdge.js、forMsEdgeDev.js という名前で作業フォルダに保存します。
     
  4. Edge 拡張のテストインストール の内容を参考に Edge に拡張をインストールします。
     
  5. マニフェストファイルのリストされている以下の URL にアクセスします。
  6. 各ページごと以下のように alert ボックスが表示されるのを確認してください。
     
    image

まとめ

今回は、Microsoft Edge 用の拡張としてコンテンツスクリプツの機能について紹介しました。

コンテンツスクリプツを使用すると、マニフェストファイルに記載したパターンにマッチした URL の Web コンテンツに対し機能を実行することができます。

ブラウザーのインストールして使うという拡張の仕様上、頻繁なパターンリストが必要な用途には向きませんが、URL と機能の普遍的な組み合わせについては手軽に設定が可能です。

Real Time Analytics

Clicky

Comments (0)

Skip to main content