Japanese Grammar Checker Chrome Extension

AI-powered Japanese grammar checker and optimizer Chrome extension.

Features

• 文法チェック (Grammar Check): Analyze and improve Japanese text with AI-powered grammar corrections
• 翻訳 (Translation): Translate between Japanese and multiple languages
• AIチャット (AI Chat): Chat with AI about Japanese language questions
• 履歴管理 (History): Track and manage your grammar checks and translations

Installation

Option 1: Install from ZIP file (Recommended)

1. Download the latest release ZIP file from the Releases page
2. Extract the ZIP file to a folder on your computer
3. Open Chrome and navigate to chrome://extensions/
4. Enable "Developer mode" (toggle in the top-right corner)
5. Click "Load unpacked" and select the extracted folder
6. The extension should now be installed and ready to use

Option 2: Build from source

1. Clone the repository
2. Install dependencies: npm install
3. Configure environment: Copy .env.example to .env and set VITE_OPENAI_API_MODEL
4. Build the extension: npm run clean:build
5. Load the dist directory in Chrome as an unpacked extension

Project Structure

japanese-grammar-checker/
├── js/                  # 📁 Source code (main development directory)
│   ├── modules/         # Feature modules (grammar, translation, AI chat, etc.)
│   ├── utils/           # Utility functions (API, storage, config)
│   ├── background.js    # Background service worker
│   ├── content.js       # Content script
│   └── sidebar.js       # Sidebar main entry point
├── css/                 # Stylesheets
│   └── sidebar.css      # Main sidebar styles
├── tests/               # Unit tests
│   ├── modules/         # Module tests
├── tests/               # Unit tests
├── dist/                # 🔨 Build output directory
│   ├── prod/           # Production build
│   └── dev/            # Development build
├── config.js            # Build configuration
├── manifest.json        # Chrome extension manifest (base)
├── sidebar.html         # Extension UI
└── vite.config.extension.js  # Vite build configuration

⚠️ Note: All build outputs are in `dist/` directory and ignored by Git.

Development

Prerequisites

• Node.js (v18 or later)
• npm (v8 or later)
• Chrome browser

Setup

1. Clone the repository:

git clone https://github.com/macshion/japanese-grammar-checker.git
cd japanese-grammar-checker

2. Install dependencies:

npm install

3. Configure environment (optional):

cp .env.example .env
# Edit .env to set VITE_OPENAI_API_MODEL if needed (default: gpt-4o-mini)

Development Commands

Build Extension

# Build development version (with DEV label, separate storage)
npm run build:dev

# Build production version
npm run build:prod

# Build both versions
npm run build:all

# Clean and rebuild all
npm run clean:build

Run Tests

# Run all tests
npm test

# Run tests in watch mode
npm run test:watch

# Generate coverage report
npm run test:coverage

Linting

# Run ESLint
npm run lint

Loading the Extension in Chrome

1. Build the extension:

npm run build:dev  # or build:prod

2. Open Chrome and navigate to chrome://extensions/
3. Enable "Developer mode" (toggle in the top-right corner)
4. Click "Load unpacked" and select:
   • dist/dev/ for development version
   • dist/prod/ for production version
5. The extension should now be installed and ready to use

Note: You can load both dev and prod versions simultaneously for testing.

Development vs Production Builds

Feature	Development (dist/dev/)	Production (dist/prod/)
Extension Name	"Japanese Grammar Checker - DEV"	"Japanese Grammar Checker"
Icon	Blue with "DEV" label	Original icon
Storage Namespace	dev_*	Default
Extension ID	Unique (via manifest.key)	Unique

This allows you to test changes without affecting your production data.

Usage

1. Click on the extension icon in the Chrome toolbar
2. The sidebar will open with the Japanese Grammar Checker
3. Enter Japanese text in the input area
4. Click "チェック" to check the grammar
5. View the corrected text in the result area
6. Use the copy button to copy the corrected text
7. View and manage your history in the history section

Configuration

Environment Variables

Create a .env file in the project root (or copy from .env.example):

# AI Model Configuration
VITE_OPENAI_API_MODEL=gpt-4o-mini

Available models:

• gpt-4o - Latest GPT-4 Omni model (best quality, higher cost)
• gpt-4o-mini - Smaller GPT-4 Omni (recommended, balanced performance/cost)
• gpt-4-turbo - GPT-4 Turbo
• gpt-3.5-turbo - Faster, lower cost

API Key Setup

The OpenAI API key is not stored in the .env file for security reasons. Instead:

1. Install and open the extension
2. Click the extension icon to open the sidebar
3. Click the settings (⚙️) button
4. Select "APIキーを設定" (Set API Key)
5. Enter your OpenAI API key

The API key is stored securely in Chrome's local storage and is only accessible by the extension.

API Key Persistence

Important: This extension uses a fixed extension ID (via manifest.key) to ensure your API key and settings persist across Chrome updates and extension reinstalls.

Backup Your Settings:

• Click settings (⚙️) → "設定をエクスポート" to backup your API key and history
• Store the backup file in a safe location
• If your API key is lost after a Chrome update, use "設定をインポート" to restore it

Protection Mechanisms:

• Fixed extension ID prevents data loss during updates
• Automatic detection and notification if API key is missing
• Settings backup includes API key for manual recovery

See __IGNORE__/API_KEY_PERSISTENCE_FIX.md for technical details.

Architecture

Core Modules

• grammar.js: Grammar checking and text correction
• translation.js: Multi-language translation
• aiChat.js: AI-powered chat interface
• history.js: History management with filtering
• tabManager.js: Tab navigation management

Utilities

• api.js: OpenAI API client with error handling
• storage.js: Chrome storage abstraction
• config.js: Centralized configuration
• settings.js: Settings import/export

Milestone

2025.03.09 V1.0.0

2025.04.04 V2.0.0

• Add UT Framework

日本語文法チェッカー (Japanese Grammar Checker)

日本語の文法チェック、翻訳、および AI チャット機能を提供するウェブアプリケーションです。

機能

• 文法チェック: 日本語の文章を入力して、文法的な間違いを修正します。より自然で適切な表現に改善します。
• 翻訳: 日本語から他の言語への翻訳、または他の言語から日本語への翻訳を行います。
• AI チャット: 日本語学習に関する質問や、一般的な日本語の使い方について質問できます。

開発

依存関係のインストール

npm install

開発サーバーの起動

npm run dev

ビルド

npm run build

テスト

テストを実行するには：

npm test

特定のテストファイルのみを実行するには：

npm test -- tests/utils/api.test.js

ウォッチモードでテストを実行するには：

npm run test:watch

カバレッジレポートを生成するには：

npm run test:coverage

構成

このアプリケーションは以下のモジュールで構成されています：

• 文法チェック: 日本語の文法と表現を検証し改善します。
• 翻訳: 複数の言語間で翻訳を行います。
• AI チャット: 日本語に関する様々な質問に回答します。
• 履歴管理: 全ての操作履歴を保存、表示、フィルタリングします。

ライセンス

MIT