browsa / 브라우저 사이드 패널 AI

페이지는 그대로 두고,바로 옆에서 물어보세요.

페이지를 내 AI와의 대화로 가져오세요.

Chrome에 추가 ↗ 시작하기 →

Chrome / Edge · 소스 설치도 가능
무료 확장 프로그램. 모델이나 에이전트는 내 것을 연결하세요.

MIT 오픈 소스 ↗ 모델은 직접 선택 설정은 로컬 저장

아티클 동영상 논문

🔒youtube.com/watch?v=8jPQjjsBbIc

▶YouTube 검색…

Blue Planet II · Episode 1 – One Ocean (다큐멘터리 전편)

BBC Earth 구독 · 조회수 1200만회 · 5일 전

얕은 바다부터 심해까지, 바다의 가장 숨겨진 구석을 탐험합니다: 생체 발광 생물, 무리지어 사냥하는 혹고래, 완전한 어둠 속의 생명. 우리는 달 표면보다 바다를 덜 알고 있습니다.

18:42Blue Planet II · Ep.2 – 심해

심해 · 조회수 410만회

21:07해양 생체발광 완전 정복

생체발광 · 조회수 89만회

15:30혹고래는 거품 그물로 어떻게 사냥할까

거품 그물 사냥 · 조회수 230만회

📎 첨부됨: 《Blue Planet II》Ep.1 – One Ocean

/summarize 핵심 내용, 타임스탬프와 함께

자막 읽는 중…

One Ocean · 핵심 장면

🌊 바다의 규모를 소개합니다 — 달보다 덜 알려진 세계[00:12]

✨ 생체 발광은 심해 곳곳에서 먹이 유인과 위장에 쓰입니다[03:40]

🐋 혹고래는 거품 그물로 협동 사냥을 합니다[08:15]

🐙 심해 생물은 압력과 어둠에 극단적으로 적응해 왔습니다[11:48]

🌍 마무리: 인간 활동이 바다 생태계를 재편하고 있습니다[15:02]

무엇이든 물어보세요… 📎로 현재 페이지 첨부

동영상 노트: 답변에는 클릭 가능한 [mm:ss] 타임스탬프가 붙어, 클릭하면 해당 순간으로 이동합니다.

🔒dev.to/sidepanel-ai/read-anywhere-ask-anywhere

DEV 포스트 팟캐스트 동영상 태그 아티클 검색…

AI · 브라우저

읽는 모든 페이지 곁에 AI 코파일럿을

Sarah Dev · 12분 분량

페이지 텍스트를 LLM에 넣는 것은 쉽지만, 페이지를 진정으로 '이해'하게 만드는 일은 어렵습니다. 우리는 3단 계단식 추출을 사용합니다. 먼저 Readability로 깨끗한 본문을 가져오고, 다음으로 구조를 보존하는 DOM 트리, 마지막으로 전체 텍스트를 폴백으로 씁니다. 주요 사이트에서는 페이지가 이미 불러온 구조화 데이터 — 자막, 댓글, 기사 원문 — 를 그대로 읽습니다.

재인증도 없고 제3자 업로드도 없습니다 — 데이터는 브라우저와 내 백엔드 사이에서만 흐릅니다.

📎 첨부됨: 읽는 모든 페이지 곁에 AI 코파일럿을

/keypoints 핵심은 무엇일까요?

아티클 읽는 중…

핵심 정리

🧠 3단 계단식: Readability → DOM 트리 → 전체 텍스트

🕵️ 주요 사이트는 페이지가 직접 불러온 데이터를 읽습니다 — 재인증 없음

🔒 데이터는 브라우저와 내 백엔드 사이에만 머뭅니다

⚡ 아티클, 자막, PDF 모두 지원

무엇이든 물어보세요… 📎로 현재 페이지 첨부

아티클: /keypoints가 핵심을 뽑아 냅니다. 본문은 Readability 계단식으로 첨부됩니다.

🔒arxiv.org/pdf/1706.03762

attention-is-all-you-need.pdf 1 / 15 페이지 100%

Attention Is All You Need

Ashish Vaswani, Noam Shazeer, Niki Parmar, Jakob Uszkoreit, et al.

Abstract — 지배적인 시퀀스 변환 모델은 복잡한 순환 또는 합성곱 신경망에 기반합니다… 우리는 오직 어텐션 메커니즘만으로 구성된 새롭고 단순한 네트워크 아키텍처, Transformer를 제안합니다.

Transformer는 순환 구조를 없애고 훨씬 높은 병렬화를 가능하게 하여 학습 시간을 크게 줄입니다.

Figure 1: The Transformer – 모델 아키텍처

WMT 2014 영어→독일어, 영어→프랑스어 작업에서 학습 비용의 일부만으로 최고 수준의 성능을 달성합니다.

📎 첨부됨: PDF 《Attention Is All You Need》(15페이지 · 그림 6개)

이 논문의 핵심 기여는 무엇인가요?

PDF 분석 중…

핵심 기여

⚙️ Transformer — 어텐션만으로, 순환도 합성곱도 없음

⚡ 높은 병렬성으로 RNN/LSTM보다 훨씬 빠르게 학습

