PROJECT
Wordy - 영어 단어 마우스 툴팁 번역 & 미국/영국 발음 정보
동기
영어 문서, 블로그를 읽으면서 영어 단어를 검색하는 일이 많아서 비슷한 기능을 가진 크롬 익스텐션을 사용해왔었는데 단축키를 눌렀을 때만 발음 정보와 함께 단어의 의미를 확인하고 싶어서 직접 제작하였습니다.
프로세스
- mousemove 이벤트의 헨들러에 debounce를 걸어줍니다.
- 헨들러가 동작하면 마우스가 가르키고있는 단어를 가져옵니다.
- 크롤링을 통해 영어의 뜻과 발음 정보를 가져옵니다.
- 마우스의 위치 및 여유 공간을 계산한 후 툴팁을 통하여 정보를 보여줍니다.