Grid Chord Visualizer

About

# Grid Chord Visualizer (English Description)

A Chrome extension that automatically displays chord diagrams for grid
controllers (Novation Launchpad, Ableton Push/Move, etc.) on chord chart
websites.

## Key Features

### **Supported Sites**

- E-Chords (English)
- ChordWiki (Japanese)
- U-FRET (Japanese)

### **Customizable Display Settings**

- SVG size adjustment
- Color presets (with custom color support)
- Pad display modes (Note names, intervals, tensions, etc.)
- Grid layouts (mainly targeting Perfect 4th Layout 8×8, 4×8)
  - Perfect 5th, Diminished 5th (Augmented 4th), Major 3rd, Minor 3rd settings
    are also available
- Pitch shift (Transpose the entire grid layout up or down)
- Auto Focus (Beginner-friendly: highlights common chord positions, for Perfect
  4th Layout 8×8)
  - Note: This feature may not work well with complex chords

### **Convenient Features**

- Toggle between automatic/manual execution on page load
- Chord summary display (inline/panel display, duplicate removal)
- Enlarged display on hover
- Relative (Roman numeral) degree display from selected chord
  - Click: I → VI → (clear)
  - Shift + Click: V → IV → III → II → VII → (clear)

## How to Use

1. Install the extension
2. (Recommended) Open chrome://extensions/ and enable "Pin to toolbar"
3. Open a chord chart page on a supported site
4. Chord diagrams will automatically appear near chord names (in inline display
   mode)
5. Click the toolbar icon to customize display settings

## Privacy

This extension only works on supported sites. Settings are stored only in your
browser and no data is sent to external servers. We do not collect personal
information or share information with third parties.



# Grid Chord Visualizer （日本語ユーザー向け説明）

コード譜サイト上のコード名にグリッドコントローラー(Novation Launchpad、Ableton
Push/Move等)用のコードダイアグラムを自動的に追加するためのChrome拡張機能です。

## 主な機能

### **対応サイト**

- E-Chords (英語)
- ChordWiki (日本語)
- U-FRET (日本語)

### **カスタマイズ可能な表示設定**

- SVGサイズ調整
- カラープリセット（カスタムカラー作成可能）
- パッド表示モード (音名、インターバル、テンション等)
- グリッドレイアウト (主に Perfect 4th Layout 8×8、4×8を想定)
  - Perfect 5th、Diminished 5th(Augmented 4th)、Major 3rd、Minor 3rdの設定も可能
- ピッチシフト (グリッドレイアウトの音程をずらす機能)
- オートフォーカス (初心者向け: コードを押さえやすい場所を強調表示、Perfect 4th
  Layout 8×8用)
  - ※この機能は複雑なテンションコードでは上手く機能しません

### **便利な機能**

- ページ読み込み時の自動実行/手動実行の切り替え
- コードサマリー表示 (インライン/パネル表示、重複排除)
- ホバー時の拡大表示
- 選択したコードを基準に相対的なディグリー（度数）を表示する機能
  - クリック：Ⅰ→Ⅵ→(クリア)
  - シフト＋クリック：Ⅴ→Ⅳ→Ⅲ→Ⅱ→Ⅶ→(クリア)

## 使い方

1. 拡張機能をインストール
2. (推奨) chrome://extensions/
   で、このプラグインの詳細を開いて『ツールバーに固定する』を有効にする
3. 対応サイトでコード譜ページを開く
4. コード名の近くに自動的にコードダイアグラムが表示されます (inline表示時)
5. ツールバーアイコンをクリックして、表示設定をカスタマイズできます
   ※設定がうまく反映されない場合は、ページをリロードしてください

## プライバシー

この拡張機能は対応サイト上でのみ動作します。
設定情報はお使いのブラウザ内にのみ保存され、外部サーバーへのデータ送信は一切行いません。
個人情報の収集や第三者への情報提供も行いません。