Nokre funksjonar er kortvarig utilgjengelege medan vi utfører rutinemessig vedlikehald. Vi kjem tilbake med full kapasitet om kort tid.

image2n8n av BoniK

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

Eksperimentell

Tilgjengeleg på Firefox for Android™

0 (0 omtalar)

1 brukar

Last ned Firefox og få utvidinga

Last ned fil

Skann QR-koden for å opne denne utvidinga i Firefox for Android

Om denne utvidinga

[ 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 개발자 모드)

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

전송 데이터 구조 (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.

Vurdert 0 av 0 meldarar

Støtt denne utviklaren

Utviklaren av denne utvidinga spør om du kan hjelpe til med å støtte den vidare utviklinga med eit lite pengebidrag.

Bidra no

image2n8n av BoniK

Påkravde løyve:

Valfrie løyve:

Datainnsamling: