코리아드롭다운

설치한 뒤 팝업 스위치를 켠 상태로 두고 국가 드롭다운을 열면 됩니다. 옵션 텍스트를 South Korea, Republic of Korea, Korea, Rep., ROK, 대한민국 등 약 스무 가지 표기 목록과 대조해 일치하는 항목을 선택합니다. 비교할 때 대소문자와 앞뒤 공백은 무시합니다.

일정 범위 안에서는 동작합니다. select 외에도 combobox, listbox, .dropdown, .select로 표시된 요소 안의 li, .dropdown-item, [role="option"] 항목을 옵션으로 보고 일치하는 항목을 클릭합니다. react-select 메뉴는 생성되는 옵션 id로 찾습니다. 이 패턴 중 어느 것도 쓰지 않는 자체 구현 위젯은 인식하지 못합니다.

기본 select에는 값을 넣은 뒤 버블링되는 change 이벤트를 발생시킵니다. React나 Vue, 유효성 검사 스크립트가 듣고 있는 이벤트라 선택이 그대로 전달됩니다. 커스텀 메뉴와 react-select에서는 옵션을 실제로 클릭하므로 사이트가 원래 쓰던 처리 로직이 그대로 실행됩니다. 폼 제출까지 대신하지는 않습니다.

팝업을 열어 스위치를 내리면 배지가 OFF로 바뀌고 클릭에 반응하지 않습니다. 이 상태는 Chrome 동기화 저장소의 enabled 값 하나로 관리되기 때문에 모든 탭에 동시에 적용되고, 같은 계정으로 로그인한 다른 기기의 Chrome에도 따라갑니다. 다시 켜는 방법도 같습니다.

manifest에 선언된 권한은 storage, tabs, webNavigation과 모든 사이트에 대한 호스트 권한입니다. 국가 드롭다운은 어느 사이트에나 나올 수 있고 지금 작성 중인 페이지에서 옵션 텍스트를 읽어야 하기 때문에 호스트 권한이 필요합니다. storage에는 켜기·끄기 값이 저장됩니다. tabs와 webNavigation은 naver.com·daum.net·tistory.com에서 페이지 전체가 새로 로드되지 않고 내용만 바뀌는 이동을 감지해 목록을 다시 적용하는 데 쓰입니다.