image2n8n 作成者: BoniK

[ image2n8n - 웹페이지 이미지를 n8n으로 즉시 전송 ]

웹페이지의 이미지를 클릭 또는 터치하여 지정한 n8n Webhook URL로 즉시 전송해주는 Firefox 부가 기능(Add-on)입니다.

PC 파이어폭스(마우스 우클릭 콘텍스트 메뉴) 및 모바일 파이어폭스(이미지 모서리 전송 배지 Overlay)를 완벽하게 지원합니다.

전송 방식은 Base64, Binary (multipart/form-data), URL을 지원하며, 웹훅별 Basic Auth 인증과 Exif 메타데이터 / 파일명 편집 기능을 제공합니다.

주요 기능

• 다중 동적 콘텍스트 메뉴 지원 (PC)
• 설정 화면에서 등록한 기능 이름들이 마우스 우클릭 메뉴(이미지 업로드(to n8n))의 선택 옵션들로 동적 생성됩니다.
• 예: 이미지 분석 저장, 배경 제거 후 저장 등의 맞춤형 업로드 경로 설정 가능.
• 모바일/터치 지원 이미지 전송 배지 & 모바일 호환성 강화
• 스마트폰/태블릿 등 파이어폭스 모바일 환경에서 마우스 우클릭이 불가능한 한계를 극복하기 위해, 이미지 모서리에 터치 가능한 n8n 전송 배지(📤)를 지원합니다.
• Manifest V3 host_permissions 및 비동기 백그라운드 생명주기 처리가 적용되어 모바일 파이어폭스에서도 n8n 웹훅 전송이 안정적으로 동작합니다.
• 링크 이동, 더블탭 확대, 브라우저 기본 롱프레스(이미지 저장 등) 제스처와 충돌하지 않도록 정밀하게 설계되었습니다.
• 자동 감지 모드: PC에서는 배지가 숨겨져 깔끔한 우클릭 메뉴를 사용하고, 모바일/터치 기기에서만 자동으로 배지가 활성화됩니다.
• 배지 커스터마이징: 설정 페이지에서 배지 표시 여부(자동/항상/끄기), 크기(24px/30px/38px), 투명도(20%~100%), 부착 위치(우상단/좌상단/우하단/좌하단)를 자유롭게 조절하고 실시간 미리보기로 확인할 수 있습니다.
• 모달창 내 다중 웹훅 선택 지원
• 등록된 웹훅이 여러 개인 경우, 이미지 전송 모달창에서 대상 웹훅을 손쉽게 드롭다운으로 선택할 수 있습니다.
• 세련된 글래스모피즘 설정 UI
• 다크 모드 기반의 고품격 글래스모피즘(Glassmorphism) 설정 대시보드를 제공합니다.
• 직관적인 카드 추가 및 삭제 기능을 통해 웹훅 엔드포인트들을 쉽게 다중 관리할 수 있습니다.
• 독립된 Shadow DOM Toast 알림 & UI
• 웹페이지의 기존 스타일 시트(CSS)와 충돌하지 않도록 Shadow DOM 내부에 격리된 프리미엄 스타일의 모달 및 토스트 메시지를 화면에 띄워줍니다.
• 진행 중, 업로드 완료, 에러 메시지를 시각적으로 편리하게 확인할 수 있습니다.
• 상세 정보 및 메타데이터 전송
• 이미지 데이터뿐만 아니라 본문 웹페이지 주소(page_url), 원본/수정 파일명(filename), Exif 메타데이터(title, description)를 Payload에 포함하여 전송할 수 있습니다.
• 보안 심사 통과를 위한 안전한 코드 설계
• Firefox 애드온 서명 가이드라인을 준수하여 innerHTML 대신 안전한 DOM API 및 DOMParser를 활용한 데이터 바인딩 방식으로 구현되었습니다.

설치 및 실행 방법 (Firefox 개발자 모드)

1. 임시 부가 기능으로 로드하기
2. Firefox 브라우저 주소창에 about:debugging을 입력하여 디버깅 페이지로 이동합니다.
3. 좌측 메뉴에서 "이 Firefox" (This Firefox)를 클릭합니다.
4. 임시 부가 기능 섹션 아래에 있는 "임시 부가 기능 로드..." (Load Temporary Add-on...) 버튼을 클릭합니다.
5. 프로젝트 폴더의 manifest.json 파일을 선택하여 로드합니다.
6. 옵션 및 웹훅 설정하기
7. 로드된 image2n8n 카드에서 "설정" (Options) 버튼을 클릭하여 설정 탭을 엽니다.
8. "새 기능/웹훅 추가" 버튼을 눌러 원하는 메뉴 명칭과 대상 n8n 웹훅 주소를 입력합니다.
9. 모바일 & 이미지 전송 배지 설정:
10. 항상 표시 (기본값): PC 및 모바일 모든 환경에서 배지 표시
11. 자동 감지: 스마트폰/태블릿 등 터치 모바일 기기에서만 배지 표시
12. 사용 안 함: 배지를 끄고 우클릭 메뉴만 사용
13. 크기, 투명도, 위치를 취향에 맞게 조정
14. 설정 저장하기를 클릭하면 콘텍스트 메뉴 및 배지가 즉시 동적 갱신됩니다.

전송 데이터 구조 (Payload)

• JSON 모드 (Base64 또는 URL 전송 시)

{
"image_base64": "iVBORw0KGgoAAAANSUhEUgAA...", // 순수 Base64 인코딩 데이터 (URL 모드인 경우 image_url 필드)
"filename": "sunset_photo.jpg", // 추출 또는 수정한 파일 이름
"page_url": "https://example.com/blog/123", // 이미지가 위치해 있던 웹페이지 주소
"title": "석양 사진", // Exif 메타데이터 (옵션 활성화 시)
"description": "제주도 애월읍 해질녘" // Exif 메타데이터 (옵션 활성화 시)
}



• Binary 모드 (multipart/form-data)
• file: 바이너리 이미지 파일 Blob (image/jpeg, image/png 등 원본 MIME 타입)
• filename: 파일명
• page_url: 웹페이지 주소
• title, description: Exif 메타데이터 (옵션 활성화 시)

프로젝트 구조

• manifest.json: Extension Manifest V3 설정 파일
• background.js: 저장된 웹훅 설정들에 대한 우클릭 콘텍스트 메뉴의 동적 생성 및 갱신, n8n HTTP 전송 및 응답/실패 제어
• content.js: 웹페이지 내 이미지 감지 및 배지(Badge) 오버레이 렌더링, 업로드 모달창, Shadow DOM 기반 토스트 UI
• options.html / options.js: 글래스모피즘 설정 대시보드 UI (웹훅 리스트 관리, 배지 커스터마이징 및 실시간 미리보기)
• exifreader.js: 이미지 Exif 메타데이터 파싱 라이브러리

라이선스
MIT License.