크롬 확장 프로그램을 개발해보자

 

너무 길게 느껴졌던 2학년이 끝났다. 열심히 달려온 과정이 뿌듯하면서도 갑자기 공허한 느낌이 들기도 한다.

이번 방학때는 친구들과 하기로 한 프로젝트 이외에도, 개인적으로도 해보고 싶었던 몇 가지 구상을 직접 실행해볼 생각이다. 큰 것부터 가장 작은 것이 있는데, 가장 작은 것이 바로 '크롬 확장 프로그램'이다. 워밍업하는 느낌으로, 아주 간단하지만 항상 필요성을 느꼈던 확장 프로그램을 하나 개발할 것이다. 최종적으로 Chrome 웹 스토어에 업로드하는 게 목표이다.

 

기획개요

드래그 한번으로 환율을 계산해주는 확장 프로그램을 개발할 것이다. 대부분의 포털 사이트에서 지금도 환율 검색을 지원한다. 처음 보는 통화단위라 할지라도, 검색하면 원화로 또는 달러로 얼마인지 알 수 있다.

하지만 익스텐션 개발의 핵심은 한 스텝을 더 줄이는 일이라고 생각한다. 여전히 구글 번역기도 있지만 그보다 익스텐션 클릭 한 번으로 번역하는게 더 편하다고 느끼는 것처럼, 사용자 경험을 최상위로 두고 개발을 할 생각이다.

사용자가 드래그 후 복사해서 구글 또는 네이버에 붙여넣기 하는 과정은 여전히 길다. 오직 드래그 한 번이면 원화 정보를 출력하도록 프로그램을 개발할 예정이다.

 

 

구현상세

• content_scripts 권한으로 마우스 드래그한 텍스트를 인자로 받아온다.
• 정규식과 currencies table을 통해 텍스트 속 금액 및 통화 단위를 인식한다.
• github의 무료 환율 api로부터 금일 환율 데이터를 가져와 원화로 변환한다.
• 해당 api는 rate 제한이 없지만, 하루 한 번 업데이트되어 다소 실시간성이 부족하다고 생각한다.
• 달러, 엔, 위안 등 주요 화폐에 한해서 수출입은행 공공 api를 사용하는 방안도 있지만, 인증키당 응답횟수가 일 1000회로 제한된다. 이렇게 되면 구글 클라우드같은 스케줄러로 시간마다 읽어와서 내가 사용자의 모든 요청에 직접 응답해야 하는데, 비용이나 보안 등의 현실적인 문제로 아마 시도하지 않을 것이다.
• 따라서 프로그램에 면책조항을 추가하여 대략적인(그럼에도 정확한) 환율임을 공지한 후 정보를 제공할 예정이다.
• popup.html과 popup.js로 드래그한 부분 위에 환율을 적용한 원화 값을 팝업 다이얼로그로 표시한다.
• 텍스트가 '10달러'라면 미국 달러일 수도 있지만, 사용자가 읽은 정보는 홍콩 달러(HKD)였을지도 모르는 일이다. 사용자가 원하는 결과가 출력되지 않았을 때, 이를 임의로 변경할 수 있는 기능 또한 팝업 다이얼로그에 추가한다.
• (확장) 현재는 원화로만 변경을 지원하지만, 옵션 페이지에서 기본 화폐를 다른 통화로 변경할 수 있는 추후 업데이트를 고려하여 확장이 유연하도록 설계할 계획이다.
• (확장) Google Translate와 같이, 페이지에 있는 모든 텍스트를 번역하듯 단번에 모든 화폐 단위를 변경하는 기능도 (가능하다면) 추가를 고민해 볼 생각이다.

​

예상결과