機能拡張作成の基本

chrome 系の機能拡張を作成するための基本的なファイル構成でmanifest.jsonは必ず必要。フロント側のコード（公式ではコンテンツスクリプトと書かれている）とバックエンド側（公式ではService Worker）のコードを理解できているとわかりやすい。

manifest.json　// 機能拡張の各種設定を記載
content.js // フロント側のコード　フロントなのでDOMもちゃんと取得できる
background.js // バックエンド側のコード　DOMの取得などはない

manifest.json

{
  "manifest_version": 3,
  "name": "Basic Extension",
  "version": "1.1",
  "permissions": ["scripting"], // Javascript と　CSS の利用を可能にする
  "host_permissions": ["http://localhost/*"], // CORS の許可アドレス
  "background": {
    "service_worker": "background.js" // background のファイル指定
  },
  "content_scripts": [
    {
      "matches": ["<all_urls>"], //どのアドレスで機能拡張を有効にするか？
      // "https://*.flaps-web.com/*" のようにサイト指定も可能
      "js": ["content.js"], // front 側のファイル指定
      "css": ["style.css"] // スタイルシートを使用する場合の指定
    }
  ]
}

style.css

.basic-extension-element {
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.my-div-style {
    position: fixed;
    top: 20px;
    left: 20px;
    background-color: #2196F3;
    color: white;
    padding: 12px 24px;
    border-radius: 4px;
    font-size: 14px;
}

content.js

フロント側ではDOMを作成して文字を表示して、バックエンドに挨拶メッセージを送信しています。

console.log('コンテンツスクリプトが実行中です...');

// ページに拡張機能（テキストの表示）を追加する
const extensionElement = document.createElement('div');
extensionElement.textContent = '拡張機能が有効かされています。';
extensionElement.classList.add('my-div-style');
document.body.appendChild(extensionElement);

// バックエンドにメッセージを送信
chrome.runtime.sendMessage({
  type: 'greeting',
  message: 'コンテンツスクリプトからこんにちは！'
});

background.js

バックグラウンドではフロントからのメッセージをイベントリスナーで待機して、メッセージを出力し、メッセージタイプを判別して返答を返しています。

console.log('基本拡張機能のバックグラウンドスクリプトが実行されています。');

// バックグラウンドにメッセージが届いたらイベントを実行するイベントリスナー
chrome.runtime.onMessage.addListener((message, sender) => {
  console.log(\
  `コンテンツスクリプトからメッセージを受信しました: ${JSON.stringify(message)}`);

  // 例: 特定のメッセージtypeを受信した場合、その応答をコンソールに出力する
  if (message.type === 'greeting') {
    console.log('バックグラウンドスクリプトがフロントの挨拶に応答しました。');
  }
});

ブラウザからの使用

機能拡張 ＞機能拡張を管理＞デベロッパーモードを有効化し、機能拡張を読み込み有効化させます。 この時、console.log()の出力先がフロントとバックエンドで違っているのでそれぞれで確認します。

• フロント側：普通に検証のコンソールで確認します。
• バックエンド：機能拡張管理画面でビューを検証がリンクできるようになっていますのでそこをクリックでコンソールが開きます。

マニフェストで"host_permissions": ["http://localhost/*"] を指定したので適当なサイトへアクセスすれば下記のような出力が得られます。

バックエンドの出力結果：

フロント側の出力結果：

---

これを発展させてChrom系のブラウザで動作する英語を日本語に翻訳するブラウザツールを作成してみました。

Language-translation-Connector

---

[!NOTE] 参照サイト

機能拡張のリファレンス

マニフェストについて

パーミッションのリスト