mainfest の定義(必須)

manifest.json は、Chrome 拡張機能を定義するためのファイルです。
このファイルは、拡張機能の基本的な情報、設定、権限、リソースなどを指定します。
拡張機能を作成する際には、必ず manifest.json を作成し、拡張機能の動作を制御します。

以下は、典型的な manifest.json の例です：

// manifest.json

{
  "manifest_version": 3,
  "name": "My Extension",
  "version": "1.0",
  "description": "This is a description of my extension.",
  "icons": {
    "48": "icon.png",
    "128": "icon128.png"
  },
  "action": {
    "default_popup": "popup.html",
    "default_icon": {
      "48": "icon.png",
      "128": "icon128.png"
    }
  },
  "permissions": ["activeTab", "tabs"],
  "content_scripts": [
    {
      "matches": ["https://*/*"],
      "js": ["content_script.js"]
    }
  ],
  "background": {
    "service_worker": "background.js"
  },
  "browser_action": {
    "default_popup": "popup.html"
  }
}

主なフィールドの意味を以下に解説します：

  • manifest_version: 使用するマニフェストバージョンを指定します。バージョン 3 の場合は 3 を指定します。
  • name: 拡張機能の名前を指定します。
  • version: 拡張機能のバージョンを指定します。
  • description: 拡張機能についての簡単な説明を指定します。
  • icons: 拡張機能のアイコンを指定します。さまざまなサイズのアイコンを提供することができます。
  • action: ブラウザアクションを定義します。アクション（ボタンなど）がある場合に指定します。
  • permissions: 拡張機能が必要とする権限を指定します。例えば、特定のウェブサイトにアクセスするために "https://*/*" を指定するなどがあります。
  • content_scripts: コンテンツスクリプトを指定します。特定のウェブページで実行するスクリプトを定義します。
  • background: バックグラウンドスクリプト（またはサービスワーカー）を指定します。拡張機能の背後で動作するスクリプトをここに定義します。
  • browser_action: ブラウザアクションを使用してポップアップページを指定します。

これは一般的な例であり、より複雑な拡張機能ではさらに多くのフィールドや設定を追加することができます。
拡張機能の動作や外観をカスタマイズするために、適切なフィールドを追加してください。

backgournd の定義

background.js（または background.html など）は、Chrome 拡張機能の一部として使用される JavaScript ファイルです。
拡張機能の背後で動作し、拡張機能全体のライフサイクルとブラウザイベントを管理します。
拡張機能のバックグラウンドスクリプトとして実行されるため、ページ上で直接アクセスできない特権を持ちます。

background.js の主な役割は以下のとおりです：

  1. イベントのリスニング: background.js は、拡張機能に関連するブラウザイベント（例：ブラウザ起動時、タブの更新、拡張機能のインストール）をリッスンすることができます。これにより、特定のイベントに応答して適切なアクションを実行できます。

  2. ロングランニングな操作: background.js は常にバックグラウンドで実行されるため、長時間かかる操作や継続的なタスクを処理するのに適しています。例えば、新しいタブのページを事前に読み込んでおくなどがあります。

  3. データの保持: background.js は拡張機能がインストールされている間ずっと動作しているため、データの保持に適しています。これにより、拡張機能の設定や状態を保持し、他のコンポーネント（ポップアップ、コンテンツスクリプトなど）とデータを共有することができます。

  4. ブラウザ API の使用: background.js は、ブラウザ API へのアクセスを持ちます。例えば、新しいタブの作成、ウィンドウの管理、ストレージの使用、ネットワークリクエストの送信などが可能です。

background.js は他のコンポーネント（ポップアップ、コンテンツスクリプトなど）と情報をやり取りする手段として、Chrome 拡張機能のアーキテクチャにおいて重要な役割を果たしています。ただし、拡張機能が複雑でない場合やデータ共有が不要な場合は、background.js を持たないシンプルな拡張機能も作成できます。

popup.html（または popup.js など） は、Chrome 拡張機能において、アイコンをクリックしたときに表示される小さなウィンドウのことを指します。このウィンドウは、ユーザーが拡張機能と対話したり、機能を提供したりするために使用されます。通常、ポップアップウィンドウには簡単なユーザーインターフェースやコントロールが含まれており、拡張機能の操作や設定の変更が行えるようになっています。

