대문글

MileMoa

검색
×

마일모아 게시판   [자료]
[패치: 9/21/2020] 아멕스 오퍼 찾아주는 크롬 익스텐션

나보다잘생긴 | 2019.11.06 17:43:42 | 본문 건너뛰기 | 댓글 건너뛰기 쓰기

AMEX Offer Finder 라는 Chrome Extension을 소개합니다.

되도록 스샷 첨부하여 이해하기 쉽도록 작성하겠습니다.

 

1. 제작 목적

 

제가 직접 만들었습니다. JS는 익숙한 편인데, 크롬 익스텐션은 첫경험이라 배우면서 만들었습니다.

아멕스 계정에 카드가 여러 개 있는데, 하나씩 클릭해가며 찾아보기가 귀찮아서 대신 해줄 일꾼이 필요했습니다.

귀차니즘은 더 나은 세상을 만드는 동기 부여가 됩니다.

 

 

2. 작동 방식

 

아멕스에서 오퍼 관련 API를 오픈해줄리 없기 때문에 Web Scraping 방식으로 오퍼를 검색합니다.

브라우저 상에서 클릭할 것을 손/마우스 대신 코드로 (programmatically) 클릭해주는 것이기 때문에 보안상 문제가 될 이상한 짓을 하는 툴은 아닙니다.

웹페이지가 다이나믹하게 변경되고, 실행되는 작업들이 그때 그때 반응 속도가 다르기 때문에 가끔은 에러가 나기도 합니다.

될 수 있는 한 이런 돌발상황을 대처하도록 만들긴 했는데, 짬내서 만들다보니 아직은 한계가 있습니다.

피드백 주시면 차차 발전시켜보도록 하겠습니다. 약속은 아닙니다. ㅎㅎ

 

 

3. 다운로드 및 설치 준비

 

최신 버전 크롬에서는 크롬 웹스토어에 등록되지 않은 익스텐션을 CRX파일로 설치하는 것을 막았습니다.

번거롭지만 소스코드 폴더를 로드하는 것 외에 다른 설치방법이 없는 것 같습니다.

 

이 포스트 첨부 파일 목록에 보면 crx-amex-offer-finder.zip 파일이 있습니다.

다운로드 하시고 원하시는 경로에 압축을 풀어 준비해 둡니다.

 

 

4. AMEX Offer Finder 설치

 

1 turn on developer mode.png

1. 크롬 브라우저를 열고 주소창에 chrome://extensions 를 입력하여 익스텐션 관리 페이지로 이동합니다.

2. 페이지 오른쪽 상단에 Developer mode 스위치를 클릭해서 켜줍니다.

 

2 load unpackaged.png

 

3. Load unpacked 버튼을 클릭합니다.

4. 폴더 선택창이 뜨면 미리 다운로드 받아 압축해제 해둔 폴더를 찾아갑니다. 

5. Select 버튼을 클릭합니다.

 

4 deactivated.png

 

6. AMEX Offer Finder 1.0 카드가 익스텐션 목록에 나타나면 설치 완료!

 

 

5. AMEX Offer Finder 사용법

 

4 deactivated.png

