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

---

機能一覧

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 に変更

---

インストール

ブラウザストア（推奨）

ブラウザ	インストール先
Chrome	Chrome Web Store
Edge	Microsoft Edge Add-ons
Firefox	Firefox Add-ons

ソースからインストール

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

コントリビューション

1. 本リポジトリを Fork する
2. ブランチを作成：git checkout -b feature/your-feature
3. 変更をコミット：git commit -m 'Add some feature'
4. プッシュ：git push origin feature/your-feature
5. Pull Request を作成する

---

連絡先

• 公式サイト：fehelper.com
• メール：xianliezhao@foxmail.com
• WeChat：398824681
• フィードバック：GitHub Issues

ライセンス

MIT License

---