📚 Reference Helper - Chrome Extension

블로그 글 작성 시 참고 자료를 효율적으로 관리하고 자동으로 삽입할 수 있는 크롬 익스텐션입니다.

✨ 주요 기능

1. 참고 자료 수집

텍스트 선택 + 우클릭: 선택한 텍스트와 함께 참고 목록에 추가
키보드 단축키 (Cmd/Ctrl + Shift + E): 현재 페이지를 설정한 기본 목록에 추가
중복 자동 방지: 같은 URL은 한 번만 저장되며, 중복 시도 시 알림 표시
복사 이벤트 추적: 텍스트 복사 시 자동으로 복사 기록에 저장
- 입력 폼(textarea, input, contenteditable)에서의 복사는 제외
- 읽기 중 복사한 내용만 기록
- 🔒 민감한 데이터 자동 필터링: API 키, 비밀번호, 토큰 등 감지 시 저장 안 함
- ⚠️ 기본값 OFF (보안을 위해 명시적 활성화 필요)
방문 기록 자동 추적: 모든 웹사이트에서 20초 이상 머물면 자동 저장
- 글 작성/수정 페이지는 자동 제외 (Tistory, Velog, Medium, Brunch)
- 보관 기간 설정: 1~90일 (기본 14일)
- 제외 도메인: *.amazon.com, *.shopping.* 등 패턴으로 제외 가능

2. 다중 목록 관리

무제한 커스텀 목록 생성 및 관리
기본 목록 설정 (⭐): 팝업에서 별 버튼으로 간편하게 설정
- 단축키(Ctrl+Shift+E)로 추가할 목록 지정
- 현재 기본 목록은 금색 ⭐으로 표시
목록 삭제 기능 (기본 목록 제외)
순서 조정: ↑↓ 버튼으로 항목 순서 변경
목록 간 이동: 아이템을 다른 목록으로 간편하게 이동
항목 삭제: 참고 목록, 방문 기록, 복사 기록 모두 삭제 가능
일괄 선택 및 작업: 체크박스로 여러 항목 선택 후 일괄 삭제/이동
방문 기록 (최근 100개, 설정된 기간까지)
복사 기록 (최근 100개)

3. 블로그 작성 지원

지원 플랫폼:
- ✅ Tistory (작성/수정: *.tistory.com/manage/newpost*)
- ✅ Velog (작성/수정: velog.io/write*)
- ✅ Medium (medium.com/new-story, medium.com/p/*/edit)
- ✅ Brunch (brunch.co.kr/@@*/write)
자동 팝업: 글쓰기 페이지 방문 시 팝업이 자동으로 열림
- 설정에서 자동 열기 ON/OFF 가능
"+ 현재 페이지" 버튼: 팝업 우측 상단에서 현재 방문 중인 페이지 추가
검색 기능
목록 간 전환

4. 참고 목록 내보내기 및 삽입

Markdown 형식으로 변환 및 복사/삽입
HTML 형식으로 변환 및 복사/삽입
우클릭 메뉴에서 바로 붙여넣기
키보드 단축키 (Cmd/Ctrl + Shift + L): 참고 목록 붙여넣기
범용 에디터 지원: 모든 웹사이트의 에디터에서 작동
- CodeMirror, ProseMirror, Textarea, ContentEditable 등
- Notion, Google Docs, Gmail 등 어디서든 사용 가능
- 삽입 실패 시 자동으로 클립보드에 복사
템플릿 커스터마이징 가능

5. 데이터 관리

Chrome Sync Storage로 크로스 디바이스 동기화
JSON 백업/복원 기능
전체 데이터 삭제 기능
자동 중복 제거

🚀 설치 방법

Chrome Web Store에서 설치 (출시 후)

Chrome Web Store에서 "Reference Helper" 검색
"Chrome에 추가" 클릭

개발자 모드로 설치

이 저장소를 클론하거나 다운로드

git clone https://github.com/yourusername/reference-helper.git

