크롬 익스텐션 개발할때 생각나는 삽질 기록(1)

현재 회사에 다니면서 한창 크롬 익스텐션 서비스를 개발하던 당시 했던 삽질을 생각난 김에 포스팅하려 한다.

 

이제 와서 보면 겨우이거? 라고 볼 수 있지만 당시는 대체 뭐가 문제인지 

우리의 든든한 친구 GPT에게 물어도 답이 나오질 않아 이것저것 코드 뜯어보던 시기였다.

 

대략적인 내용은 크롬에서는 해당 페이지가 로딩 중인지 아닌지 어떻게 판단하는가 였다.

 

---

 

 

문제를 마주했던 웹페이지는 한겨레신문 사이트였는데,

아무 기사나 찍어서 들어가 보면

보기힘든(?) .html로 끝나는 형태의 url을 가지고 있다.

 

https://www.hani.co.kr/arti/economy/economy_general/1137958.html

‘1인 가구 10평 원룸’ 살아라?…임대주택 면적 논란에 물러선 국토부

 

 

당시 개발 중이던 서비스는 어떤 페이지를 들어가던지 해당 페이지만의 고유한 게시판을 만들어서 생각을 주고받을 수 있는 형식의 서비스였기 때문에 페이지가 모두 로딩이 완료되고, URL 정보와 페이지 title, favicon url을 받아와야만 했었다.

(어떤 페이지에서 대화를 나누고 있는지 유저에게 인식시켜줘야 하기 때문)

 

 

그래서 보통의 일반적인 웹페이지 같은 경우는 딱 봐도 페이지 렌더링이 완료되었구나 싶으면

해당 페이지의 정보를 받아올 수 있었는데

 

한겨레 신문의 경우 분명 페이지가 렌더링이 완료가 된 것처럼 보임에도

해당 페이지의 정보가 받아와지지 않았다.

 

 

대체 다른 페이지와의 차이가 뭐지 싶어 이것저것 보던 중 아래와 같은 점을 인식하게 되었다.

(집념의 틀린 그림 찾기)

 

 

 

 

자세히 보면 이미 기사는 렌더링이 끝났지만

빨간 네모박스 안에 보이는 favicon에 해당하는 로고에 계속 로딩화면이 돌아가고 있고,

새로고침 버튼도 X 버튼에서 잠시 머물고 있는 것을 알 수 있다.

 

 

브라우저의 상태값을 알아낼 방법이 없을까 찾던 중,

익스텐션 개발을 하다 보면  chrome 으로 시작하는 chrome API를 사용할 수밖에 없는데

 

 

여기서 지원하는 메서드 중에 runtime.onMessage 이라는 메서드가 있었고,

이를 통해 여기서 브라우저의 상태를 아래와 같이 확인할 수가 있었다. (feat. react)

(여기서 크롬은 브라우저 영역을 content 영역으로 명시함)

 

useEffect(() => {
  const handleMessage = (request: any, sender: any, sendResponse: any) => {
	console.log(request.type)
  }

  chrome.runtime.onMessage.addListener(handleMessage)

  return () => chrome.runtime.onMessage.removeListener(handleFunc)
},[])

 

 

여기서 console.log에 찍히는 중요한 값은 아래 두 가지였다.

 

 

1. tab_update_loading. : tab이 로딩 중이다.

2. tab_update_complete : tab의 로딩이 완료되었다.

 

 

 

위 코드를 적용하고 위 움짤에 보이는 로딩 상태(새로고침 버튼)에 따라

콘솔이 다르게 찍히는지 확인을 했는데 다행히 상태변화를 잘 체크하고 있는 것을 알 수 있었고

문제를 해결할 수 있었다.