CRX id
bmnjhbmgdefcoggdmaiepncekdiaobjl
bmnjhbmgdefcoggdmaiepncekdiaobjl
Description from extension meta
백준 문제 풀이를 Tistory 블로그 포스팅용으로 정리해주는 확장 프로그램
Image from store
Description from store
# 백준 To Tistory
백준 문제 풀이를 Tistory 블로그 포스팅용으로 자동으로 정리해주는 크롬 확장 프로그램입니다.
## 🎯 주요 기능
- 🚀 **페이지 이동 없이** 백준 문제 정보 자동 추출
- 📝 사용자 해설 입력 및 관리
- 💻 소스 코드 자동 수집
- 📋 Tistory 포스팅용 내용 자동 생성 (마크다운 형식)
- 📋 클립보드에 자동 복사
## 🛠️ 기술적 특징
- **Request 기반 데이터 수집**: 페이지 이동 없이 `fetch()` API로 HTML 요청
- **DOMParser 활용**: HTML 파싱으로 정확한 데이터 추출
- **데이터 손실 방지**: 모든 수집 과정에서 데이터 보존
- **빠른 처리**: 여러 페이지 동시 요청으로 효율적인 데이터 수집
## 📱 사용법
### 1. 확장 프로그램 설치
1. 이 프로젝트를 다운로드
2. 크롬에서 `chrome://extensions/` 접속
3. "개발자 모드" 활성화 (우측 상단 토글)
4. "압축해제된 확장 프로그램을 로드합니다" 클릭
5. 프로젝트 폴더 선택
### 2. 백준 문제 풀이 완료 후
1. 백준 사이트에서 확장 프로그램 아이콘 클릭
2. **"문제 정보 추출"** 버튼 클릭
3. 자동으로 문제 정보와 소스 코드 수집
4. 해설 작성
5. **"내용 작성"** 버튼 클릭
6. 생성된 내용이 클립보드에 복사됨
7. Tistory에 붙여넣기
## 🔄 동작 원리
### 데이터 수집 과정
1. **Status 페이지**: 문제 번호 및 제출 정보 추출
2. **Request 요청**: 문제 페이지 HTML 요청 → 문제 상세 정보 파싱
3. **Request 요청**: 소스 코드 페이지 HTML 요청 → 코드 추출
4. **데이터 통합**: 모든 정보를 하나로 통합하여 포스팅 내용 생성
### 장점
- ✅ 페이지 이동 없음 (사용자 경험 향상)
- ✅ 데이터 손실 방지
- ✅ 빠른 처리 속도
- ✅ 안정적인 데이터 수집
## 📁 파일 구조
```
beakjoonToblog/
├── manifest.json # 확장 프로그램 설정 및 권한
├── popup.html # 팝업 UI (작은 tooltip 형태)
├── popup.js # 팝업 동작 로직 및 데이터 관리
├── content.js # 백준 페이지 데이터 추출 (Request 방식)
├── background.js # 백그라운드 서비스 워커
├── styles.css # UI 스타일링
├── icons/ # 아이콘 파일들
│ └── icon256.png # 256x256 아이콘
└── README.md # 이 파일
```
## 🔐 권한 설명
- **`activeTab`**: 현재 활성 탭에 접근하여 백준 사이트 감지
- **`storage`**: 문제 정보, 소스 코드, 사용자 설정 저장
- **`clipboardWrite`**: 생성된 포스팅 내용을 클립보드에 복사
- **`host_permissions`**: 백준 사이트(`acmicpc.net`)에서만 작동
## 🌐 지원 사이트
- **백준 온라인 저지** (`https://www.acmicpc.net/*`)
- 백준 문제 풀이 완료 후 제출 현황 페이지에서 사용
## 📊 지원하는 언어
- Python, Java, C++, C, JavaScript
- Go, Rust, Kotlin, Swift
- 기타 백준에서 지원하는 모든 언어
## 📝 포스팅 형식
### 제목 형식
```
[언어] 문제번호 - 문제제목
```
### 내용 구성
1. **문제**: 문제 설명
2. **입력**: 입력 조건
3. **출력**: 출력 조건
4. **해설**: 사용자가 작성한 해설
5. **소스 코드**: 자동으로 수집된 코드
### 마크다운 예시
```markdown
# [Python] 10986 - 나머지 합
## 문제
수 N개 A1, A2, ..., AN이 주어진다...
## 입력
첫째 줄에 N과 M이 주어진다...
## 출력
첫째 줄에 연속된 부분 구간의 합이 M으로 나누어 떨어지는 구간의 개수를 출력한다...
## 해설
사용자가 작성한 해설 내용...
## 소스 코드
```python
n, m = map(int, input().split())
# ... 코드 내용
```
```
## 🚨 주의사항
- 백준 사이트에서만 작동합니다
- 로그인이 필요한 경우 소스 코드 추출이 제한될 수 있습니다
- 생성된 내용은 마크다운 형식입니다
- 인터넷 연결이 필요합니다 (HTML 요청을 위해)
## 🐛 문제 해결
### 확장 프로그램이 작동하지 않는 경우
1. 백준 사이트(`acmicpc.net`)에서 사용하고 있는지 확인
2. 확장 프로그램이 활성화되어 있는지 확인
3. 개발자 도구 콘솔에서 오류 메시지 확인
### 데이터 추출이 안 되는 경우
1. 백준 제출 현황 페이지에서 사용하고 있는지 확인
2. 문제를 풀고 제출한 후 사용하는지 확인
3. 네트워크 연결 상태 확인
## 🔄 업데이트 내역
- **v1.0**: 초기 버전 - Request 기반 데이터 수집 구현
- 페이지 이동 없이 안정적인 데이터 수집
- 마크다운 형식의 포스팅 내용 자동 생성
## 📄 라이선스
이 프로젝트는 MIT 라이선스 하에 배포됩니다.
---
**백준 To Tistory**로 백준 문제 풀이를 쉽게 Tistory에 포스팅하세요! 🚀