Chrome 브라우저에서 chrome://extensions/ 접속
우측 상단의 "개발자 모드" 활성화
"압축해제된 확장 프로그램을 로드합니다" 클릭
reference-helper 폴더 선택

📖 사용 방법

참고 자료 추가하기

방법 1: 우클릭 메뉴

웹 페이지에서 텍스트 선택 (선택 사항)
우클릭 → "📌 참고 목록에 추가" → 원하는 목록 선택
중복된 URL은 추가되지 않으며 알림 표시

방법 2: 키보드 단축키

Cmd/Ctrl + Shift + E: 현재 페이지를 기본 목록에 추가
- 설정에서 기본 목록 변경 가능

방법 3: 자동 추적

방문 기록: 20초 이상 머문 페이지는 자동으로 저장
- 설정에서 제외 도메인 패턴 지정 가능
- 글 작성 페이지는 자동 제외
복사 기록: 텍스트 복사 시 자동 저장
- 읽기 중 복사만 기록 (입력 폼 제외)

목록 관리하기

새 목록 만들기

익스텐션 아이콘 클릭
"+" 버튼 클릭
목록 이름 입력 후 생성

목록 삭제하기

삭제할 목록 선택
🗑️ 버튼 클릭
확인 (기본 목록은 삭제 불가)

항목 순서 변경

↑ 버튼: 위로 이동
↓ 버튼: 아래로 이동

항목을 다른 목록으로 이동

항목의 "이동" 버튼 클릭
이동할 목록 번호 입력
완료!

항목 삭제

참고 목록, 방문 기록, 복사 기록 모두 "삭제" 버튼으로 제거 가능

기본 목록 설정 (⭐ 단축키용)

팝업에서 기본으로 사용할 목록 선택 (예: "JPA 공부")
⭐ 별 버튼 클릭
별이 금색으로 변하면 설정 완료! ✨
이제 Ctrl+Shift+E 단축키로 추가하면 선택한 목록에 자동 추가

확인 방법:

현재 기본 목록 = ⭐ 금색
다른 목록 = ⭐ 회색 (비활성)

블로그 글 작성하기

Tistory, Velog, Brunch, Medium 등의 글쓰기 페이지 접속
팝업이 자동으로 열림 (설정에서 제어 가능)
팝업에서 참고 목록 확인 및 검색
우측 상단 "+ 현재 페이지" 버튼으로 현재 방문 중인 페이지 추가
"📝 Markdown 삽입" 또는 "🌐 HTML 삽입" 버튼 클릭
참고 목록이 자동으로 에디터에 삽입됨

참고 목록 붙여넣기 (범용)

방법 1: 우클릭 메뉴

에디터에서 커서 위치 지정
우클릭 → "📋 참고 목록 붙여넣기"

방법 2: 키보드 단축키

Cmd/Ctrl + Shift + L: 기본 목록을 Markdown 형식으로 붙여넣기
모든 웹사이트에서 작동 (Notion, Google Docs, Gmail 등)
삽입 실패 시 자동으로 클립보드에 복사

우클릭 메뉴 바로가기

📚 목록 보기: 팝업 열기 (Ctrl+Shift+P)
📋 참고 목록 붙여넣기: 기본 목록 붙여넣기 (Ctrl+Shift+L)
📌 참고 목록에 추가: 선택한 목록에 추가 (Ctrl+Shift+E)

설정 커스터마이징

익스텐션 아이콘 클릭 → 우측 상단 ⚙️ 버튼 클릭
설정 페이지에서 조정 가능:
- 일반 설정
  - 복사/방문 추적 ON/OFF
  - 글 작성 페이지에서 팝업 자동 열기
  - 자동 번호 매기기
- 방문 추적 설정
  - 방문 기록 보관 기간 (1-90일, 기본 14일)
  - 제외 도메인 패턴 (예: *.amazon.com, localhost)
- Markdown/HTML 템플릿 편집
- 데이터 관리
  - 백업 (JSON 다운로드)
  - 복원 (JSON 업로드)
  - 전체 삭제

⌨️ 키보드 단축키