📊 그림 1은 아키텍처, 그림 2–4는 학습 과정과 BLEU 결과Fig.1

🏆 WMT 2014 두 작업 모두 더 낮은 학습 비용으로 SOTA 달성

무엇이든 물어보세요… 📎로 현재 페이지 첨부

PDF: 로컬 WASM이 표 / 제목 / 레이아웃을 재구성하고, 그림 영역은 자동으로 잘라 캡션을 붙입니다.

인터페이스 예시 · 장면을 전환하며 browsa가 페이지와 함께 동작하는 모습을 살펴보세요.

데모

페이지에 머무르고, 곁에서 물어보세요.

68초 만에 보는 전체 워크플로: 문서 첨부 → 수식·다이어그램 렌더링 → 클릭 가능한 타임스탬프 → 세션 관리와 Agent 이어하기.

한국어 자막으로 소리 없이도 이해할 수 있습니다. 수식과 다이어그램은 실제 모델 답변에서 가져왔습니다. 데모 데이터를 사용하며 재생은 편집되었습니다. YouTube.

작동 방식

세 단계로 웹페이지와 대화하기

창을 옮길 필요도, 복사-붙여넣기도 없습니다. browsa는 지금 읽고 있는 페이지 곁에 조용히 머무르는 페이지 여백의 메모처럼 동작합니다.

사이드 패널 열기 Ctrl+Shift+H

아무 페이지에서나 단축키를 누르거나 툴바 아이콘을 클릭하세요. browsa 패널이 오른쪽에 나타납니다.

페이지 첨부 📎

📎을 클릭하면 페이지 내용이 대화로 흘러 들어갑니다 — 아티클, 자막, PDF. 선택한 텍스트는 바로 질문할 수도 있습니다.

답변 스트리밍 어떤 백엔드든

답변은 단어 단위로 스트리밍되며 Markdown, 수식, 차트를 갖춰 나타납니다. 어떤 OpenAI 호환 API든, 또는 Hermes / opencode / OpenSquilla / agent-bridge 에이전트든 연결할 수 있습니다. UI는 7개 언어를 기본 제공합니다.

설치했나요? 빠른 시작이 첫 질문까지 안내하고, 전체 가이드는 읽기, 동영상, 렌더링, 세션, 백엔드, 설정을 다룹니다.

기능

채팅창 그 이상

browsa는 '읽기'와 '묻기'를 한곳에 모읍니다: 긴 아티클, 동영상, PDF를 읽는 동안 AI가 항상 바로 옆에 있습니다.

attach

페이지 첨부

클릭 한 번으로 현재 페이지를 대화로 가져옵니다 — 모드는 알아서 골라집니다:

자동 계단식: Readability 본문 → DOM 트리 → 전체 텍스트
📷 스크린샷 모드, 멀티모달 모델용
PDF 로컬 파싱: 표 / 제목 / 레이아웃 재구성
GitHub 파일 페이지는 raw 소스를 직접 가져옵니다

select

선택 영역 Q&A

아무 페이지에서 텍스트를 선택해 바로 질문하세요:

플로팅 툴바: 질문 · 설명 · 번역 · 요약
설명 / 번역은 읽기를 방해하지 않고 그 자리에서 인라인 스트리밍
질문 / 요약은 패널로 넘어갑니다 — 📎 없이

render

풍부한 렌더링

답변은 단순 텍스트 그 이상 — 수식과 다이어그램이 브라우저 안에서 렌더링됩니다:

Markdown GFM + 40개 이상 언어의 구문 강조
LaTeX 수식 (KaTeX, Web Worker 가속)
Mermaid 플로우차트(원클릭 가로/세로 전환, 패널 폭에 맞춘 자동 재배치, 키보드/핀치 줌), ECharts 차트, Markmap 마인드맵
깨진 Mermaid는 AI가 한 번에 고쳐 다시 렌더링

video

동영상 노트

동영상을 위한 완전한 워크플로 — YouTube와 Bilibili의 구조화된 자막:

클릭 가능한 [mm:ss] 타임스탬프 — 클릭하면 동영상의 해당 시점으로 이동
자막 드로어: 재생 위치 하이라이트 · 클릭해 이동 · 해당 줄 메모
자막이 없는 동영상: ASR 전사 / 시청각 정독
Xiaoyuzhou 팟캐스트: 타임스탬프 포함 원클릭 전사
긴 전사문은 타임스탬프를 유지한 채 자동으로 요점 압축

provider

어떤 백엔드든

벤더 종속 없음 — 내 모델을 연결하세요:

Hermes 에이전트: 도구 실행, 위험 작업 승인, 진행 상태 표시
OpenCode 에이전트: CLI 직통 연결 — 전체 도구 & 승인 흐름
OpenSquilla 에이전트: 게이트웨이 WebSocket — 서버 측 세션 메모리
Agent Bridge: Codex / Claude Code / Gemini CLI / pi / dsh / ZCode 브리지 — 한 카드로 여러 에이전트
에이전트 세션은 에이전트 쪽에 — 자동으로 이름이 붙고 이어서 대화
모든 OpenAI 호환 API: OpenAI, Ollama, LiteLLM…
카드에 모델 여러 개 — 사이드바에서 바로 전환
모델별 사고 수준, 요청 필드 자동 조정
Ping으로 연결 상태와 지원 기능 확인

