Google Chrome拡張機能開発入門: Manifest V3対応の実践ガイド

未分類

はじめに

記事の目的と対象読者の説明

この記事では、Google Chromeの拡張機能を開発する方法をManifest V3対応版として解説します。対象読者は、拡張機能開発に興味があり、基本的なプログラミング知識を持っている方を想定しています。

Google Chrome拡張機能の概要

Google Chrome拡張機能は、ウェブブラウザの機能を拡張し、ユーザー体験を向上させるためのツールです。
拡張機能はJavaScript、HTML、CSSなどの一般的なウェブ技術を使用して開発され、Chromeウェブストアを通じて配布されます。

Manifest V3の新機能とその利点

Manifest V3は、拡張機能開発の新しいバージョンで、パフォーマンスの向上、セキュリティの強化、開発者の利便性を高める機能が追加されています。
Manifest V3では、バックグラウンドページからサービスワーカーへの移行、content_security_policyの強化、アクションAPIの導入など、多くの変更が行われています。

Google Chrome開発者ダッシュボードへのアクセス

拡張機能の公開には、Google Chrome開発者ダッシュボードへのアクセスが必要です。
以下の手順でアクセスを設定してください。

  1. Google Chrome開発者ダッシュボードにアクセスする。
  2. Googleアカウントでログインする(アカウントがない場合は作成する)。
  3. 必要に応じて、開発者登録料を支払って開発者として登録する。

拡張機能の基本構造とManifest V3の適用


Manifestファイルの解説

Manifestファイルは、拡張機能のメタデータを記述するJSON形式のファイルです。
拡張機能の名前、バージョン、権限、使用するスクリプトや画像などのリソースが定義されています。Manifestファイルは、拡張機能のルートディレクトリにmanifest.jsonという名前で配置されます。

バックグラウンドスクリプト、コンテンツスクリプト、ポップアップ等の主要コンポーネントの説明

  • バックグラウンドスクリプト
    拡張機能の中枢となるJavaScriptファイルで、拡張機能の状態管理やイベントリスナーの登録などを行います。
  • コンテンツスクリプト
    ウェブページ上で実行されるJavaScriptファイルで、ページ内のDOM操作やスタイルの適用などを行います。
  • ポップアップ
    拡張機能のアイコンをクリックしたときに表示される小さなHTMLページで、ユーザーとのインタラクションを提供します。

Manifest V3で変更されたポイントの紹介

Manifest V3では、以下のような主要な変更が行われています。

  • バックグラウンドページからサービスワーカーへの移行
    より効率的なリソース管理が可能になります。
  • content_security_policyの強化
    セキュリティ向上のため、リモートコードの実行が制限されます。
  • アクションAPIの導入
    ブラウザアクションとページアクションを統一し、シンプルなAPIが提供されます。

サンプルコードを使ったManifest V3対応方法の説明

以下は、Manifest V3に対応したmanifest.jsonのサンプルコードです。

{
  "manifest_version": 3,
  "name": "Sample Extension",
  "version": "1.0.0",
  "action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "images/icon16.png",
      "48": "images/icon48.png",
      "128": "images/icon128.png"
    }
  },
  "permissions": [
    "activeTab"
  ],
  "background": {
    "service_worker": "background.js"
  },
  "content_scripts": [
    {
      "matches": ["https://*/*"],
      "js": ["contentScript.js"]
    }
  ],
 "content_security_policy": {
    "extension_pages": "script-src 'self'; object-src 'self'; style-src 'self' 'unsafe-inline'"
  }
}

上記のサンプルでは、以下の設定が行われています。

  • manifest_versionが3に設定されており、Manifest V3に対応しています。
  • actionオブジェクトで、デフォルトのポップアップとアイコンが設定されています。
  • 必要な権限(ここではactiveTab)がpermissions配列にリストされています。
  • backgroundオブジェクトで、バックグラウンドのサービスワーカーとしてbackground.jsが設定されています。
  • content_scripts配列で、コンテンツスクリプトcontentScript.jsが設定されており、https://*/*にマッチするすべてのページで実行されるようになっています。
  • content_security_policyオブジェクトで、拡張機能のページに適用されるCSPが定義されています。この例では、同じオリジンのスクリプトとオブジェクトが許可され、インラインスタイルも許可されています。

このように、サンプルコードを参考に、Manifest V3に対応した拡張機能の設定を行うことができます。

実践: 簡単な拡張機能の開発

簡単な拡張機能

今回は、シンプルな拡張機能を考えます。ページ上で選択されたテキストをアラートで表示する拡張機能を作成しましょう。

