원티드 인사이트(구 크레딧잡)에서 회사 정보 끌어오는 크롬 익스텐션 만들기 - 2. 원티드에 버튼 눌러서 회사 정보 조회 기능 만들기

지난번에 회사 정보 구하는 API는 만들어뒀기 때문에

크롬 익스텐션을 이용해 화면을 조작하고 화면 내에서 회사 정보를 바로 볼 수 있는 기능을 만들었습니다.

 

주로 크롬 익스텐션의 content_script, webRequest, webNavigation, tabs를 사용했고

다음 플러그인을 레퍼런스로 공부했습니다.

https://blog.outsider.ne.kr/1274

사이드 프로젝트로 만든 GitHub 번역용 크롬 익스텐션 :: Outsider's Dev Story

 

현재 작업한 부분은

주소로 접속시 원티드 url이면

화면에서 공고를 읽어 바로 밑에 회사 정보를 표시(검색한 적 있으면 바로 표시)할 수 있는 기능입니다.

검색한 적 없는 회사는 돋보기만 누르면 검색 가능합니다.

작업을 하다 보니 크롬 익스텐션에 대해 잘 몰라서 문제가 많았는데 여러 블로그 글이나 stack overflow 글이 도움이 많이 되었습니다.

 

주요 문제점과 해결 방법입니다.

먼저 크롬 익스텐션은 디버깅 방법이 헷갈렸는데,

react api 부분 > vs코드 등 익스텐션 통해 디버깅

background.js(manifest.json에 설정한 부분)

> 확장프로그램 관리에서 서비스워커 누르면 콘솔창 접근 가능

content_script 등 > 웹사이트 크롬 콘솔창

 

대략적인 크롬 익스텐션 흐름은

먼저 manifest.json에 사용할 기능들을 permission에 모두 넣어주고(permission에 tabs가 없으면 webRequest나 webNavigation에서 tab url을 확인 불가능)

화면 접근 필요한 사이트를 manifest 내 host_permissions에 추가하고,

웹사이트 접속 > webRequest, webNavigation에서 화면 조작하려는 url 맞는지 확인 >

공고가 있는 css를 찾아서 > 해당 공고 밑에 <div> 태그 추가, 

회사 정보가 chrome storage에 있으면 바로 회사 정보 표시,

없으면 div 내에 버튼만 추가합니다.

 

이전과 마찬가지로 버튼을 누르면 회사 정보 검색 API를 실행하고, 화면에 뿌린 뒤 chrome storage에 저장합니다.

회사명은 공고에서 자동으로 불러오는데 공백이나 괄호로 영어로 회사명이 적혀있는 부분은 제거하고 갖고오게 설정하였습니다. 

 

 

1. 원티드 공고는 처음 20개를 조회하고, 스크롤을 내리면 추가로 20개씩 로딩되는데

참고한 개발블로그의 크롬 익스텐션처럼 

chrome.webNavigation.onHistoryStateUpdated을 사용하면 추가로 로딩되는 부분을 인식하지 못했습니다.

그래서 검색하다보니

https://levelup.gitconnected.com/add-a-content-script-to-your-chrome-extension-part-two-f0a59eca605c

tellContentScriptToReload = () => {
  console.log("hello world")
}

chrome.webRequest.onCompleted.addListener(
    tellContentScriptToReload,          
    {urls: ["https://medium.com/*/stats?limit=25*"]}
)

이런 이벤트가 있었습니다.

onComplete를 넣으니 화면 갱신했을 때, 스크롤 내려서 새로 로딩됐을 때(네트워크에 불러오는게 여러개 있지만 url 설정으로 모두 이벤트 내에서 잡을 수 있었습니다.

 

2. 공고를 들어갔다가 뒤로가기를 누르면 onComplete는 인식 못함

이건 onHistoryStateUpdated에서 인식이 가능했기 때문에, 거기다 조건으로 forward_back 일 때만 여길 통해서 화면 조작 기능을 실행하게 했습니다.

 

3. webRequest, webNavigation은 background에서 실행 가능

이벤트 실행시 content.js에서 메소드를 실행시키는 방법

chrome.tabs.sendMessage(details.tabId, {
      action: "run",
});

 이 부분은 tab.sendMessage를 통해 background에서 보내고 content에서 받게 설정했습니다.

 

4. 팝업창 UI 수정

 

아이콘 같은건 구글에서 쓸 수 있어서 svg로 넣었습니다.

구 팝업 UI

현재 UI

 

5. 원티드에 적용한 기능 사람인에서도 적용하기

여기서 헛짓거리해서 헤맸는데

host_permissions

content_scripts 내의 matches에 각각 사람인을 추가했습니다.

content_scripts에 해당 사이트의 url이 없으면 content.js가 아예 실행되지 않습니다.

사람인 공고 목록에 적용한 화면