diffshare / caption-mate Goto Github PK

リアルタイムの翻訳が可能ではないか？

google meetから字幕をぶっこ抜くchromeブラウザ拡張の作り方をMVPで教えてください。
plasmoフレームワーク、typescriptを使ったものでお願いします。

MVP（Minimum Viable Product）を作成するには、まずchromeブラウザ拡張の基本構造を理解する必要があります。以下に簡単な手順を説明します。

1. 拡張機能のフォルダとマニフェストファイルを作成する
   まず、新しいフォルダを作成し、その中にmanifest.jsonという名前のマニフェストファイルを作成してください。次のコードをマニフェストファイルに貼り付けます。

{
  "manifest_version": 2,
  "name": "Google Meet Subtitle Extractor",
  "version": "1.0",
  "description": "Extracts subtitles from Google Meet",
  "permissions": [
    "activeTab",
    "storage"
  ],
  "content_scripts": [
    {
      "matches": ["*://meet.google.com/*"],
      "js": ["content.js"]
    }
  ],
  "icons": {
    "48": "icon.png"
  },
  "browser_action": {
    "default_icon": "icon.png"
  }
}

2. TypeScriptの設定
   TypeScriptを使用するには、次の手順に従ってください。

• npm initを実行してpackage.jsonファイルを作成します。
• TypeScriptをインストールするために、npm install --save-dev typescriptを実行します。
• tsconfig.jsonファイルを作成し、以下の設定を追加します。

{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true,
    "outDir": "dist"
  },
  "include": ["src"]
}

3. Plasmoフレームワークの導入
   Plasmoフレームワークは、Chrome拡張機能を簡単に作成するためのライブラリです。次のコマンドでインストールします。

npm install --save plasmo

4. content.tsファイルを作成する
   srcフォルダを作成し、その中にcontent.tsファイルを作成します。次のコードを追加してください。

import { Plasmo } from "plasmo";

class SubtitleExtractor {
  private plasmo: Plasmo;

  constructor() {
    this.plasmo = new Plasmo();
    this.init();
  }

  private init() {
    this.plasmo.onMessage("EXTRACT_SUBTITLES", () => {
      const subtitles = this.extractSubtitles();
      this.plasmo.sendMessage("SUBTITLES_EXTRACTED", subtitles);
    });
  }

  private extractSubtitles(): string[] {
    const subtitleElements = document.querySelectorAll(
      "div[jsname='V67aGc'] span"
    );
    const subtitles = Array.from(subtitleElements).map((el) => el.textContent);
    return subtitles;
  }
}

const extractor = new SubtitleExtractor();

5. ビルドとデプロイ
   プロジェクトをビルドしてデプロイするには、以下の手順に従ってください。

6. ビルドスクリプトの設定
   package.jsonファイルを開き、"scripts"セクションに以下のビルドスクリプトを追加します。

"scripts": {
  "build": "tsc"
}

7. ビルドの実行
   プロジェクトをビルドするには、ターミナルで次のコマンドを実行してください。

npm run build

これにより、distフォルダにコンパイルされたJavaScriptファイルが生成されます。

8. 拡張機能のロード
   Chromeで拡張機能をロードするには、以下の手順に従ってください。

• Chromeのアドレスバーにchrome://extensions/と入力し、Enterキーを押して拡張機能ページを開きます。
• 右上の「デベロッパーモード」をオンにします。
• 「パッケージ化されていないアプリを読み込む」ボタンをクリックし、先ほど作成した拡張機能のフォルダを選択します。

9. Google Meetでテスト
   Google Meetにアクセスし、字幕を表示してください。この拡張機能は、字幕が表示されている間に実行する必要があります。字幕を取得するために、バックグラウンドページやポップアップページを実装し、EXTRACT_SUBTITLESメッセージを送信してください。その後、SUBTITLES_EXTRACTEDメッセージを受信し、取得された字幕を適切に処理します。

これで、Google Meetから字幕を抽出するシンプルなMVP Chromeブラウザ拡張が完成しました。プロジェクトを改善するために、字幕の保存やエクスポート機能、翻訳機能などの追加機能を検討してください。

このブラウザ拡張にふさわしい他の名前を理由と共に提案してください。
Google Meetという固有名詞を含むとweb storeで却下される可能性が高いと思います。

確かに、Google Meetのような固有名詞を含む拡張機能名は、Webストアでの却下のリスクが高まります。以下に、そのリスクを減らすための代替案をいくつか提案します。

1. CaptionMate
   理由: この名前は、"caption"（字幕）と"mate"（友達）を組み合わせたもので、ユーザーにとって使いやすい字幕ツールであることを示しています。また、Google Meetに特化した拡張機能ではなく、将来的に他のビデオ会議サービスにも対応できる可能性があります。

2. SubtitleSnatcher
   理由: この名前は、字幕を"snatch"（つかむ）ことから、字幕を抽出する機能に焦点を当てています。また、特定のビデオ会議サービスとは関連付けられていないため、拡張機能が幅広い用途に対応できることを示唆しています。

3. TranscriptGrabber
   理由: この名前は、「transcript」（書き起こし）と「grabber」（つかむもの）の組み合わせで、会議中の発言内容をテキスト形式で抽出することに焦点を当てています。また、この名前は特定のサービスに依存しないため、複数のプラットフォームで機能する可能性があります。

いずれの名前も、Google Meetという固有名詞を含まず、字幕やトランスクリプトを抽出する機能を強調しています。これらの名前は、拡張機能の目的を明確にし、Webストアでの承認の可能性を高めるでしょう。