- 빨간 네모에 회색 아이콘을 보면 알 수 있듯이 아멕스 오퍼 페이지( https://global.americanexpress.com/offers/eligible )가 아니면 익스텐션이 비활성화 됩니다.

 

5 activated.png

 

- 아멕스 오퍼 페이지에서 아멕스 오퍼 리스트가 로딩 완료되어야만 익스텐션이 활성화 됩니다.

- 오직 이 URL에서만 오퍼 리스트가 존재할 때 익스텐션이 작동하도록 설정했습니다.

 

6 loading.png

- 익스텐션 아이콘을 클릭하면 웹페이지로부터 현재 로그인 된 계정에 있는 카드 목록을 요청합니다. (현재 로딩 중)

 

7 loaded.png

 

- 요청한 카드 목록이 돌아와서 UI를 보여줍니다.

- 위에서부터 차례대로 [ 테스트 모드 스위치, 애드올 모드 스위치, 카드 콜렉션, 키워드 입력창, 섭밋 버튼 ] 이라고 부르겠습니다.

 

8 test mode.png

- 테스트 모드 (테스트 드라이브) 스위치

제가 혼자 쓸 거면 안 넣었을텐데, 공유를 하려다보니 안전 장치로 넣었습니다.

ON 이면 실제로 오퍼를 등록시키지는 않고 하는 척만 합니다.

OFF 면 실제로 오퍼 등록을 시도합니다.

원하는 대로 작동할 것인지 실험해 보는 기능입니다.

- 테스트 모드 온오프 캐쉬 

테스트 모드 온오프 여부는 저장이 됩니다.

한 번 켜두면 익스텐션을 닫았다가 열어도 테스트 모드로 유지됩니다.

반복 테스트 시 스위치를 켜는 걸 깜빡하고 돌리는 사고를 예방하기 위해 넣은 기능입니다.

 

9 all mode.png

- 애드올 모드 스위치

저는 쓸 일이 없을 것 같은데 혹시나 필요한 분 계실까봐 넣었습니다.

현재 페이지에 있는 모든 오퍼를 쓸어 담습니다.

스위치를 켜면 서치 모드 관련 UI는 숨깁니다. 끄면 다시 나타납니다.

- 최대 100개에 달하는 모든 오퍼가 안전히 등록되기를 기다리지 않습니다.

그냥 오퍼 버튼 전부 클릭하고 나몰라라 하는 기능입니다.

혹시 몰라 안전 장치로 각 오퍼 클릭마다 0.5초의 딜레이를 설정했습니다.

원하시는 분 계시면 딜레이값을 조정할 수 있게끔 만들어 드릴 순 있으나, 현재 작동 방식으로는 그닥 큰 도움이 되는 건 아닙니다.

 

10 all mode confirmation.png

- 애드올 모드 컨펌 팝업

실수로 애드올 모드를 실행하는 것을 방지하기 위해 컨펌 팝업을 넣었습니다.

선택된 카드를 확인하고, 되돌릴 수 없음을, 오래 걸릴 수 있음을 알리는 메세지 입니다.

컨펌하면 오퍼 전부 등록시키고, 쫄아서 캔슬하면 조용히 팝업을 닫고 아무것도 하지 않습니다.

- 애드올 모드 실행 전 선택된 카드 확인 필수

현재 페이지에 보이는 모든 오퍼를 쓸어 담기 때문에 실행 전 어떤 카드가 선택되어 있는지 꼭 확인하시길 바랍니다.

익스텐션의 버그로 인한 사고도 제작자가 책임지지 않는 마당에, 유저 에러는 묻따말 독박입니다.

 

11 all mode processing.png

- 애드올 모드 작업 중

일단 섭밋 버튼이 비활성화 되고 바로 밑에 프로그레스바가 나타납니다.

각 오퍼당 0.5초의 딜레이 덕분에 페이지에 오퍼가 많을수록 시간이 오래 걸립니다.

 

12 all mode finished.png

- 애드올 모드 실행 완료

총 몇 개의 오퍼가 등록 (시도) 되었는지 알려줍니다.

혹시 모든 오퍼가 제대로 다 등록되진 않았을 수도 있으니 확인하라는 메세지 입니다.

 

13 search mode sort.png

- 서치 모드

애드올 모드 스위치가 꺼져 있으면 서치 모드로 작동합니다.

- 카드 콜렉션 순서 설정

각 카드 로우 오른쪽에 드래그 핸들이 있습니다.

드래그 핸들을 클릭한 뒤 원하는 위치에 드롭하면 됩니다.

설정하신 순서대로 오퍼를 찾아 등록합니다.

* 테스트 모드에서는 실제로 오퍼를 등록하지 않기 때문에 다음 카드에서도 중복된 오퍼가 있는 걸로 나옵니다.

* 실행 모드에서는 이미 이전 카드에 등록된 오퍼는 다음 카드에 나오지 않습니다.

* 혹시나 나오게 되더라도 이미 다른 카드에 등록된 오퍼이기에 에러가 나고 실행 중단 될 것으로 예상됩니다.

- "Ignore card(s) below"

사용하지 않는 카드에 오퍼가 등록되는 걸 막기 위해 넣은 기능입니다.

이 로우 밑에 위치한 카드는 모두 무시합니다.

즉, 회색으로 변한 카드는 검색하지도 않습니다.

- Disabled 카드 캐쉬

편의를 위해서 현재 세션에서 비활성화 된 카드는 저장이 됩니다.

익스텐션 껐다 다시 켜도 이전 세션에서 비활성화 시켰던 카드들은 여전히 비활성화 된 채로 불러옵니다.

카드 순서를 변경하면 그대로 다시 저장됩니다.

* 단, 활성화 된 카드들의 순서는 저장되지 않습니다.

* 한 브라우저에서 여러 아멕스 계정을 사용할 경우, 유저마다 preference를 따로 저장해야 하는데 그게 귀찮...

 

14 search mode invalid sort.png

- 모든 카드 무시 에러

실수로 모든 카드를 무시하도록 설정할 경우엔 다시 하라고 화냅니다.

 

15 search mode invalid input.png

- 키워드 입력창은 필수값

서치 모드에서 키워드 입력창이 비어있는 상태에선 경고를 줍니다.

섭밋 버튼도 비활성화 됩니다.

키워드를 한 자라도 쓰기 시작하면 섭밋 버튼이 활성화 됩니다.

- 키워드는 대소문자 구분 없음

오퍼를 검색할 때 키워드와 오퍼 정보를 모두 소문자로 변환한 뒤 검색하기 때문에 대소문자 구분은 없습니다.

- 복수 키워드는 쉼표로 구분

여러 개의 키워드를 한 번에 검색할 때는 쉼표로 나누어주면 됩니다.

쉼표 앞뒤의 스페이스 여부는 상관이 없습니다.

 

16 search mode processing.png

- 서치 모드 실행 중

애드올 모드와 비슷합니다.

섭밋 버튼이 비활성화 되고 프로그레스바가 나타납니다.

 

17 search mode result collapsed.png

- 서치 모드 완료 및 오퍼 등록 결과창

모든 게 순조롭게 진행되면 몇 개의 카드에서 총 몇 개의 오퍼가 성공적으로 등록되었는지 보여줍니다.

 

18 search mode result expanded.png

- 오퍼 등록 결과 디테일

각 카드를 클릭하면 해당 카드에 등록된 오퍼들을 보여줍니다.

 

19 search mode no offer found.png

- 찾은 오퍼 없음

키워드 검색 결과 매칭된 오퍼가 없을 경우 나타나는 팝업 입니다.

 

20 search mode error with no action.png

- 서치 모드 실행 중, 오퍼가 하나도 등록되지 않은 상태에서 오류가 날 경우 뜨는 팝업 입니다.

메세지가 알려주듯이 아무런 영향이 없으므로 익스텐션을 껐다 켜서 다시 실행시켜 보면 됩니다.

오퍼 페이지를 리프레쉬 한 뒤 재실행 할 것을 권유합니다.

혹시 반복되는 오류가 생기면 댓글로 알려주시길 바랍니다.

 

21 search mode error with some action.png

- 서치 모드 실행 중, 오퍼가 하나라도 등록이 된 후 오류가 날 경우 뜨는 결과창 입니다.

- Cards explored

오류가 생기기 전까지 검색 완료한 카드들을 보여줍니다.

여기에 나오지 않는 카드들은 무시된 카드 중 하나거나 아니면 그 카드로 스위치 하던 중 오류가 생긴 것이라고 보면 됩니다.

- Offers added

오류가 생기기 전까지 각 카드에 등록 완료된 오퍼들을 보여줍니다.

 

 

6. 주의 사항

 

* 오퍼 페이지에서 바로 로그인 혹은 자동 로그아웃 후 로그인

오퍼 페이지에서 시간이 흘러 자동으로 로그아웃이 되었다가 다시 로그인을 했을 경우에는 페이지 리프레쉬를 한 번 해주셔야 익스텐션이 작동합니다.

익스텐션 활성화 시킬 때 오퍼 페이지에 카드 목록을 불러줄 간단한 스크립트를 인젝트 하는데,

로그아웃 되었다가 다시 로그인 돼서 익스텐션이 재활성화 된 경우엔 기존 웹페이지와 익스텐션 간에 연결이 끊어져서 그렇습니다.

바로 오퍼 페이지 링크를 타고 가서 로그인을 했을 경우에도 마찬가지 입니다.

결론은 로그인 후 페이지 리프레쉬 한 번 하시면 됩니다.

이 문제는 패치로 해결 됐습니다.

혹시라도 익스텐션 아이콘을 눌러도 아무 반응이 없으면 리프레쉬 후 다시 시도해 보시고,

그래도 계속 문제가 지속되면 댓글로 리포트 해주시기 바랍니다.

 

* 실행 전 카드 순서 꼭 확인

카드 순서는 아멕스에서 보내주는 그대로 불러옵니다.

익스텐션이 이전에 무시한 카드 정보는 저장을 해두지만, 카드 순서 자체를 기억하진 않습니다.

그래서 익스텐션 닫았다가 다시 열면 카드 순서가 리셋 됩니다.

섭밋 버튼 클릭하기 전에 재차 확인하시길 바랍니다.

 

* UI 외부 클릭 주의

익스텐션 UI는 브라우저 안에서 팝업 외부를 클릭하면 자동으로 닫히게 되어있습니다.

익스텐션이 작업 실행 중일 때는 다른 작업하지 마시고 지켜보시기를 권유합니다.

혹시 작업 실행 중 실수로 팝업 외부를 클릭해서 닫혔을 경우, 대부분은 백그라운드에서 아직 작업이 실행 중일 수 있습니다.

이럴 때는 안전빵으로 1분 이상 기다렸다가, 페이지를 리프레쉬해서 등록된 오퍼를 확인하시길 바랍니다.

그리고 필요할 경우 다시 하시면 됩니다.

 

* 아멕스 홈페이지 업데이트

Web Scraping 기반으로 작동을 하다보니 아멕스 홈페이지 구조 자체에 변동이 생기면 익스텐션이 오작동 할 수 있습니다.

오작동 보다는 비작동이겠네요...

그럴 땐 대대적인 익스텐션 업데이트가 필요합니다.

사실 거창한 건 아니고, 변동된 구조에 맞게 변수 몇 개만 업데이트 해주면 되게끔 해두었습니다. ㅎㅎ

저보다 먼저 발견하면 댓글로 신고해 주세요!

 

* 계정마다 있을 수 있는 변수

제 맥북에서, 최신 버전 크롬으로, 제 계정으로는 테스팅을 마쳤습니다만!

각자의 계정에 생각치 못한 변수가 있을 수 있으므로 많은 수정이 필요할 수 있다는 점 알아주시길 바랍니다.

예를 들어, 제 계정엔 AU 카드가 없고 론/세이빙스 어카운트도 없고 오로지 개인/비즈니스 크레딧/차지 카드들만 있습니다.

다른 상황에 계신 분들이 사용해 보시고 피드백 주시면 상황에 대처하게끔 수정할 계획입니다.


반복해서 말씀드리지만 예기치 않은 오류로 생긴 사고는 책임지지 않습니다. :)

 

 