privacy

프라이버시 우선

browsa 계정은 없습니다. 모델 서비스는 내 선택:

API 키는 로컬 저장 — 구성한 프로바이더 인증에만 사용
전송 전 로컬 마스킹: URL 토큰 / 비밀번호 / 서명
PDF는 기기 안에서 파싱 — 내용은 기기를 벗어나지 않습니다
Office 문서도 기기 안에서 Markdown으로 변환
내용은 내가 구성한 백엔드로만 전송

input

빠른 입력

더 두드리지 않고 더 말하기:

빠른 작업: 요약 / 핵심 / 설명 / 목차
슬래시 명령 + ↑/↓ 입력 기록 — 초안은 패널을 닫아도 유지
답변 스트리밍 중에도 입력 — 메시지는 대기열에 쌓여 순서대로 전송
붙여넣은 코드는 강조된 코드 블록으로 — 나머지 텍스트는 바이트 그대로

session

세션

긴 대화도 정돈된 상태로:

세션 저장 / 복원 — Agent 스레드 ID 포함
Markdown 내보내기
답변 도중 세션 전환 — 백그라운드에서 끝까지 진행
대화 내 전체 텍스트 검색(Ctrl+F)
선택한 텍스트로 상세 스레드 — 메인 대화 오염 없이 이어서 질문, 이미지 붙여넣기 지원

지원 사이트

웹페이지를 제대로 읽습니다

이 사이트들에서 browsa는 추측 대신 페이지가 이미 불러온 구조화 데이터 — 자막, 댓글, 기사 원문, 시세 — 를 읽습니다.

YouTube자막/챕터 Bilibili자막/챕터/ASR/통계 Xiaohongshu노트/사진/댓글 Juejin아티클 원문/이미지 Zhihu아티클/답변/이미지 X / Twitter트윗/사진/답글 GitHub메타데이터/README Reddit게시물/댓글/사진 Xueqiu시세/글/이미지 Xiaoyuzhou팟캐스트 Dedao아티클 GeekTime아티클

가로채지도 않고, 고치지도 않습니다: 브라우저 자체가 내보내는 요청을 지켜보고 읽을 뿐입니다. 다른 모든 웹페이지에서도 똑같이 사용할 수 있습니다 — 다만 이만큼 깊게는 읽지 않습니다.

내 키, 내 에이전트

키는 내 것. 모델도 내 것. 에이전트도 내 것.

browsa는 구독을 팔지 않고, 계정을 요구하지 않고, 추가 수수료를 붙이지 않습니다. 단지 내 모델 엔드포인트를 사이드 패널로 옮겨줄 뿐입니다 — 클라우드든, 로컬이든, 자체 호스팅이든.

›계정도, 텔레메트리도 없습니다. 설치하고 바로 사용 — 어떤 데이터도 우리를 거치지 않습니다.
›API 키는 로컬에만 저장되며, 내가 구성한 엔드포인트로만 전송됩니다.
›Ollama / LM Studio 로컬 모델 — 완전한 오프라인도 가능합니다.
›진짜 에이전트: 도구 실행, 실시간 진행 상황, 위험 작업 전 승인.

O 내 OpenAIgpt-4o · /v1/chat/completions 연결됨

C Claudeclaude-sonnet · /v1/messages 핑 확인 전

L Ollama (로컬)localhost:11434 · qwen3:32b 오프라인 OK

H Hermes Agent/v1/runs · tools · approvals 연결됨

oc OpenCode Agentopencode serve · tools · approvals 핑 확인 전

Sq OpenSquilla Agentgateway /ws · tools · approvals 핑 확인 전

↔ Agent Bridgecodex / claude / pi / gemini / dsh / zcode · 로컬 에이전트 연결 브리지

무엇을 선택할지 확실하지 않나요? 모델·에이전트 설정 가이드 읽기 →

설치

다음 읽기부터 시작하세요.

설치 방법을 하나 고르고, 모델이나 에이전트를 연결하세요. browsa 확장 프로그램은 무료입니다.

스토어에서 설치

가장 간단한 시작 방법입니다. 확장을 추가한 뒤 설정에서 모델을 연결하세요. 스토어 심사는 GitHub 릴리스보다 늦을 수 있습니다.

Chrome에 추가 ↗

대안 · 수동 업데이트

GitHub에서 불러오기

릴리스를 내려받아 압축을 풀고, 브라우저의 확장 프로그램 관리자에서 개발자 모드를 사용한 뒤, '압축해제된 확장 프로그램을 로드'를 선택하고 manifest.json이 있는 폴더를 고르세요.

릴리스 다운로드 ↗

설치했나요? 이제 연결할 차례입니다.

설정에서 모델 API나 로컬 에이전트를 구성하고 Ping으로 확인하세요. 아티클을 하나 열어 📎로 첨부하고 첫 질문을 던져 보세요.

설정 가이드 따라하기 →