Chrome拡張機能を作成するための最新の手順とファイル構成を教えてください

Chrome拡張機能を作成するための最新の手順とファイル構成について説明します。

1. 開発環境の準備

エディタの用意: 任意のテキストエディタ（例: Visual Studio Code）を使用します。
フォルダの作成: プロジェクト用の新しいフォルダを作成し、拡張機能に関連するすべてのファイルをこのフォルダに保存します。

2. manifest.json の作成

manifest.json は拡張機能の設定ファイルで、拡張機能の情報や動作を定義します。

以下は基本的な manifest.json の例です。

{
  "name": "サンプル拡張機能",
  "description": "これはサンプルのChrome拡張機能です。",
  "version": "1.0",
  "manifest_version": 3,
  "action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "icons/icon16.png",
      "48": "icons/icon48.png",
      "128": "icons/icon128.png"
    }
  },
  "permissions": [
    "activeTab"
  ]
}

3. ポップアップページの作成

popup.html は拡張機能のアイコンをクリックしたときに表示されるポップアップの内容を定義します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>サンプルポップアップ</title>
  <link rel="stylesheet" href="popup.css">
</head>
<body>
  <h1>こんにちは！</h1>
  <button id="myButton">クリックしてね</button>
  <script src="popup.js"></script>
</body>
</html>

4. スタイルシートの作成

popup.css でポップアップのスタイルを定義します。

body {
  width: 300px;
  padding: 10px;
  font-family: Arial, sans-serif;
}

h1 {
  color: #333;
  font-size: 20px;
}

button {
  padding: 10px;
  background-color: #4CAF50;
  color: white;
  border: none;
  cursor: pointer;
}

button:hover {
  background-color: #45a049;
}

5. JavaScript の作成

popup.js でポップアップ内のボタンに機能を追加します。

document.getElementById('myButton').addEventListener('click', () => {
  alert('ボタンがクリックされました！');
});

6. アイコンの準備

icons フォルダを作成し、以下のサイズのアイコン画像を配置します。