FeHelper - フロントエンドヘルパー

**30+ の開発者向けツール | Chrome / Edge / Firefox ブラウザ拡張機能**
[](https://chrome.google.com/webstore/detail/pkgccpejnmalmdinmhkkfafefagiiiad)
[](https://chrome.google.com/webstore/detail/pkgccpejnmalmdinmhkkfafefagiiiad)
[](https://github.com/zxlie/FeHelper)
[](https://github.com/zxlie/FeHelper)
[](https://github.com/zxlie/FeHelper/actions)
**[中文](README.md) | [English](README_EN.md) | [한국어](README_KO.md)**
[公式サイト](https://fehelper.com) · [オンラインドキュメント](https://fehelper.com/docs.html) · [問題の報告](https://github.com/zxlie/FeHelper/issues)
機能一覧
JSON 処理
| 機能 |
説明 |
| JSON フォーマット |
自動/手動フォーマット、シンタックスハイライト、折りたたみ/展開、ノードパス、BigInt で精度を損なわない |
| JSON 比較 |
2 つの JSON の構造化された差分比較、差分をハイライト |
| JSON を Excel に |
JSON データをワンクリックで Excel 表に変換 |
エンコード/デコード
| 機能 |
説明 |
| Unicode |
中国語 ↔ \uXXXX の相互変換 |
| URL / UTF-8 / UTF-16 |
%XX / \xXX のエンコード/デコード |
| Base64 |
エンコードとデコード |
| Hex |
文字列 ↔ 16 進数 |
| MD5 / SHA1 |
ハッシュ計算 |
| Gzip |
CompressionStream API による圧縮/解凍 |
| JWT |
Header + Payload + Sign のデコード |
| Cookie |
JSON 形式に整形 |
| HTML エンティティ |
通常/深いエンコードとデコード |
| 文字列エスケープ |
\n \t \" などのエスケープ/アンエスケープ |
開発・デバッグ
| 機能 |
説明 |
| コード整形 |
JavaScript / CSS / HTML / XML / SQL のコードフォーマット |
| コード圧縮 |
HTML / JS / CSS の圧縮 |
| 正規表現 |
リアルタイムでのマッチと置換テスト |
| 簡易 Postman |
GET / POST / HEAD の API デバッグ |
| WebSocket |
WebSocket 接続テストとメッセージ解析 |
| ユーザースクリプト |
ページへのスクリプト注入 |
変換ツール
| 機能 |
説明 |
| タイムスタンプ変換 |
Unix ↔ 日付の相互変換、複数タイムゾーンの世界時計、Windows FILETIME の相互変換 |
| 基数変換 |
2/4/8/10/16 進数の相互変換、BigInt による超大整数の精度を損なわない変換 |
| 色変換 |
HEX / RGB / HSL / HSV の相互変換、透明度に対応 |
画像と生成
| 機能 |
説明 |
| QR コード |
生成(ロゴ・色・サイズのオプション)とスキャンによるデコード |
| バーコード |
Code128 / Code39 / EAN-13 / EAN-8 / UPC / ITF-14 |
| UUID / ID ジェネレーター |
UUID v4、スノーフレーク ID(生成 + 解析)、NanoID |
| 画像 Base64 |
画像 ↔ Base64 の相互エンコード |
| ウェブページのスクリーンショット |
表示領域 / 全ページのスクロールキャプチャ |
| カラーピッカー |
任意の要素から色値を取得 |
| SVG 変換 |
SVG ↔ PNG など形式の変換 |
その他のツール
| 機能 |
説明 |
| AI アシスタント |
コード最適化、設計案、資料検索 |
| Mock データ |
氏名、携帯電話、身分証、住所などのテストデータ生成 |
| ランダムパスワード |
長さ・文字種のカスタマイズ |
| メモ・付箋 |
カテゴリ別の管理、インポート/エクスポート |
| Markdown 変換 |
HTML → Markdown、PDF ダウンロード |
| ポスター作成 |
複数テンプレートのポスターデザイン |
| チャート作成 |
複数のチャート種類、データ可視化 |
| ページパフォーマンス |
ページ読み込み時間の分析 |
最近の更新
v2026.04 の主な改善
新機能
- バーコード生成(Code128 / EAN-13 / UPC など 6 形式)
- UUID v4 / スノーフレーク ID / NanoID ジェネレーター(新規ツールページ)
- Windows FILETIME ↔ 日付の相互変換
- 文字列エスケープ/アンエスケープのエンコード/デコード
- 基数変換の BigInt 対応(超大整数を精度を損なわずに)
セキュリティ強化
- プロジェクト全体で evalCore の動的実行を安全な方式に置き換え
- Toast / innerHTML における XSS 注入の修正
- Content Script の注入ロジックの最適化(誤用していた API を
insertCSS に置き換え)
_codeBeautify の fileType ホワイトリスト検証
コア修正
- JSON BigInt の精度を損なわない処理(純関数モジュール
json-utils.js)
- Service Worker のスリープ問題(
setTimeout を chrome.alarms に置き換え)
- Content Script を
document_idle + all_frames: false に変更し、Google Meet などのサイトでのクラッシュを修正
- タイムスタンプ
0 の検証修正
- コード整形における
let/const 構文の互換性
エンジニアリング
- 単体テスト:Vitest + 79 テストケース
- CI/CD:GitHub Actions による自動テスト
- ESLint によるコード規約
- 無効な依存関係・デッドコードの整理
- Babel の target を Chrome 58 → 100 に変更
インストール
ブラウザストア(推奨)
ソースからインストール
git clone https://github.com/zxlie/FeHelper.git
cd FeHelper
npm install
npm test # テストを実行
chrome://extensions/ を開く → デベロッパーモードを有効にする → パッケージ化されていない拡張機能を読み込む → apps ディレクトリを選択します。
オフラインインストール
Chrome-Stats から CRX または ZIP をダウンロードし、chrome://extensions/ ページにドラッグ&ドロップしてインストールします。
開発
npm install # 依存関係のインストール
npm test # Vitest 単体テストを実行
npm run test:watch # テストのウォッチモード
npm run test:coverage # カバレッジレポート
npx eslint apps/ # コード規約チェック
プロジェクト構成
FeHelper/
├── apps/ # 拡張機能のソース
│ ├── manifest.json # Chrome Extension MV3 マニフェスト
│ ├── background/ # Service Worker
│ ├── popup/ # ポップアップパネル
│ ├── options/ # 設定ページ + ツールマーケット
│ ├── json-format/ # JSON フォーマット
│ ├── en-decode/ # エンコード/デコード
│ ├── timestamp/ # タイムスタンプ
│ ├── trans-radix/ # 基数変換
│ ├── qr-code/ # QR コード + バーコード
│ ├── uuid-gen/ # UUID / スノーフレーク ID
│ ├── code-beautify/ # コード整形
│ └── ... # その他のツール
├── test/ # Vitest 単体テスト
├── .github/workflows/ # CI/CD
├── vitest.config.js
├── eslint.config.js
└── package.json
コントリビューション
- 本リポジトリを Fork する
- ブランチを作成:
git checkout -b feature/your-feature
- 変更をコミット:
git commit -m 'Add some feature'
- プッシュ:
git push origin feature/your-feature
- Pull Request を作成する
連絡先
ライセンス
MIT License
**FeHelper がお役に立ったら、Star をお願いします!**
[](https://star-history.com/#zxlie/FeHelper&Date)