📑 Midas 채용 플랫폼 자동채움 웹 익스텐션 만들기

Github

💣 취준생이라면 이렇게 생긴 채용 플랫폼을 꽤 봤을 거라고 생각한다.. 투철한 신념으로 한 기업만 고집하는 사람이 아니라면 연락처, 이메일, 이름, 생년월일 등등의 정보를 매번 귀찮게 입력해야 하는데 꽤 귀찮은 일이다.

❕ 어차피 변하지 않는 인적사항, 한 번만 작성하고 복붙을 해보자. 그런데 Data를 어디 저장하지? 웹의 local 혹은 session storage는 채용 플랫폼마다 url부터 다르기에 공유할 수 없고.. 그렇다면 Chrome Extension에 저장해서 사용하면 되지 않을까

Chrome Extension 기본 설정은 검색해보장

이걸 채우기 위한 가장 간단하고 무식한 방법은 HTML DOM 이다.

예를 들어 Chrome Extension의 Local Storage에 englishName 을 저장해 놓았다면

chrome.storage.local.get(['englishName'], function(result) {
   if(document.querySelector('#englishName')!=null){
       document.querySelector('#englishName').value=result.englishName
   }
});

이런 식으로 local storage의 englishName 을 가져와 채용 플랫폼의 #englishName 의 value로 넣는다.

"아니 저 사이트의 영문이름 input이 englishName인지는 어떻게 알아요?"

라고 할 수 있는데 NLP를 좀만 공부했다면 쉬운 개발자 도구와 노가다를 이용해 확인해야한다. 물론 한 번만 query할 태그를 찾아놓으면 되지만 꽤 노가다임;

Extension의 local storage에 저장된 모습, 저건 Chrome 앱스토어에 있는 Storage Explorer . 크롬 내장 개발자도구의 스토리지 뷰어보다 더 깔끔하다.

그럼 이제 사용자 정보를 처음에 입력하는 부분이 남았다.

이런 식으로 템플릿 만들어 정보 입력하고

Save 누르면 local storage에 저장되고 Apply를 클릭하면 서식이 저 값으로 채워진다.

chrome.storage.local.set({
        'armyDischarge': armyDischarge,
        'armyStart': armyStart,
        'armyEnd': armyEnd,
        'armyPosition': armyPosition,
        'army': army,
        'armyWhere': armyWhere,
        'lastName': lastName,
        'firstName': firstName,
        'birthday': birthday,
        'gender': gender,
        'hobby': hobby,
        'specialty': specialty
    }, function () {

    });

- Save 클릭하면 작동하는 코드 샘플

Select box, drop box 등은 물론 개발자도구에서 소스 긁어서 코드를 일치 시켜줘야된다.

Problem

이 부분도 동작은 하지만 학교 코드를 저장하고 (학교 정보는 회사.recruiter.co.kr/com/code/retrieveHighschoolList 에서 가져오면 된다) 대학원으로 넘어가는 부분에서 플랫폼과 100% 일치하게 동작하지 않아 해결해야한다. 추후 다시 포스팅 하겠음.