はじめに
Google Meet にはリアルタイムで自動字幕（CC）を表示する機能があります。しかし公式UIからは 字幕を保存する手段が用意されていません。
今回は、字幕DOMを監視して取得し、ボタンひとつで.txtとして保存できる Chrome拡張 の作り方を紹介します。
目的
- Meetの字幕をリアルタイムで収集し、会議中に蓄積。
- ポップアップUIから「保存」ボタンを押すとローカルに
.txtファイルとしてダウンロード。
実現の仕組み
拡張は以下の3つの要素で構成します。
-
content.js
- Meetページに注入され、字幕のDOMを監視してテキストを収集。
-
background.js
- 収集した字幕をまとめ、ダウンロード処理を実行。
-
popup.html / popup.js
- 拡張のポップアップUI。「開始」「停止」「保存」などの操作ボタンを提供。
フォルダ構成
meet-captions-saver/
├─ manifest.json
├─ background.js
├─ content.js
├─ popup.html
└─ popup.js
各ファイルの内容
manifest.json
{
"manifest_version": 3,
"name": "Meet Captions Saver",
"version": "1.0.0",
"description": "Google Meet の字幕(CC)をDOMから収集し、ボタンで保存します。",
"permissions": ["downloads", "storage"],
"host_permissions": ["https://meet.google.com/*"],
"background": { "service_worker": "background.js" },
"action": { "default_popup": "popup.html" },
"content_scripts": [
{
"matches": ["https://meet.google.com/*"],
"js": ["content.js"],
"run_at": "document_idle"
}
]
}
content.js
let captions = [];
let observer = null;
function startObserver() {
const target = document.querySelector('div[aria-live="polite"]');
if (!target) return false;
observer = new MutationObserver((mutations) => {
for (const m of mutations) {
for (const node of m.addedNodes) {
if (node.innerText) {
captions.push(`[${new Date().toLocaleTimeString()}] ${node.innerText}`);
}
}
}
});
observer.observe(target, { childList: true, subtree: true });
return true;
}
chrome.runtime.onMessage.addListener((msg, sender, sendResponse) => {
if (msg.type === "START") {
sendResponse({ ok: startObserver() });
}
if (msg.type === "STOP") {
if (observer) observer.disconnect();
sendResponse({ ok: true, count: captions.length });
}
if (msg.type === "GET") {
sendResponse({ ok: true, data: captions });
}
});
background.js
chrome.runtime.onMessage.addListener((msg) => {
if (msg.type === "SAVE") {
const blob = new Blob([msg.data.join("\n")], { type: "text/plain" });
const url = URL.createObjectURL(blob);
const name = `meet_captions_${Date.now()}.txt`;
chrome.downloads.download({ url, filename: name });
}
});
popup.html
<!DOCTYPE html>
<html lang="ja">
<meta charset="utf-8">
<body>
<button id="start">開始</button>
<button id="stop">停止</button>
<button id="save">保存</button>
<div id="status"></div>
<script src="popup.js"></script>
</body>
</html>
popup.js
function activeTab(callback) {
chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
callback(tabs[0].id);
});
}
document.getElementById("start").addEventListener("click", () => {
activeTab((id) => {
chrome.tabs.sendMessage(id, { type: "START" }, (res) => {
document.getElementById("status").textContent = res.ok ? "収集開始" : "字幕が見つかりません";
});
});
});
document.getElementById("stop").addEventListener("click", () => {
activeTab((id) => {
chrome.tabs.sendMessage(id, { type: "STOP" }, (res) => {
document.getElementById("status").textContent = `収集停止 行数:${res.count}`;
});
});
});
document.getElementById("save").addEventListener("click", () => {
activeTab((id) => {
chrome.tabs.sendMessage(id, { type: "GET" }, (res) => {
if (res.ok) {
chrome.runtime.sendMessage({ type: "SAVE", data: res.data });
}
});
});
});
使い方
- 上記ファイルを作成し、フォルダにまとめる。
- Chrome で
chrome://extensions/を開き、「デベロッパーモード」をオン。 - 「パッケージ化されていない拡張機能を読み込む」でフォルダを選択。
- Google Meet を開いて字幕(CC)をオン。
- 拡張アイコンをクリックして「開始」→「停止」→「保存」を押すと
.txtがダウンロードされる。
まとめ
この拡張を使うと、Google Meet の字幕をシンプルに記録できます。議事録作成や学習の補助に便利です。
さらに発展させて、CSV形式やSRT形式で保存、自動保存、キーワード強調なども可能です。