Một số tính năng tạm thời bị vô hiệu hóa trong khi chúng tôi bảo trì trang web. Chúng tôi sẽ hoạt động đầy đủ lại nhanh thôi.

image2n8n bởi BoniK

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

Thử nghiệm

Có sẵn trên Firefox dành cho Android™

0 (0 đánh giá)

1 người dùng

Tải xuống Firefox và tải tiện ích mở rộng

Tải xuống tập tin

Quét mã QR để mở tiện ích mở rộng này trong Firefox dành cho Android

Về tiện ích mở rộng này

[ 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.

Được xếp hạng 0 (bởi 1 người dùng)

Hỗ trợ nhà phát triển này

Nhà phát triển của tiện ích mở rộng này yêu cầu bạn giúp hỗ trợ sự phát triển liên tục của nó bằng cách đóng góp nhỏ.

Đóng góp ngay bây giờ

image2n8n bởi BoniK

Quyền hạn bắt buộc:

Quyền hạn tùy chọn:

Thu thập dữ liệu: