2022-12-20

Chrome拡張機能の作成方法

はじめに

この記事では、Chrome拡張機能の作成方法を紹介します。

Google Chromeのインストール

Chrome拡張機能の開発には、Google Chromeをインストールする必要があります。最新バージョンのChromeを使用することで、最新の機能とバグの少ない環境を利用することができます。インストールされていない場合は、Googleの公式ウェブサイトからダウンロードしてください。

https://www.google.com/chrome/

拡張機能の作成

Chrome拡張機能の作成は、いくつかの重要なファイルの設定から始まります。

以下は一般的な構造の例です。

my-extension/
├── manifest.json
├── background.js
├── content.js
├── popup.js
├── popup.html
├── images/
│   ├── icon16.png
│   ├── icon48.png
│   └── icon128.png
└── css/
    └── popup.css

manifest.json: このマニフェストファイルには、拡張機能に関する全ての重要な詳細が含まれます。
background.js: これはサービスワーカースクリプトであり、拡張機能の主なロジックを記述します。
content.js: このスクリプトは、ブラウザが訪れるウェブページのDOMを読み取りおよび変更することができます。
popup.js: 拡張機能がポップアップを使用する場合、このスクリプトでポップアップの動作を定義します。
popup.html: 拡張機能がポップアップを使用する場合、このファイルでポップアップのHTMLの構造を定義します。
images/: アイコンを含む、拡張機能で使用される全ての画像が格納されるディレクトリです。
css/: このディレクトリには、全てのCSSファイルが含まれます。この場合、popup.cssはポップアップのスタイルを指定します。

マニフェストファイルの作成

マニフェストファイルであるmanifest.jsonは、Chromeが拡張機能に関する情報を把握するためのJSON形式のファイルです。マニフェストには、拡張機能の名前、バージョン、必要な権限、関連するファイルなどの重要なデータが含まれます。

以下は、manifest.jsonファイルの簡単な例です。

manifest.json

{
  "manifest_version": 3,
  "name": "My First Chrome Extension",
  "version": "1.0",
  "description": "A simple Chrome extension.",
  "permissions": ["activeTab"],
  "action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "images/icon16.png",
      "48": "images/icon48.png",
      "128": "images/icon128.png"
    }
  },
  "background": {
    "service_worker": "background.js"
  },
  "content_scripts": [{
    "matches": ["<all_urls>"],
    "js": ["content.js"]
  }]
}

manifest_version: これはマニフェストファイルの形式のバージョンを指定します。Manifest V3の場合、バージョンは3となります。
name: ユーザーに表示される拡張機能の名前です。
version: 拡張機能のバージョンです。文字列であり、どのように構造化するかは任意ですが、セマンティックバージョニング（major.minor.patch）に従うことを推奨します。
description: 拡張機能の概要の簡単な説明です。
permissions: 拡張機能が必要とする権限です。この例では、activeTabは拡張機能が一時的に現在のアクティブなタブにアクセスできるようにします。ユーザーが拡張機能を起動するとき（例えばブラウザアクションをクリックするなど）に使用されます。
action: これはManifest V3で新しいプロパティで、Manifest V2のbrowser_actionを置き換えます。拡張機能のアイコンがツールバーに表示される方法を説明するオブジェクトを含みます。
default_popup: ツールバーで拡張機能のアイコンをクリックしたときに表示されるHTMLファイルです。
default_icon: 異なる状況で使用されるアイコンの異なるサイズを指定するオブジェクトです。
background: service_workerフィールドを含むオブジェクトです。このフィールドは、拡張機能のバックグラウンドアクションを制御するJavaScriptファイルを指定します。
content_scripts: 1つ以上のオブジェクトからなる配列で、各オブジェクトはコンテンツスクリプトまたは一致するページに注入されるJavaScriptコードのブロックを表します。content_scriptsのリストの各オブジェクトは、次の項目を含んでいる必要があります:
- matches: 一致パターンの配列です。一致パターンは、許可されたスキーム（http、https、file、ftp）で始まるURLであり、*文字を含むことができます。
- js: パターンで定義された一致するページに注入されるJavaScriptファイルの配列です。

サービスワーカー（バックグラウンドスクリプト）

サービスワーカーは、基本的にはウェブアプリケーションとブラウザ、ネットワーク（利用可能な場合）の間にあるプロキシサーバーのような役割を果たします。サービスワーカーは、効果的なオフライン体験の作成や、ネットワークリクエストのインターセプト、ネットワークの利用可否とサーバー上の最新アセットに基づいた適切なアクションの実行などを目的としています。また、プッシュ通知やバックグラウンド同期APIへのアクセスも可能です。

background.jsファイルは、次のようになります。

background.js

