diffshare / caption-mate Goto Github PK
View Code? Open in Web Editor NEWYour Go-To Tool for Extracting and Saving Video Call Subtitles
Your Go-To Tool for Extracting and Saving Video Call Subtitles
リアルタイムの翻訳が可能ではないか?
google meetから字幕をぶっこ抜くchromeブラウザ拡張の作り方をMVPで教えてください。
plasmoフレームワーク、typescriptを使ったものでお願いします。
MVP(Minimum Viable Product)を作成するには、まずchromeブラウザ拡張の基本構造を理解する必要があります。以下に簡単な手順を説明します。
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"
}
}
npm init
を実行してpackage.json
ファイルを作成します。npm install --save-dev typescript
を実行します。tsconfig.json
ファイルを作成し、以下の設定を追加します。{
"compilerOptions": {
"target": "es6",
"module": "commonjs",
"strict": true,
"esModuleInterop": true,
"outDir": "dist"
},
"include": ["src"]
}
npm install --save plasmo
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();
ビルドとデプロイ
プロジェクトをビルドしてデプロイするには、以下の手順に従ってください。
ビルドスクリプトの設定
package.json
ファイルを開き、"scripts"セクションに以下のビルドスクリプトを追加します。
"scripts": {
"build": "tsc"
}
npm run build
これにより、dist
フォルダにコンパイルされたJavaScriptファイルが生成されます。
chrome://extensions/
と入力し、Enterキーを押して拡張機能ページを開きます。EXTRACT_SUBTITLES
メッセージを送信してください。その後、SUBTITLES_EXTRACTED
メッセージを受信し、取得された字幕を適切に処理します。これで、Google Meetから字幕を抽出するシンプルなMVP Chromeブラウザ拡張が完成しました。プロジェクトを改善するために、字幕の保存やエクスポート機能、翻訳機能などの追加機能を検討してください。
このブラウザ拡張にふさわしい他の名前を理由と共に提案してください。
Google Meetという固有名詞を含むとweb storeで却下される可能性が高いと思います。
確かに、Google Meetのような固有名詞を含む拡張機能名は、Webストアでの却下のリスクが高まります。以下に、そのリスクを減らすための代替案をいくつか提案します。
CaptionMate
理由: この名前は、"caption"(字幕)と"mate"(友達)を組み合わせたもので、ユーザーにとって使いやすい字幕ツールであることを示しています。また、Google Meetに特化した拡張機能ではなく、将来的に他のビデオ会議サービスにも対応できる可能性があります。
SubtitleSnatcher
理由: この名前は、字幕を"snatch"(つかむ)ことから、字幕を抽出する機能に焦点を当てています。また、特定のビデオ会議サービスとは関連付けられていないため、拡張機能が幅広い用途に対応できることを示唆しています。
TranscriptGrabber
理由: この名前は、「transcript」(書き起こし)と「grabber」(つかむもの)の組み合わせで、会議中の発言内容をテキスト形式で抽出することに焦点を当てています。また、この名前は特定のサービスに依存しないため、複数のプラットフォームで機能する可能性があります。
いずれの名前も、Google Meetという固有名詞を含まず、字幕やトランスクリプトを抽出する機能を強調しています。これらの名前は、拡張機能の目的を明確にし、Webストアでの承認の可能性を高めるでしょう。
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.