英文からAnkiに単語を素早く登録するためのChrome拡張baberuのプロトタイプをする

CardBaberuにリネームするかも

解決したいペイン

word miningをする際に、翻訳にLLMで文脈を補うを使いたい

単純な機械翻訳だと、コンテキストが埋め込まれ図に翻訳がこなれなくて困ることがよくある

このツールで出来がいいものはMigakuしかない

後続のようにMigakuではできないことがある

文章からのword miningのツールでAnki用Flash cardに必要な要件を満たし、Ankiに簡単に送れるツールが見当たらない

LLMで対訳を作り、Ankiに一括インポートできる形式で吐き出すはなかなかいいものの、以下の欠点がある

音声がつかない

いちいち全文をScrapboxに転記して加工するのはまだるっこすぎる

文章を丁寧に読みたい時には便利だが、実行コストが高い

サイト上で気軽に実行したい

追加構想1

Word wise機能

要件

素早く登録できる

✅気兼ねないぐらい低コストで実行できる

月に100円以下

月に1200円払うなら、既存のツールをおとなしく使えばいいだろう

達成見込み：baberu コスト試算: OpenAIのAPIを利用しても月額70円以下

設計検討

UI

単語の範囲を選択したら、その単語が含まれる一文をAnkiに登録するレビュー用UIに送る

選択した単語の範囲が太字になる

意味は選択した単語の範囲を中心に解説される

使用イメージ

Ankiに登録するレビュー用UIでは、軽く手直しができ、満足したらAnki connectを通じてAnkiに送ることができる

翻訳の生成

ChatGPT, ClaudeのLLM APIのサポート

コストがごく低いので、ローカルLLMでなくても良い

オプション：PCのローカルLLMを使って翻訳を生成できる

オプション：自動的にCoubuildの辞書から意味を登録できる

音声を生成できる

試算した結果コストが十分低いので、OpenAIのAPIをメインとすることにした

Googleのtext to speech APIのサポート

無料で使えるので

オプション：OpenAIのtext to speech APIのサポート

オプション：PCでのローカル

Migakuのカードクリエイターみたいなイメージ

まず初めにやるべきことは？

Chrome拡張機能プロトタイプ計画

目的

基本的な機能の実現可能性を確認する

主要な技術的課題を特定する

ユーザーインターフェースの基本設計を検証する

実装する基本機能

✅テキスト選択機能

Webページ上でテキストを選択し、コンテキストメニューに拡張機能のオプションを表示

簡易LLM統合

選択されたテキストをLLM APIに送信し、基本的な翻訳と意味解析を取得

注: この段階では完全な機能ではなく、APIとの通信確立が目的

基本的なポップアップUI

LLMからの応答を表示する簡単なポップアップウィンドウ

Ankiへの送信ボタン（機能しない模擬ボタンでOK）

Chrome Storage APIの基本的な使用

選択されたテキストと解析結果の一時保存

実装手順

Chrome拡張機能の基本構造をセットアップ

（bext）✅マニフェストファイルの作成

必要な権限の設定

コンテンツスクリプトの作成

テキスト選択とコンテキストメニュー表示の実装

バックグラウンドスクリプトの作成

LLM APIとの通信処理の実装

簡易ポップアップUIの作成

HTML, CSSを使用した基本的なレイアウト

JavaScriptで動的コンテンツ表示

LLMへの生成ボタンを表示する

LLMの生成結果を表示する

Chrome Storage APIの基本的な使用方法の実装

注意点

この段階では完全な機能実装を目指さず、概念実証に焦点を当てる

セキュリティとプライバシーへの基本的な配慮（APIキーの安全な管理など）を行う

ユーザビリティよりも機能の基本的な動作確認を優先する

期待される成果

主要コンポーネント間の連携の確認

LLM APIとの通信における潜在的な問題の特定

ユーザーインターフェースの基本設計の検証

次の開発フェーズのための具体的なタスクリストの作成

実際に作っていく

Denoで作る

OpenAIのSDKはDenoも対応している

まずdenoで組み上げてからGoogle cloudを利用するように変更しよう

テンプレートを探す🍅

https://jsr.io/@bpev/bext が便利なツールのようだ

Chrome, Firefoxの両方に対応したmanufest.jsonをつくってくれる

deno向けにブラウザのAPIをよしなしてくれるようだ。それ以上は追っていないのでわからない。

超マイナーツール！

リスク：こいうものを使うと、対応がなくなった時に大変

とりあえずこれで作ってみよう

これに依存したテンプレートを作者が作っている

テンプレートをセットアップする🍅

ゴール: テキスト選択とコンテキストメニュー表示の実装

❌bextの制約で、コンテキストメニューの表示はできなかったのでpopupににげた

✅テキストを選択したら単語をコピーできる

テキストを選択したら、単語が含まれる文章をコピーできる

✅単語と文章の両方の情報を分けて取得できる

強調表示するために必要

動かない🍅

bextのbrowser APIには、tab.permission, runtime,storageしかAPIがない

内部で https://www.npmjs.com/package/@types/chrome?activeTab=versions を使っている

context menuを使わない方法で実装してみましょう

コメントアウトしていろんなエラーをつぶした🍅

パースのところは動いているようだ。細部のコードは確認できていない。

記号があると途中で文章が切れるバグがある

ちゃんと動いててすごい。私はまだコードを読んですらいない

コンテンツスクリプトはtabs APIにアクセスできないため、runtime.sendMessageを使用する必要があります。

baberu: 気がかりでも後回しにしていることを更新した

TODO：テキストを選択したら、単語が含まれる文章をコピーできる

app.tsxで関数のエラーが出て動かなかったので、コメントアウトしている