EasyCalcCheck — CalcCheck用記号自動変換拡張

Tool
EasyCalcCheck — CalcCheck用記号自動変換拡張

EasyCalcCheck — CalcCheck用記号自動変換拡張

CalcCheckに入力する際に、よく使う3つの記号を自動で置換するシンプルなChrome拡張。等号や角括弧の代替記号（"=" → "≡", "<" → "⟨", ">" → "⟩"）を入力時に即座に変換し、数式や集合表記を効率よく整形できます。軽量で導入が簡単なため、Math系の投稿や回答作成に役立ちます。拡張はcontent scriptでページに注入して動作します（manifestやポップアップUIも同梱）。インストールも開発者モードから手動で読み込むだけです。

https://github.com/umara25/EasyCalcCheck

概要

EasyCalcCheckは、オンラインのCalcCheckで数式や式を入力する際に頻繁に使われる3種類の記号を自動で置換する軽量なChrome拡張です。具体的には、キーボードで入力した”=“を同値を表す”≡“に、”<“を左角括弧”⟨“に、”>“を右角括弧”⟩“にそれぞれ変換します。ページ内のテキスト入力欄やtextarea、contenteditable要素に対して動作するように設計され、導入も簡単で、コード量は非常に小さく保たれています。CalcCheck上で数式や内積・角括弧表記を多用するユーザーに向いたユーティリティです。

GitHub

リポジトリの統計情報

  • スター数: 3
  • フォーク数: 0
  • ウォッチャー数: 3
  • コミット数: 8
  • ファイル数: 4
  • メインの言語: HTML

主な特徴

  • 入力時に自動で3つの記号を別の記号に即時変換
  • textareaや入力欄に対する軽量なcontent script実装
  • シンプルなポップアップ（popup.html）を含む手早い導入方法
  • 最小限のコードで動作するため拡張の負荷が低い

技術的なポイント

この拡張は主にcontent.js（content script）で実装された文字置換ロジックに依存しています。一般的な実装方針としては、対象ページ（CalcCheckの入力欄）に対してイベントリスナーを登録し、入力イベントやキーイベントを監視して、直前に入力された文字をチェックして必要なら置換する、という流れです。

具体的な注意点と実装上の工夫：

  • 対象要素の種類：textareaやinput要素だけでなく、投稿欄がcontenteditableなdivである場合もあるため、querySelectorで両方を検出してハンドラをアタッチする実装が有効です。content.jsはDOMの変化を検知して動的に生成された入力欄にも対応できます（MutationObserverの利用）。
  • イベントの選択：keydown/keyupだけでなくinputイベントを使うことで、コピーペーストやIME入力後の確定にも対応しやすくなります。inputイベント発火時に直近の文字を確認して置換を行う実装が安定します。
  • カーソル位置と選択範囲：textareaやinputではselectionStart/selectionEndでカーソル位置を保持できます。置換時はカーソルが移動しないようにselectionStart/Endを適切に再設定する必要があります。contenteditableではRangeとSelection APIを使い、現在のキャレット位置を維持してからテキストノードを書き換えると良いでしょう。
  • 部分置換の戦略：常にテキスト全体を再レンダリングするのではなく、直前に入力された1文字だけを置換する処理にすることで、パフォーマンスとユーザー体験が向上します。たとえば、最後の1文字が”=“ならそれを”≡“に置換する、といった判定です。
  • マニフェストと権限：manifest.jsonにcontent_scriptsのマッチパターンを限定的に指定して、CalcCheckのURLにのみ注入するようにするとセキュリティとプライバシーの観点で望ましいです。manifest v3ではservice worker（バックグラウンド）とcontent scriptsの分離が必要な点に留意してください。
  • 多言語・IME対応：日本語入力（IME）中に誤って変換が走るのを避けるため、IME確定前には置換を行わないようにinputTypeやcompositionイベント（compositionstart/compositionend）で状態を管理することが推奨されます。
  • 拡張の拡張性：現在は3種類の置換のみですが、変換テーブルをJSON化してオプションUIから追加・編集できるようにすると汎用性が上がります。popup.htmlを使って有効/無効切替やホワイトリスト管理を行うのが実装上シンプルです。

このリポジトリはファイル数が少なく、実装自体も学習コストが低いため、拡張機能の入門や特定サイト向けの簡易ユーティリティ作成の良いサンプルになります。注意深くイベントハンドリングとカーソル管理を設計すれば、利用者に違和感のない自然な入力体験を提供できます。

プロジェクトの構成

主要なファイルとディレクトリ：

  • README.md: file
  • content.js: file
  • manifest.json: file
  • popup.html: file

まとめ

CalcCheckで数式入力を多用する人に便利な、軽量ですぐ使える記号自動置換拡張。

リポジトリ情報：

READMEの抜粋：

CalcCheck Math Symbols Auto-Replacer

A simple Chrome extension that automatically replaces three common symbols when writing on CalcCheck.

Features

  • Automatic Symbol Replacement: Type symbols and they automatically transform:
    • = → ≡ (equivalence)
    • < → ⟨ (left angle bracket)
    • > → ⟩ (right angle bracket)

Installation

  1. Download or clone this repository
  2. Open Chrome and go to chrome://extensions/
  3. Enable “Developer mode” in the top right
  4. Click “Load …