領収書OCR Chrome拡張をGitHubに公開

はじめに

下記2つの記事に書かれている領収書OCR Chrome拡張「AI OCR Extension」について、ソースコードをGitHubに公開してみました。
https://zenn.dev/acntechjp/articles/add0fb7674f195
https://zenn.dev/acntechjp/articles/5b5f116328a372
公開先は下記となります。
https://github.com/Masa1984a/AI-OCR-Extension
Readmeなどの設定がなされていませんが、追々勉強しながら追加できればと思います。

機能概要

「AI OCR Extension」は、Google GeminiやClaude、ChatGPTといった最新のAIモデルを使って、画像内のテキストを高精度で認識するChrome拡張機能です。特に領収書の処理に特化しており、重要な情報を自動的に抽出・整理してくれます。

主要機能の紹介

この拡張機能には、以下のような機能が搭載されています：

1. 複数のAI OCRエンジン対応

• Google Gemini 2.0 Flash（Googleが開発した最新のAI）
• Anthropic Claude 3.7 Sonnet（Anthropic社が開発した高性能AI）
• OpenAI ChatGPT-4o（OpenAI社の最新のAIモデル）
  各AIモデルには得意分野があり、用途に応じて最適なモデルを選択できます。例えば、日本語の文書ならこのAI、英語の文書ならこのAIというように使い分けることも可能です。

2. 柔軟な画像取得方法

• PCカメラでのリアルタイム撮影（その場で撮影してすぐ解析）
• 既存画像ファイルのアップロード（すでに保存してある画像を使用）
  デスクでの作業中に領収書が届いたら、すぐにカメラで撮影して処理することも、スマホで撮影した画像をPCに転送して処理することもできます。

3. 領収書専用の高度な解析機能

• 支払先会社名、発行日、支払金額（税込）、通貨、登録番号など重要項目を自動抽出
• 項目ごとの画像上の座標情報も保持（「この金額はここにある」というように場所も記録）
  単にテキストを認識するだけでなく、それが領収書のどの情報なのかも理解して整理してくれるため、後処理の手間が大幅に削減されます。(ただし、座標情報の精度は良くない)

4. インタラクティブな結果確認と編集

• 認識テキストの位置を画像上にハイライト表示（AIが読み取った文字がどこにあるか表示）
• 認識結果の修正・編集機能（AIが間違えたところを直せる）
• 編集済みデータのJSON保存（後で使えるようにデータを保存）
  AIの認識結果を100%信頼するのではなく、ユーザーが確認・修正できる仕組みが組み込まれているため、高い精度を維持できます。

5. セキュリティへの配慮

• APIキーは拡張機能内にローカル保存（インターネット上に送信されない）
• APIキーのマスク表示機能（「******」のように隠して表示）
  機密性の高い文書を扱う場合でも、セキュリティを考慮した設計になっています。

各ファイルの詳細解説

1. manifest.json

• Chrome拡張機能（Chromeブラウザに新しい機能を追加する小さなプログラム）の設定ファイル
• 名前：「AI OCR Extension」
• 説明：「PCカメラで撮影し、Gemini/Claude/ChatGPT APIでOCR（画像から文字を読み取る技術）を行うChrome拡張」
• バージョン：1.0.0
• 必要な権限：storage（データ保存用）、tabs（タブ操作用）
• バックグラウンド処理：service-worker.js（裏で動き続けるプログラム）

2. service-worker.js

• 拡張機能のバックグラウンドスクリプト（ブラウザが起動している間ずっと動き続けるプログラム）
• 拡張機能アイコンがクリックされたときに、popup.htmlを新しいタブで開く処理

3. popup.html / popup.js

• 拡張機能の主要インターフェース（ユーザーが見て操作する画面）
• 機能：
  • PCカメラ起動と撮影
  • 画像ファイルのアップロード
  • AIモデル選択（Gemini/Claude/ChatGPT）
  • OCR解析実行（AIを使って画像から文字を読み取ること）

4. options.html / options.js

• 拡張機能の設定画面
• 各AI API（AIプログラムと通信するための仕組み）キーの設定と管理
  • Google Gemini API
  • Anthropic Claude API
  • OpenAI ChatGPT API
• APIキー（AIサービスを使うための秘密の暗号のようなもの）の安全な保存と表示/非表示の切り替え機能

5. comparison.html / comparison.js

• OCR結果の確認・編集画面
• 機能：
  • 画像と認識結果の並べて表示
  • 認識テキストの位置をハイライト表示
  • OCR結果の編集
  • 画像・JSON形式（コンピュータが理解しやすいデータ形式）での結果保存

おわりに

今回、自身で作った領収書OCR Chrome拡張「AI OCR Extention」をGitHubに公開しました。必要に応じてバージョンアップ等していけたらと思います！