단축키	기능
`Cmd/Ctrl + Shift + E`	현재 페이지를 기본 목록에 추가
`Cmd/Ctrl + Shift + P`	Reference Helper 팝업 열기
`Cmd/Ctrl + Shift + L`	참고 목록 붙여넣기 (모든 사이트)

단축키는 chrome://extensions/shortcuts에서 변경 가능합니다.

🛠️ 프로젝트 구조

reference-helper/
├── manifest.json                  # 익스텐션 설정 (Manifest V3)
├── background/
│   └── service-worker.js         # 백그라운드 서비스 워커
├── content-scripts/
│   ├── capture-handler.js        # 텍스트 선택 및 복사 감지
│   ├── visit-tracker.js          # 방문 페이지 추적 (20초 필터)
│   ├── writing-panel.js          # 플로팅 패널 UI
│   └── editor-integration.js     # 범용 에디터 자동 삽입
├── popup/
│   ├── popup.html                # 팝업 UI
│   ├── popup.js                  # 팝업 로직
│   └── popup.css                 # 팝업 스타일
├── options/
│   ├── options.html              # 설정 페이지
│   ├── options.js                # 설정 로직
│   └── options.css               # 설정 스타일
├── core/
│   ├── storage-manager.js        # 데이터 관리
│   ├── reference-item.js         # 참고 항목 모델
│   ├── export-manager.js         # 내보내기 기능
│   └── numbering-manager.js      # 번호 관리
├── utils/
│   ├── dom-helpers.js            # DOM 조작 유틸리티
│   ├── url-helpers.js            # URL 처리 유틸리티
│   └── sensitive-data-detector.js # 민감한 데이터 탐지
├── styles/
│   └── common.css                # 공통 스타일
└── icons/
    ├── icon-16.png
    ├── icon-48.png
    └── icon-128.png

🎨 템플릿 커스터마이징

Markdown 템플릿

리스트 템플릿 (기본값):

## 참고
{{items}}

항목 템플릿 (기본값):