ステップバイステップでの開発手順

  1. プロジェクトの作成: 新しいディレクトリを作成し、以下のファイルを追加します。
    • manifest.json
    • background.js
    • content.js
  2. manifest.jsonの設定: 前述のManifest V3対応のサンプルコードを参考に、適切な設定を行います。
  3. バックグラウンドスクリプトの実装: background.jsに、拡張機能のアイコンがクリックされたときに、content.js にメッセージを送信して、選択されたテキストを取得するように指示しています。また、content.js から受け取ったテキストを通知として表示しています。
  4. コンテンツスクリプトの実装: contentScript.jsに、background.js からのメッセージを受け取って、ウェブページ上で選択されたテキストを取得して、background.js に返信しています。

それぞれのソースコードの紹介

{
    "manifest_version": 3,
    "name": "Selected Text Alert",
    "version": "1.0",
    "description": "アラートで選択されたテキストを表示するシンプルな拡張機能",
    "action": {
      "default_icon": {
        "16": "icon16.png"
      }
    },
    "permissions": ["activeTab", "scripting", "notifications"],
    "background": {
      "service_worker": "background.js"
    },
    "content_scripts": [
      {
        "matches": ["<all_urls>"],
        "js": ["content.js"]
      }
    ]
  }

このコードでは、以下の設定が行われています。

  • manifest_version が3に設定されており、Manifest V3に対応しています。
  • name で拡張機能の名前を設定しています。ここでは「Selected Text Alert」という名前になっています。
  • version で拡張機能のバージョンを設定しています。
  • description で拡張機能の説明を設定しています。ここでは「アラートで選択されたテキストを表示するシンプルな拡張機能」という説明になっています。
  • action オブジェクトで、デフォルトのアイコンを設定しています。ここでは icon16.png という画像ファイルを使用しています。
  • permissions 配列で、必要な権限をリストしています。ここでは activeTab, scripting, notifications の3つの権限が必要になっています。
  • background オブジェクトで、バックグラウンドのサービスワーカーとして background.js を設定しています。サービスワーカーは、バックグラウンドページから移行した新しい仕組みです

  • content_scripts 配列で、コンテンツスクリプト content.js を設定しています。コンテンツスクリプトは、ウェブページ上で実行されるスクリプトです。
chrome.runtime.onConnect.addListener((port) => {
    if (port.name === 'content') {
      chrome.action.onClicked.addListener((tab) => {
        console.log('background.js clicked');
        port.postMessage({ action: 'getSelectedText' });
      });
  
      port.onMessage.addListener((response) => {
        console.log('background.js received:', response);
        if (response && response.text) {
            chrome.notifications.create({
                type: 'basic',
                iconUrl: 'icon16.png', // アイコン画像を指定してください
                title: '選択されたテキスト',
                message: response.text
              });
        }
      });
    }
  });
 
  • chrome.runtime.onConnect.addListener((port) => {…}) は、コンテンツスクリプトからの接続要求を受け取るためのイベントリスナーです。port は接続されたポートオブジェクトで、メッセージの送受信や切断などができます。
  • if (port.name === ‘content’) {…} は、ポート名が ‘content’ の場合に限って処理を行う条件分岐です。ポート名はコンテンツスクリプト側で chrome.runtime.connect({name: ‘content’}) のように指定できます。
  • chrome.action.onClicked.addListener((tab) => {…}) は、アクションボタン(拡張機能のアイコン)がクリックされたときに発生するイベントリスナーです。tab は現在のタブオブジェクトで、URLやIDなどの情報が含まれています。
  • console.log(‘background.js clicked’) は、デバッグ用にコンソールにメッセージを出力する文です。
  • port.postMessage({ action: ‘getSelectedText’ }) は、接続されたポートにメッセージを送信する文です。{ action: ‘getSelectedText’ } は送信するデータオブジェクトで、任意の形式や内容が可能です。このメッセージはコンテンツスクリプト側で port.onMessage.addListener((message) => {…}) のように受け取れます。
  • port.onMessage.addListener((response) => {…}) は、接続されたポートからメッセージを受信するためのイベントリスナーです。response は受信したデータオブジェクトで、ここでは { text: 選択されたテキスト } の形式と仮定します。
  • console.log(‘background.js received:’, response) は、デバッグ用にコンソールにメッセージとデータを出力する文です。
  • if (response && response.text) {…} は、受信したデータが存在し、かつ text プロパティがある場合に限って処理を行う条件分岐です。
  • chrome.notifications.create({…}) は、通知を表示するためのAPIです。引数に通知の設定オブジェクトを渡します。ここでは type, iconUrl, title, message を指定しています。
