ChromeエクステンションとGASの連携について

ファイル構成の概要

この記事では、ChromeエクステンションとGoogle Apps Script（GAS）を連携させるプロジェクトのコード解析を行います。まずは、プロジェクトの主要なファイルについて説明します。

manifest.json の解析

このファイルから得られる主要な情報は以下の通りです：

• manifest_version: 3（Manifest V3を採用）
• name: "ChromeエクステンションとGASを連携させるやーつ"
• version: "1.0"
• permissions: "identity", "activeTab", "scripting"
• background: background.js をバックグラウンドスクリプトとして使用
• content_scripts: Google Meet（"https://meet.google.com/"）で動作する contentscript.js
• action: ポップアップとして index.html を使用

background.js の解析

このスクリプトには以下の主要な機能が含まれています：

1. ブラウザのアクションボタンがクリックされた際に、index.html を新しいタブで開く。
2. タブが閉じられたときに、特定のGASのエンドポイントにPOSTリクエストを送信。

contentscript.js の解析

このスクリプトには以下の主要な機能が含まれています：

1. readParticipants() という関数で、Google Meetの参加者の名前を取得。
2. 参加者の名前はDOMの特定のdiv要素から抽出。
3. 抽出した名前は配列に格納。

popup.js の解析

このスクリプトには以下の主要な機能が含まれています：

1. スクリプトが実行された際に、コンソールに "start" と出力。
2. record というIDを持つHTML要素がクリックされた際に、バックグラウンドスクリプトに "updateParticipantsTime" メッセージを送信。

コードのフローとレビュー

コードの動作フロー

1. ユーザーアクション: アクションボタンをクリックすると、background.js が index.html を新しいタブで開きます。
2. タブのクローズ: タブが閉じられると、background.js がGASのエンドポイントにデータをPOSTします。
3. Google Meet参加: contentscript.js がGoogle Meetの参加者名を取得します。
4. ポップアップ操作: popup.js で特定のボタンがクリックされた場合、バックグラウンドスクリプトにメッセージが送られます。

コードレビューと改善点

1. 可読性: コードには適切なコメントがありますが、全体的なフローの説明が不足しています。
2. 冗長性: popup.js で同じイベントリスナーが二重に追加されている点が改善の余地があります。
3. エラーハンドリング: ネットワークリクエストやDOM操作でのエラーハンドリングが不足しています。
4. セキュリティ: GASのエンドポイントURLがハードコードされているのはセキュリティリスクです。
5. モジュール性: 各JSファイルは独立して機能していますが、拡張性や再利用性を考慮するとモジュール化が望ましいです。

以上、基本的な機能は備わっていますが、いくつかの改善点が見られます。