7. AMEX Offer Finder 삭제

 

혹시 설치하셨다가 마음에 안 들거나 필요 없어져서 삭제하고 싶으시면 크롬 익스텐션 관리 페이지에서 Remove 버튼만 클릭하시면 깔끔!

 

 

8. 업데이트 내역

 

9/21/2020

- 아멕스 웹사이트에 생긴 약간의 변동으로 인해 개별 오퍼 검색/추가 기능이 제대로 작동하지 않던 문제 해결

- 계정 내 액티브 하지 않은 (Cancelled 혹은 Inactive) 카드가 있을 경우 생기던 오류 해결

 

12/6/2019

- 아멕스 웹사이트를 띄워둔 상태에서 익스텐션 설치 혹은 오퍼 페이지에서 바로 로그인 했을 때 리프레쉬를 해야만 작동했던 문제 해결

- 계정 내 카드가 4개 이상일 때 5번째 카드 검색시 생기던 오류 해결

 

 

...

스샷 포함해서 쓰다보니 글이 길어졌네요.

궁금하신 부분이나 사용하시다가 이상한 점이 발견되면 댓글 남겨주시면 최대한 답변 드리도록 노력하겠습니다.

첨부 [20]

댓글 [90]

목록 스크랩

마일모아 게시판 [113,414] 분류

쓰기
1 / 5671
마일모아 사이트 맞춤 구글 검색