const port = chrome.runtime.connect({ name: 'content' });

port.onMessage.addListener((message) => {
  console.log('content.js received:', message);
  if (message.action === 'getSelectedText') {
    const selectedText = window.getSelection().toString();
    if (selectedText) {
      port.postMessage({ text: selectedText });
    }
  }
});
  • まず、chrome.runtime.connect() 関数を使って、拡張機能内の他のコンポーネント(例えばバックグラウンドページ)や他の拡張機能と接続しようとします。この関数は、contentオブジェクトを引数に取ります。これは、接続するポートの名前を指定するものです。
  • 次に、port.onMessage.addListener() 関数を使って、接続したポートからメッセージを受け取るリスナーを登録します。この関数は、messageオブジェクトを引数に取ります。これは、送られてきたメッセージの内容を表すものです。
  • リスナー内では、console.log() 関数で受け取ったメッセージをログに出力します。そして、message.action が ‘getSelectedText’ という値であるかどうか判定します。これは、選択されたテキストを取得するというアクションを示すものです。
  • もし message.action が ‘getSelectedText’ であれば、window.getSelection().toString() 関数で現在選択されているテキストを文字列として取得します。そして、もし選択されたテキストが存在すれば(空文字列でなければ)、port.postMessage() 関数でそのテキストをポートに送信します。この関数は、textオブジェクトを引数に取ります。これは、送信するテキストの内容を表すものです。

テストとデバッグの方法

  1. 拡張機能の読み込み
    Google Chromeで、chrome://extensions/にアクセスし、デベロッパーモードを有効にします。その後、「パッケージ化されていない拡張機能を読み込む」ボタンをクリックし、作成したディレクトリを選択して拡張機能を読み込みます。
  2. 動作確認
    任意のウェブページを開き、拡張機能のアイコンをクリックしてポップアップが表示されることを確認します。ポップアップに画像が一覧表示され、クリックでダウンロードが開始されることを確認します。
  3. デバッグ
    エラーや不具合がある場合、chrome://extensions/ページで該当する拡張機能の「詳細」ボタンをクリックし、「バックグラウンドページ」や「拡張機能のエラー」のリンクからデバッグ情報を確認します。また、ポップアップのpopup.htmlで右クリックし、「検証」を選択して開発者ツールを開き、エラーや警告を確認します。
  4. 修正と再確認
    問題箇所を修正した後、拡張機能を再読み込みして動作確認を行います。すべての機能が正常に動作することを確認したら、開発が完了です。

以上の手順で、拡張機能の開発ができます。テストとデバッグを繰り返し、期待通りの動作を実現することが重要です。

拡張機能の公開と結論

Chromeウェブストアへの登録方法

  1. Google Chrome開発者ダッシュボードにアクセスし、Googleアカウントでログインします。
  2. 「新しいアイテムを追加」ボタンをクリックし、拡張機能のパッケージ化されたZIPファイルをアップロードします。
  3. アップロードが完了したら、拡張機能の詳細ページに必要な情報を入力し、アイコンやスクリーンショットを追加します。
  4. 入力が完了したら、「公開」ボタンをクリックして拡張機能を公開します。

公開に必要な資料やスクリーンショットの作成

  • 拡張機能の詳細説明: ユーザーに機能や使い方をわかりやすく説明するテキストを用意します。
  • アイコン: 48×48ピクセル、128×128ピクセルの2種類のアイコンを用意します。
  • スクリーンショット: 拡張機能の動作画面や設定画面など、ユーザーが理解しやすいスクリーンショットをいくつか用意します。

記事のまとめ

この記事では、Google Chromeの拡張機能開発の基本からManifest V3対応、簡単な拡張機能の開発、テスト、デバッグ、公開までの手順を解説しました。これにより、独自の拡張機能を開発し、Chromeウェブストアに公開することができます。

今後の拡張機能開発に向けてのアドバイス

  • 開発者向けのドキュメントを活用し、拡張機能の開発に関する知識を広げましょう。https://developer.chrome.com/docs/extensions/mv3/
  • より複雑な拡張機能を開発する場合、フレームワークやライブラリを活用して効率的に開発を進めましょう。
  • ユーザーのフィードバックを活用し、拡張機能の改善や新機能の追加に取り組みましょう。これにより、より多くのユーザーに愛用される拡張機能としましょう。

コメント

タイトルとURLをコピーしました