FeHelper - 프론트엔드 도우미

---

기능 한눈에 보기

JSON 처리

기능	설명
JSON 포맷	자동/수동 포맷, 구문 강조, 접기/펼치기, 노드 경로, BigInt 무손실 정밀도
JSON 비교	두 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 주입 로직 개선(insertCSS로 잘못 사용된 API 대체)
• _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
• 위챗: 398824681
• 피드백: GitHub Issues

라이선스

MIT License

---