{{number}}. [{{title}}]({{url}}){{#selectedText}} - "{{selectedText}}"{{/selectedText}}

HTML 템플릿

리스트 템플릿 (기본값):

<h2>참고</h2>
<ol>
{{items}}
</ol>

항목 템플릿 (기본값):

<li><a href="{{url}}">{{title}}</a>{{#selectedText}} - "{{selectedText}}"{{/selectedText}}</li>

사용 가능한 플레이스홀더

플레이스홀더	설명
`{{number}}`	참고 번호 (1, 2, 3, ...)
`{{title}}`	페이지 제목
`{{url}}`	페이지 URL
`{{selectedText}}`	선택한 텍스트
`{{#selectedText}}...{{/selectedText}}`	선택한 텍스트가 있을 때만 표시 (조건부 렌더링)

🔧 개발

필요 조건

Chrome 브라우저 (최신 버전)
기본적인 JavaScript, HTML, CSS 지식

로컬 개발

코드 수정
Chrome의 chrome://extensions/에서 "새로고침" 버튼 클릭
테스트

디버깅

백그라운드 스크립트: "Service Worker" 링크 클릭
팝업: 팝업 우클릭 → "검사"
Content Scripts: 페이지에서 F12 → Console탭에서 [Reference Helper] 로그 확인

📝 주요 변경사항

v1.1.0 (현재)

✅ 🔒 민감한 데이터 보안 강화
- API 키, JWT 토큰, 비밀번호, 신용카드 번호, 개인키 등 자동 감지
- 민감한 데이터 복사 시 자동으로 복사 기록에서 제외
- 설정에서 민감한 데이터 필터링 ON/OFF 가능
✅ 복사 추적 기본값 OFF: 보안을 위해 명시적으로 활성화 필요
✅ 일괄 선택 및 삭제: 내 목록, 방문 기록, 복사 기록에서 체크박스로 여러 항목 선택 후 삭제
✅ 일괄 이동: 내 목록에서 체크박스로 선택한 항목들을 다른 목록으로 일괄 이동
✅ 개인정보 보호 정책 추가: PRIVACY_POLICY.md 문서화

v1.0.0

✅ 기본 참고 목록 관리
✅ Markdown/HTML 내보내기
✅ 4개 블로그 플랫폼 지원
✅ 글 작성 페이지 자동 팝업: 블로그 작성 페이지 방문 시 자동으로 팝업 열림
✅ "+ 현재 페이지" 버튼: 팝업에서 현재 페이지 빠르게 추가
✅ 방문/복사 기록 추적
✅ 중복 URL 자동 방지 (전체 목록 검색)
✅ 목록 순서 조정 (↑↓)
✅ 목록 간 아이템 이동
✅ 모든 탭에서 항목 삭제 가능
✅ 방문 기록 보관 기간 설정 (1-90일, 기본 14일)
✅ 기본 목록 설정 (⭐ 팝업에서)
✅ 범용 에디터 지원 (모든 웹사이트)
✅ 입력 폼 복사 제외 (읽기 중 복사만 기록)
✅ 작성 페이지 방문 기록 제외
✅ 우클릭 메뉴에서 붙여넣기
✅ 키보드 단축키 3개 (E, P, L)
✅ 구체적인 토스트 메시지: 목록 이름 포함

🐛 알려진 이슈

일부 특수 에디터에서 자동 삽입이 작동하지 않을 수 있음 (Fallback: 클립보드 복사)

📝 TODO

참고 번호 관리 기능 완성 ([[1]], [[2]] 플레이스홀더)
다크모드 지원
성능 최적화
더 많은 에디터 지원 추가

📄 라이선스

MIT License

🤝 기여

이슈 및 PR을 환영합니다!

Fork the Project
Create your Feature Branch (git checkout -b feature/AmazingFeature)
Commit your Changes (git commit -m 'Add some AmazingFeature')
Push to the Branch (git push origin feature/AmazingFeature)
Open a Pull Request

📧 문의

문제가 있거나 제안 사항이 있으시면 이슈를 등록해주세요.

Made with ❤️ for bloggers and content creators

Name		Name	Last commit message	Last commit date
Latest commit History 17 Commits
background		background
content-scripts		content-scripts
core		core
icons		icons
options		options
popup		popup
styles		styles
utils		utils
.gitignore		.gitignore
FEATURE_SPEC.md		FEATURE_SPEC.md
LICENSE		LICENSE
PRIVACY_POLICY.md		PRIVACY_POLICY.md
README.md		README.md
manifest.json		manifest.json

License

bebeis/reference-helper

Folders and files

Latest commit

History

Repository files navigation

📚 Reference Helper - Chrome Extension

✨ 주요 기능

1. 참고 자료 수집

2. 다중 목록 관리

3. 블로그 작성 지원

4. 참고 목록 내보내기 및 삽입

5. 데이터 관리

🚀 설치 방법

Chrome Web Store에서 설치 (출시 후)

개발자 모드로 설치

📖 사용 방법

참고 자료 추가하기

방법 1: 우클릭 메뉴

방법 2: 키보드 단축키

방법 3: 자동 추적

목록 관리하기

새 목록 만들기

목록 삭제하기

항목 순서 변경

항목을 다른 목록으로 이동

항목 삭제

기본 목록 설정 (⭐ 단축키용)

블로그 글 작성하기

참고 목록 붙여넣기 (범용)

방법 1: 우클릭 메뉴

방법 2: 키보드 단축키

우클릭 메뉴 바로가기

설정 커스터마이징

⌨️ 키보드 단축키

🛠️ 프로젝트 구조

🎨 템플릿 커스터마이징

Markdown 템플릿

HTML 템플릿

사용 가능한 플레이스홀더

🔧 개발

필요 조건

로컬 개발

디버깅

📝 주요 변경사항

v1.1.0 (현재)

v1.0.0

🐛 알려진 이슈

📝 TODO

📄 라이선스

🤝 기여

📧 문의

About

Resources

License

Uh oh!

Stars

Watchers

Forks

Releases 3

Packages 0

Languages

Packages