chrome.action.onClicked.addListener((tab) => {
  chrome.scripting.executeScript({
    target: {tabId: tab.id},
    function: setPageBackgroundColor,
  });
});

function setPageBackgroundColor() {
  document.body.style.backgroundColor = 'orange';
}

このスクリプトでは、拡張機能のアイコンがクリックされた場合 (chrome.action.onClicked.addListener)、現在のタブでJavaScriptの行が実行され、ウェブページの背景色がオレンジに変更されます。これは、Manifest V3の変更の一環として含まれるchrome.scripting.executeScript関数を使用して行われます。

コンテンツスクリプト

コンテンツスクリプトは、ウェブページのコンテキストで実行されるファイルです。標準のDocument Object Model（DOM）を使用して、ブラウザが訪れるウェブページの詳細を読み取ったり変更したりすることができます。

以下は簡単なcontent.jsスクリプトの例です。

content.js

document.body.style.border = '5px solid red';

このスクリプトは、訪れる全てのウェブページに5ピクセルの赤い実線ボーダーを追加します。

ポップアップスクリプト

拡張機能がポップアップ（ユーザーが拡張機能のアイコンをクリックしたときに表示される小さなウィンドウ）を使用する場合、別のJavaScriptファイル（通常はpopup.jsと呼ばれる）でその動作を定義します。

ポップアップスクリプトでは、ボタンクリックなどのイベントを監視したり、アクティブなウェブページと対話したりすることができます。以下はpopup.jsスクリプトの例です。

popup.js

document.getElementById('myButton').addEventListener('click', async () => {
  let [tab] = await chrome.tabs.query({ active: true, currentWindow: true });

  chrome.scripting.executeScript({
    target: { tabId: tab.id },
    function: setPageBackgroundColor
  });

  function setPageBackgroundColor() {
    document.body.style.backgroundColor = 'green';
  }
});

このスクリプトでは、myButtonというIDを持つHTML要素にイベントリスナーを追加しています。ボタンがクリックされると、現在アクティブなタブを取得し、ウェブページの背景色を緑に変更します。

popup.jsでは、ポップアップのHTMLページのDOMを操作したり、chrome.scripting APIを使用して現在のタブのコンテキストでスクリプトを実行したりすることができます。

ポップアップUIの作成

拡張機能のポップアップは、ユーザーがChromeツールバーの拡張機能アイコンをクリックしたときに表示されるユーザーインターフェースです。ポップアップのUIは、HTMLファイルとCSSファイルで定義されます。

ポップアップのHTML

まず、popup.htmlファイルを作成します。

popup.html

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="css/popup.css">
  </head>
  <body>
    <h1>Welcome to My Extension!</h1>
    <button id="myButton">Change background color</button>
    <script src="popup.js"></script>
  </body>
</html>

このHTMLファイルでは、<link>タグを使用してCSSファイルにリンクしています。その後にタイトルとボタンを持つシンプルなbodyがあります。ボタンにはmyButtonというIDがあります。このIDを後ほどpopup.jsファイルでイベントリスナーに使用します。また、popup.jsファイルも<script>タグを使用してこのHTMLファイルにリンクしています。

ポップアップのCSS

次に、ポップアップのスタイルを定義するためのCSSファイルを作成します。以下はpopup.cssファイルの例です。

css/popup.css

body {
  font-family: "Arial", sans-serif;
  width: 200px;
  height: 200px;
  margin: 0;
  padding: 10px;
  background-color: #F0F0F0;
}

h1 {
  font-size: 1.5em;
  color: #333;
}

button {
  display: block;
  width: 100%;
  padding: 10px;
  margin-top: 20px;
  font-size: 1em;
  color: #fff;
  background-color: #007BFF;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

button:hover {
  background-color: #0056b3;
}

このCSSファイルでは、ポップアップのbody、title、buttonの基本的なスタイルを定義しています。ボタンにはホバースタイルも定義されており、ユーザーがボタン上にカーソルを移動したときにフィードバックを与えます。

Chrome拡張機能のテスト

Chrome拡張機能をテストするために、次の手順を実行できます。

開発者モードの有効化
1. Google Chromeブラウザを開く
2. アドレスバーにchrome://extensionsと入力して、拡張機能ページにアクセス
3. 拡張機能ページにて、右上隅にあるDeveloper modeのスイッチを切り替えて有効にする
拡張機能の読み込み
1. Load unpackedボタンをクリック
2. ファイル選択ダイアログで、拡張機能のコードが格納されているディレクトリに移動
3. 通常はmanifest.jsonという名前のマニフェストファイルが含まれるフォルダを選択し、Selectをクリック
拡張機能のテスト
1. 拡張機能のUIと機能との対話を行い、正常に動作していることを確認