はじめに
EVERSTEELで業務委託のアプリケーションエンジニアをしている浅見です！
EVERSTEELは、AI領域を軸としたスタートアップとして、プロダクト開発だけでなく、日々進化する新技術のキャッチアップや導入にも積極的に取り組んでいます
Chrome 組み込みの AIはご存知でしょうか？Chrome 138から色々な組み込みAI APIが使えるようになるので、今回試しに使ってみました
対象読者
Chrome組み込みのAIを知らなかった人
作ったもの
input、textarea要素で文字を選択すると翻訳が出るChrome拡張です
日本語は英語に、それ以外のサポート言語の場合は日本語に、サポート外の言語は英語にします
ソースコードはこちら
Claude Codeで作ってみました！要所要所ちゃんと動いていないので、あまり参考にはなりません
本文
使用した API
Language Detector APIとTranslator APIを使用しました
Language Detector API は入力テキストの言語を特定するために使用し、Translator API は翻訳を行うために使用しました
Chrome AIのAPIを使う方法
今回使用するAPIはChrome 138から使える機能ですが、アプリを作った2025年6月15日の時点ではChromeの最新版が137だったため、Chromeフラグを使って機能を有効にしました
ブラウザでchrome://flagsにアクセスすると、実験的機能を先行して使うことができます
今回はLanguage detection web platform APIとExperimental translation APIを使用するのでEnabledにします
モデルのダウンロード
Language Detector APIもTranslator APIも、初めてAPIを使用する際に、オンデマンドでモデルをダウンロードします
どちらもavailability()関数があり、利用可能、不可能、ダウンロード可能、ダウンロード中といった状態を返します
-
available: 利用可能 -
unavailable: 利用不可 -
downloadable: 追加のダウンロードが必要 -
downloading: ダウンロード中
Translator APIでは、翻訳元となる言語であるsourceLanguageと、翻訳後の言語であるtargetLanguageを指定してavailability()関数を実行することで利用可能状況がわかります
言語を検出する
入力する言語を特定するために、Language Detector APIのdetect()関数を使用します
結果はdetectedLanguageとconfidenceのオブジェクトを持つ配列で、detectedLanguageが検出した言語、confidenceが言語の信頼度になります
confidenceが高いものが先頭に来るようなので、多くの場合配列の一番先頭のdetectedLanguageを使用することになると思います
aaaaのような意味をなさない文字の場合、confidenceが低い状態で様々な言語が検出されると思いきや、ハワイ語が高いconfidenceで検出されたのが興味深かったです
const results = await detector.detect("aaaa");
console.log(results);
[
{ confidence: 0.8288949131965637, detectedLanguage: "haw" },
{ confidence: 0.08705461770296097, detectedLanguage: "mi" },
{ confidence: 0.05189286172389984, detectedLanguage: "hi-Latn" },
];
翻訳する
翻訳にはTranslator APIを使用します
create()関数で翻訳ツールを作成し、translate()関数で翻訳をします
非常にシンプルでわかりやすい API になっています
const ja = await enToJa.translate("Where is the next bus stop, please?");
console.log(ja); // 次のバス停はどこですか？
const jaToEn = await window.Translator.create({
sourceLanguage: "ja",
targetLanguage: "en",
});
const en = await jaToEn.translate(ja);
console.log(en); // Where is the next bus stop?
他に色々調整して完成
UI、Chrome拡張の設定、その他のロジックを実装して完成です！
日本語を選択した場合
英語を選択した場合
まとめ
Chrome組み込みAIのAPIを使って簡単なアプリを作ることができました
他にも要約をするSummarizer API、コンテンツ作成をサポートするWriter APIなど様々なAPIがあり、機密データのローカル処理、オフラインでの利用など、組み込みAIならではの魅力もあります。
今回はDeepLやGoogle翻訳など、すでに素晴らしいChrome拡張がある翻訳機能だったので実用性はほぼありませんが、これらが無料で使える上に、アプリに組み込んで使うこともできるのは魅力的です
標準化の取り組みも行っているようなので、主要ブラウザ全てで組み込みAIのAPIが使えるようになったら素敵ですね！
EVERSTEELでは、日々の技術キャッチアップを大切にし、積極的に新しい技術の導入にも取り組んでいきます！
Discussion