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開発者ダッシュボードへのアクセスが必要です。
以下の手順でアクセスを設定してください。

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

Manifestファイルの解説

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

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

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

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

サンプルコードを使った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"]
      }
    ]
  }

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

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
              });
        }
      });
    }
  });
 

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 });
    }
  }
});

テストとデバッグの方法

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/
• より複雑な拡張機能を開発する場合、フレームワークやライブラリを活用して効率的に開発を進めましょう。
• ユーザーのフィードバックを活用し、拡張機能の改善や新機能の追加に取り組みましょう。これにより、より多くのユーザーに愛用される拡張機能としましょう。