ポップアップウィンドウは、特にユーザーに情報を提供したり、ユーザーからの入力を受け付けたりする場合に便利です。たとえば、拡張機能が現在のページの情報を表示したり、特定の動作を制御するためのボタンを提供したりすることができます。

ブラウザ拡張 3.0 作成例

ブラウザ拡張機能の作成例として、Chrome 拡張機能の基本的な機能を実装する方法を以下に示します。具体的には、ウェブページの要素を変更する簡単なカスタム機能を作成する例です。

この例では、Chrome の拡張機能を作成しますが、他のブラウザでも同様のコンセプトで拡張機能を作成できる場合があります。

  1. マニフェストファイル (manifest.json) の作成:
    まず、拡張機能の設定と必要な権限を定義するマニフェストファイルを作成します。
// manifest.json

{
  "manifest_version": 3,
  "name": "カスタム変更拡張",
  "version": "1.0",
  "description": "ウェブページの要素をカスタム変更する拡張機能",
  "permissions": ["activeTab"],
  "action": {
    "default_popup": "popup.html"
  },
  "icons": {
    "48": "icon.png"
  },
  "content_scripts": [
    {
      "matches": ["https://*/*", "http://*/*"],
      "js": ["content_script.js"]
    }
  ]
}
  1. ポップアップページ (popup.html) の作成:
    このファイルは、ブラウザアイコンをクリックしたときに表示されるポップアップウィンドウの内容を定義します。
<!-- popup.html -->

<!DOCTYPE html>
<html>
  <head>
    <title>カスタム変更拡張</title>
    <script src="popup.js"></script>
  </head>
  <body>
    <h1>ウェブページの要素をカスタム変更</h1>
    <button id="changeButton">要素を変更する</button>
  </body>
</html>
  1. ポップアップページ用の JavaScript ファイル (popup.js) の作成:
    このファイルは、ポップアップページでのボタンクリックなどの動作を定義します。
// popup.js

document.addEventListener("DOMContentLoaded", function () {
  document
    .getElementById("changeButton")
    .addEventListener("click", changeElement);
});

function changeElement() {
  chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
    chrome.scripting.executeScript({
      target: { tabId: tabs[0].id },
      function: modifyPage,
    });
  });
}

function modifyPage() {
  // ウェブページの要素をカスタム変更する例
  // ここではすべての段落 (<p>) 要素のテキストを変更します
  const paragraphs = document.getElementsByTagName("p");
  for (let p of paragraphs) {
    p.textContent = "ここがカスタム変更されたテキストです！";
  }
}
  1. コンテンツスクリプト用の JavaScript ファイル (content_script.js) の作成:
    このファイルは、実際にウェブページのコンテンツに干渉するスクリプトを定義します。
// content_script.js

// このファイルは、コンテンツスクリプトとしてウェブページのすべてのフレームに注入されます
// この例では、コンテンツスクリプトは特定の動作を行いません

これで、簡単なブラウザ拡張機能が完成しました。拡張機能を使用するには、以下の手順を実行します。

  1. 上記のコードをコピーして、それぞれのファイルに保存します。
  2. Chrome ブラウザのアドレスバーに chrome://extensions を入力し、拡張機能の管理ページにアクセスします。
  3. ページの右上にある「デベロッパーモード」を有効にします。
  4. 「パッケージ化されていない拡張機能を読み込む」ボタンをクリックし、保存したファイルがあるフォルダを選択します。
  5. 拡張機能がリストに表示されるので、それを有効にします。

これで、拡張機能が有効になり、Chrome のアイコンをクリックするとポップアップが表示され、「要素を変更する」ボタンをクリックすると、現在のページ内のすべての段落のテキストがカスタム変更されます。

参考サイト

Chrome Extensions  |  Chrome for Developers
icon
developer.chrome.com
Extensions / Samples  |  Chrome Extensions  |  Chrome for Developers
icon
developer.chrome.com
GitHub - GoogleChrome/chrome-extensions-samples: Chrome Extensions Samples
icon
github.com