이슈
PDF 파일을 웹사이트에서 열어도 구글 번역 크롬 익스텐션이 작동하지 않습니다. 이건 PDF의 괴랄한 형식 때문인데요. PDF에서도 작동하는 크롬 익스텐션을 만드는 것을 진행하고자 했습니다.
ClaudeCode로 PDF 번역 크롬 익스텐션 만들기
1. PDF 번역 버튼 만들기
화살표가 가리키는 HTML 페이지의 스크린샷
PDF를 Chrome에서 열면, iframe이 application/pdf로 되어 있는 것을 볼 수 있습니다. 그래서 PDF 파일 형식을 감지하는 것이 가능한데요. 크롬 익스텐션을 만들어서 application/pdf 상태일 때 버튼을 추가하도록 ClaudeCode에게 요청했습니다.
Adobe Acrobat의 페이지 스크린샷
ClaudeCode에게 크롬 익스텐션을 만들어달라고 한 뒤 페이지의 content-type이 application/pdf 인지 확인, application/pdf 일 경우 Chrome PDF Viewer에서 번역 버튼을 shadowDOM으로 추가해달라고 요청했습니다.
shadowDOM인 이유는 pdf 형식 자체가 문제가 많아 별도의 구조로 만들어야했기 때문입니다. 참고로, shadowDOM을 pdf 로드 이후에 호출할 경우에는 잘 작동하지 않고, shadowDOM을 body내에 직접 주입해야 잘 작동합니다.
2. 번역 기능 만들기
pdf는 형식이 정말 괴랄하기 때문에.. 형식을 유지한 채 번역하기가 쉽지 않습니다. 그래서 기존에 다른 사람이 만들어 둔 github 레포를 이용해 진행하기로 했습니다.
그래서 PDFMathTranslate라는 오픈소스를 이용해 진행하기로 했습니다. 그런데 PDFMathTranslate의 경우 PDF를 다운로드 한 후 번역해서 다운을 받아 사용하는 것이기 때문에 UX 문제가 있을 것이라 생각했습니다.
그래서 PDF.js라는 오픈소스 PDF.js를 이용, 번역이 된 PDF를, PDF.js로 로드하는 방식으로 구현했습니다.
작동 영상입니다.
감사합니다 🙂
