그런데, 결국 이마트 사이트의 불편함을 견디지 못하고 직접 익스텐션을 만들게 되었다. 이마트 사이트에는 점포 물건과 택배 물건이 있다. 점포 물건만 합쳐서 배송이 가능하다. 그래서 점포 물건만 골라 담아야 하는데, 문제는 상품 목록에 저것들이 섞여 있다는 것이다. 점포 상품만 표시하도록 체크박스에 체크를 하면 되지만, 페이지가 바뀔 때마다 매번 체크하는 게 아주 귀찮고 시간이 드는 일이었다. 그래서 디폴트로 점포 물건만 보이게 하는 익스텐션을 만들었다.
구글이 제공하는 개발 문서와, 구글 검색해 찾은 예제, 그리고 Stack Overflow 등을 참조해서 만들었고, 완전히 처음부터 시작했는데 90% 완성하는 데까지 6시간 정도밖에 안 걸렸다. 그 후에는 버그 수정이나 아이콘 작성, 코드 줄 맞추기... (Javascript의 기본 코딩 스타일이 내가 좋아하는 스타일이 아닌데, 에디터가 자꾸 그렇게 바꾸고, 어떻게 그걸 끄는지 못 찾았다) 등에 시간이 좀 걸렸다. 개발에 특별한 도구는 필요하지 않고, 그냥 일반적 텍스트 에디터와 Chrome 브라우저의 개발자 도구 (F12 누르면 나옴)를 이용하면 된다. 언어는 Javascript 그리고 웹의 기본인 HTTP, HTML, XPath 등을 이해하면 된다.
다만, 소위 gotcha라고 하는 게 역시 좀 있어서, 당연히 문제가 없는 코드라고 작성하고 실행해 보면 원하는 결과가 안 나와서 디버깅하느라 시간을 많이 보내다가 Stack Overflow 검색해 보면 이상한 이유가 있는 경우가 있다. 예를 들면 popup.html에 Javascript를 넣었더니 동작을 하지 않았다. 스크립트 자체가 잘못되었나 싶어 수정하고 계속해 봐도 안 된다. 알고 보니 popup.html에 바로 Javascript를 넣으면 안 되고 링크를 해야 한단다. 그래서 code.js로 빼고 실행해 봤더니 그래도 일부가 동작을 안 한다. 테스트 결과 결론은, code.js 파일에서도 이벤트 핸들러 등록하는 등의 코드만 동작하고 alert("test") 등의 일반 코드는 함수 외부에서 동작을 안 한다는 것이었다. 여기서 한 시간은 소모한 것 같다.
어쨌든 완성을 하고 보니, 자기가 만든 익스텐션이라도 그냥은 쓸 수가 없었다. 개발자 모드로 압축되지 않은 익스텐션을 등록해 놓으면, Chrome 브라우저를 실행할 때마다 브라우저가 멈추면서 개발자 모드로 등록한 익스텐션은 위험할 수 있다는 경고 문구가 뜬다. 물론 내가 만든 익스텐션이니 경고 문구를 그냥 무시하고 닫으면 되지만, 브라우저를 실행할 때마다 경고를 보려니 짜증이 났다. 경고를 안 나오게 하는 방법이 있나 찾아 보니, 보안 문제로 없다고 한다. CRX로 만들어 마치 예전에 웹 사이트에서 익스텐션을 다운로드해 설치하듯이 설치를 해 봤다. 처음에는 잘 동작을 했는데, Chrome을 재시작하면 보안 문제로 스토어에서 받지 않은 익스텐션은 제거해야 한다면서 비활성화해 버린다. 제거하지 않는 옵션은 없었다. 즉, 쓸 수가 없었다. 결국, 자기가 만든 익스텐션이라도 마음 편하게 쓰려면 스토어에 등록하고 스토어에서 다시 받아서 설치해야 하는 것이다.
그래서 내가 만든 익스텐션을 스토어에 등록(publish)하려니 요금을 내라고 한다. 5 달러라는데... 굳이 5 달러를 받아야 하는가 하는 생각이 들었지만, 안 내면 등록이 안 되었기 때문에 결제를 했다. 결제 후 등록 버튼은 곧바로 눌러졌고 등록된 것처럼 보였지만, 실제 스토어 검색 결과에 내가 등록한 게 나오기까지는 몇 시간 정도 걸렸다. 그리고 외국에서는 필요가 없는 익스텐션이라 접근 가능한 국가를 한국만으로 한정하려고 했는데, 국가 목록에 한국이 안 보였다. 일본이나 중국, 대만, 베트남 등도 있는데 한국이 왜 없는지 의문이다. 결국 포기하고 그냥 전세계에서 접근 가능하도록 설정했다.
익스텐션 개발의 기본을 익혔으니... 이제 나머지 다른 사이트의 불편한 점도 익스텐션을 만들어 해결해 봐야겠다.
No comments:
Post a Comment