拡張機能の作成の最初のステップは、マニフェストファイルを作成することです。プロジェクトに移動して、「Manifest.json」という新しいファイルを作成しましょう。このファイルは、拡張機能に関する情報を提供します。
https://developer.chrome.com/docs/extensions/mv3/manifest/
例えば、拡張機能の名前やバージョン、説明などが含まれます。
詳細なドキュメントが存在しますが、今回は主にマニフェストファイルに関連する4つの主要な項目に焦点を当てます。マニフェストファイルはJSON形式で記述され、すべてがオブジェクトの中に含まれます。
まず、拡張機能の名前を指定します。例えば、”name”として「My First Extension」としましょう。
次にバージョンを指定します。今回は1からスタートします。バージョンはメジャーバージョン、マイナーバージョン、パッチバージョンなどを考慮して適切に更新する必要があります。新しいアップデートをリリースする際には常にバージョンを更新する必要がありますので、1から始めることをおすすめします。
さらに、拡張機能の説明を記述します。ここでは「これは私の初めての素敵な拡張機能です」としましょう。
最後のフィールドは、マニフェストバージョンです。現在はバージョン2が推奨されていますが、代わりに最新のバージョン3を使用することにします。バージョン3には新しい機能が追加されていますが、互換性のない変更も含まれています。
バックグラウンドスクリプトとは
Google Chrome拡張機能の基本の一つである「バックグラウンドスクリプト」について説明しましょう。
https://developer.chrome.com/docs/extensions/mv2/background_pages/
拡張機能はイベントに基づいて動作します。これらのイベントは、タブを閉じたり、タブを開いたり、新しいタブに移動したり、ウィンドウ内のどこかをクリックしたりするなど、ブラウザのトリガーです。拡張機能は、これらのイベントをバックグラウンドスクリプトで監視し、適切な処理を行います。重要なポイントは、バックグラウンドスクリプトは必要なときにのみ読み込まれ、アイドル状態になるとアンロードされるということです。
まず、マニフェストファイルにバックグラウンドスクリプトを登録する必要があります。これは、マニフェストファイルで「background」プロパティを指定することで行います。
さらに、スクリプトを指定する「scripts」というキーを追加します。これには、バックグラウンドスクリプトを含む配列を指定します。複数のスクリプトを使用する場合は、コンマで区切ります。今回は1つのバックグラウンドスクリプトを使用するため、配列に1つのスクリプトを指定します。スクリプトの名前を「background.js」としましょう。
次に、デフォルトでは「persistent」をfalseに設定します。この値をtrueに設定するのは、バックグラウンドスクリプトがChrome WebリクエストAPIとの通信を行う場合のみです。それ以外の場合は常にfalseに設定することをおすすめします。
マニフェストバージョン3では、バックグラウンドスクリプトはバックグラウンドサービスワーカーに置き換えられました。マニフェストファイルでの登録方法が変更されています。複数のバックグラウンドスクリプトを使用する場合は、それらを1つの「background.js」というファイルにまとめることができます。
ここで、バックグラウンドスクリプト「background.js」を作成しましょう。バックグラウンドスクリプトでは、ChromeのAPIにアクセスするために「chrome」を使用します。IntelliSenseを利用するために、タイプをインストールしましょう。今回はChromeのランタイムを使用します。「chrome.runtime.onInstalled」を使って、拡張機能がインストールされた時に実行されるリスナーを追加します。例えば、インストールされたことを示すメッセージをコンソールに表示するようにしましょう。
全ての設定が完了したら、バックグラウンドファイルとマニフェストファイルを保存します。拡張機能を更新するためにリロードボタンをクリックし、最新のファイルでリフレッシュされます。また、バックグラウンドスクリプトを確認するために、バックグラウンドページをクリックしてスクリプトを表示できます。もしコンソールログを出力している場合は、ここで確認することができます。バックグラウンドスクリプトはインストール時に「installed」というメッセージをコンソールに出力することがわかります。これはバックグラウンドスクリプトの動作を簡単に示したものです。バックグラウンドスクリプトは、例えば拡張機能がインストールされた時にコンテキストメニューを追加する場合などに使用されます。
次に、ブックマークが作成されたときにイベントをリッスンするリスナーを作成することもできます。これはChromeのブックマークにアクセスするために「chrome.bookmarks.onCreated」を使用します。例えば、ブックマークが作成されたことと保存されたことをユーザーに通知するアラートを表示することができます。ただし、ブックマークにアクセスするためのパーミッションを追加する必要があります。
これはマニフェストファイルの「permissions」プロパティにアクセス権限を追加することで行います。
このプロパティには、ユーザーのブックマークにアクセスするための権限を与える配列を指定します。再度保存して、拡張機能をリロードします。エラーが表示されている場合は、エラーボタンをクリックすることでエラーの詳細を確認することができます。「created undefined」というエラーが表示されている場合は、ブックマークへのアクセス権限が必要なためです。
ブックマークへのアクセス権限を追加するためにマニフェストファイルを更新し、エラーをクリアして、ブックマークを作成するとエラーが表示されなくなります。例えば、Google.comにアクセスし、そのページをブックマークしたい場合は、[…] ブックマーク ブックマークに追加] の順にクリックします。￥すると、「ブックマークが保存されました」というポップアップが表示され、実際にブックマークが保存されたことがマニフェストファイルで確認できます。マニフェストファイルでは、拡張機能がユーザーから必要とする権限を指定する必要があります。これらの権限には、Googleのページで確認できるものがありますが、必要な権限のみを要求するように注意する必要があります。
バックグラウンドスクリプトは、特定のイベントが発生するのを待ち、適切な処理を行うためにリスナーを登録するために使用されます。また、多くのChrome APIはバックグラウンドスクリプトでのみ利用できます。なぜなら、バックグラウンドスクリプトは時間経過に伴って発生するイベントに反応する責任を持っているからです。必要なAPIにアクセスするためには、ChromeのAPIにどのプロパティや名前空間が利用可能かを確認する必要があります。多くのAPIが利用できますが、必要なもののみを適切にアクセスしてください。ただし、バックグラウンドスクリプトだけでは機能が制限されているため、コンテンツスクリプトを有効に活用する必要があります。
コンテンツスクリプト
コンテンツスクリプトは、バックグラウンドスクリプトと密接に関連しており、バックグラウンドスクリプトがイベントに反応し、特定のイベントのリスナーを追加する責任を持っています。
https://developer.chrome.com/docs/extensions/mv3/content_scripts/
コンテンツスクリプトは、Webページのコンテキストで実行されます。訪れたWebページの詳細を読み取ることができるだけでなく、変更を加えたり情報をバックグラウンドスクリプトに渡したりすることもできます。コンテンツスクリプトを作成するためには、まずマニフェストファイルにプロパティ called content scripts を追加する必要があります。
これは、コンテンツスクリプトのオブジェクトの配列を取るプロパティで、オブジェクトには主に3つの引数があります。マッチ、CSS、およびJavaScriptファイルです。
今のところはJavaScriptファイルから始めましょう。これもスクリプトの配列を取ります。ファイル名を “content.js” としましょう。次に、”content.js” というファイルを作成し、そこにコードを書いていきます。例えば、YouTubeのウェブサイトに追加のボタンを追加したいとします。したがって、ウェブサイトにアクセスするたびにボタンを追加し、そのボタンが背景色を黒に変更することでダークモードを適用したいとします。ウェブサイトがロードされたときに実行したい場合は、”window.onload” メソッドを使用します。そして、そのメソッドに関数を割り当てます。具体的なコードを書いていきましょう。
例えば、特定のボタンを選択して新しい要素を追加するためには、適切なボタンを “querySelector” で選択し、新しいボタンを追加します。実際にコンソールで試してみましょう。”document.querySelector” を使用して、id を指定します。この例では id が “end” なので、 “#end” を指定します。選択されたボタンが表示されます。コードを書く前に、コンソールで正しく要素を選択できているかを確認することができます。この方法でテキストを追加します。
さて、コンテンツスクリプトのテストができたので、実際にスクリプトを書いてみましょう。ファイルを保存して拡張機能をリロードし、Chromeをリフレッシュします。すると、ボタンが表示されるはずです。しかし、マッチの指定をしていなかったため、スクリプトが実行されませんでした。再びマニフェストファイルに戻り、matches というキーを追加します。matches は、JavaScriptファイルをいつ注入するかを指定するプロパティです。これは “globパターン” を取ります。もし “globパターン” について聞いたことがない場合は、Googleで “globパターン” を検索して調べることができます。
YouTubeのサイトにのみ適用したい場合、”youtube.com” のウェブサイト上でこのスクリプトが実行されるように指定します。また、”/” も指定します。これにより、この条件を満たすすべてのウェブサイトでスクリプトが実行されます。どのディレクトリでも構いません。したがって、この条件を満たすウェブサイトならば、どのディレクトリにいてもスクリプトが実行されます。保存し、拡張機能に戻り、リフレッシュします。このように拡張機能のホームページにはスクリプトが注入されますが、/watch のようなビデオを見ているとスクリプトは実行されません。スクリプトが注入されるのは、ウェブサイトを訪れた直後です。したがって、ホームページを訪れたのでスクリプトが注入されましたが、別のビデオに移動すると、ダークモードが適用されたままになります。その理由は、URLの変更を監視していないためです。
では、スクリプトに機能を追加してみましょう。現在はテキストを追加しているだけですが、もう少し興味深いものにして、背景色を変更するボタンを作成しましょう。ボタンを作成し、id に “dark-mode-button” を付けましょう。保存して拡張機能をリロードし、Chromeをリフレッシュします。すると、ボタンが表示されるはずです。テキストを追加することができました。
次に、ボタンに対してイベントリスナーを追加しましょう。例えば、クリック時に特定の関数を実行するようにします。関数名を “enableDarkMode” としましょう。まず、コードを確認し、どの要素がスペースを取っているのかを確認します。実際の要素を選択するために、この場合は “getElementsByTagName” を使用します。それを “ytd-app” と指定します。まず確認してみましょう。再びYouTubeに戻ります。選択してみると、HTMLコレクションが表示されます。最初の要素を選択する必要があるため、ここでは “ytd-app” を指定します。これで要素にアクセスできるようになり、スタイルを変更することができます。
次に、このコードをコピーして、”style.backgroundColor” を指定して “black” に変更します。拡張機能に戻り、リフレッシュします。YouTubeを確認してみてください。リフレッシュして、”do it dark” ボタンをクリックすると、背景が暗くなるはずです。もちろん、このダークモードは理想的なものではありません。テキストの色を反転させたり、他のスタイルを調整することもできます。これは、コンテンツスクリプトがどのように機能するかを示す基本的な例です。もう少し詳しく説明すると、コンテンツスクリプトを作成します。コンテンツスクリプトにはJavaScriptファイルとマッチの指定が含まれます。マッチはスクリプトが注入されるタイミングを示すもので、URLに基づいて指定します。除外マッチもあります。マッチに含まれるURLの中から除外したいものを指定できます。スクリプトが実行されるタイミングを制御する “run at” というパラメータもありますが、省略可能です。これらを指定したら、新しいファイルを作成します。この例では “content.js” というファイルを作成します。ここには、スクリプトが実行する関数や変更内容などを記述します。これは基本的なJavaScriptファイルであり、主に要素の選択、変更、新規作成、スタイルの変更など、ビジュアルやクライアントサイド側の要件に応じた操作を行います。
以上がコンテンツスクリプトの概要です。ページの変更や外観の変更を行い、必要なタイミングで実行されます。マッチ条件やURLに基づいてスクリプトが注入されます。
繰り返しになりますが、コンテンツスクリプトは独自の環境で実行されますが、HTTPS経由での通信を行う場合は常にセキュリティに留意しましょう。また、外部からのリクエストを受け取る場合には、クロスサイトスクリプティング攻撃をフィルタリングするなどの対策を行い、ページに結果を注入する前に慎重に検討しましょう。
コンテンツスクリプトを作成するには、JavaScriptファイルとマッチ条件を指定します。スクリプトがいつ実行されるかをマッチ条件で制御します。除外マッチも使用できます。その後、スクリプトを記述するために新しいファイルを作成し、要素の選択、変更、作成、スタイルの変更などを行います。
コメントを残す