chrome.webNavigation

• chrome 공식 문서 참조
  https://developer.chrome.com/docs/extensions/reference/api/webNavigation?hl=ko

chrome.webNavigation  |  API  |  Chrome for Developers

 

 

문제 상황

1. content.js가 뒤로 가기 등의 기능에서는 캐시 처리되어서 페이지를 불러올 때 실행이 안된다.
2. SPA 사이트에서 contents.js를 동적으로 실행하고 싶은데 어떻게 하지…
3. 페이지 전체 요소들을 다 불러오기 전에 contents.js가 실행돼서 HTML Element를 못 가져오는 상황

 

이 문제들을 해결하기 위해 공식 문서를 보던 중 chrome.webNavigation API를 발견했다.

그래서 뭐가 있는지 찾아봤다.

 

 

chrome.webNavigation API Event

---

페이지가 load 될 때 거치는 이벤트

• onBeforeNavigate
• onCommitted
• onCompleted
• onCreatedNavigationTarget
• onDOMContentLoaded

 

오류 감지 이벤트

• onErrorOccured

 

페이지 load 후 발생되는 이벤트

• onHistoryStateUpdated
  • 기록 API 사용하여 프레임 상태 수정
• onReferenceFragmentUpdated
  • 프레임 참조 프래그먼트 변경
• onTabReplaced
  • Chrome 순간 검색을 통해 탐색이 실행된 경우 완전히 로드된 페이지가 현재 탭으로 전환

 

 

• 공식문서 내용을 정리하자면 먼저 이 이벤트들이 발생하는 순서가 있다.

onBeforeNavigate -> onCommitted -> [onDOMContentLoaded] -> onCompleted 

• 여기서 오류가 발생하면 onErrorOccurred 이벤트가 발생한다.
• 뒤로 가기, 앞으로 가기 등 캐시에서 페이지가 복원된 경우에는 onDomcontentLoaded 이벤트가 실행되지 않는다.

 

 

직접 실행

---

• 정확한 확인을 위해 직접 실행해 보았다.
• 근데 다는 아니고
  • onDOMContentLoaded
  • onCompleted
  • onHistoryStateUpdated
  • onCreatedNavigationTarget
  • onReferenceFragmentUpdated
  • onTabReplaced
  9개 중에 6개 이벤트를 실행해 보겠다. 다른 이벤트들은 문제 해결하는데 크게 도움이 안 될 거 같기도 하고, 대충 언제 실행되는 건지 예상이 간다.

 

onDomContentLoaded, onCompleted

chrome.webNavigation.onDOMContentLoaded.addListener(()=>{      
	console.log("DOM Content Loaded")  
})

chrome.webNavigation.onCompleted.addListener(()=>{
	console.log("Completed");
})

 

• DOM Content와 Completed는 한 번만 실행될 줄 알았는데 여러 번 실행된다.
• 여러 개의 DOM으로 이루어진 사이트라서 그동안 생각대로 실행이 안된 거 같다.

 

onHistoryStateUpdated

chrome.webNavigation.onHistoryStateUpdated.addListener(()=>{      
	console.log("History State Updated")  
})

 

 

 

• onHistoryStateUpdated 이벤트가 두 번 발생하는 이유가 뭘까?
  • callback으로 data 찍어봤다.

 

• 다른 사이트로 이동할 때는 frameType, transitionType이 이렇게 나왔다.

• 링크로 외부 사이트 이동한다는 뜻인 듯.
• 구글로 검색할 때도 이렇게 나오는 거 보니 정말 다른 페이지로 load 될 때 이렇게 나오는 거 같다.

 

• 내가 확장프로그램을 적용할 사이트에 접속하면 처음엔 outermost_frame이 뜬다.
  • 이건 당연하다.
• 그런데 sub_frame이름으로 두 번이나 뜬다. 완전 똑같은 sub_frame이 두 번 뜬다.
• SPA라서 그런 거 같다.

 

onCreatedNavigationTarget

chrome.webNavigation.onCreatedNavigationTarget.addListener(()=>{
	console.log("Created Navigation Target")  
})

• 새 창을 열거나 새로운 탭을 열 때 실행된다고 한다.
• 확인해 본 결과 직접 크롬의 새로운 tab을 열 때는 적용되지 않았다.
• 링크를 타고 가다가 자동으로 새 창이나 탭이 열리면 실행되었다.

 

onReferenceFragmentUpdated

chrome.webNavigation.onReferenceFragmentUpdated.addListener(()=>{
	console.log('Fragment Updated');  
})

• 이건 페이지 content 요소들 업데이트되면 실행된다.

 

onTabReplaced

chrome.webNavigation.onTabReplaced.addListener(()=>{
	console.log("Tab RePlaced")  
})

• Chrome 순간 검색이란 검색을 누르지 않고도 검색란에 검색어를 치면 그 결과 값이 바로바로 출력되는 검색 기능이다.
• 사용할 일이 없는 거 같다.

 

결론

---

해결된 문제 상황

1. content.js가 뒤로 가기 등의 기능에서는 캐시 처리되어서 페이지를 불러올 때 실행이 안된다.
2. SPA 사이트에서 contents.js를 동적으로 실행하고 싶은데 어떻게 하지…

 

• 이 두 문제 상황에서 쓸 만한 것은 onHistoryStateUpdated 이벤트인 것 같다.
• 문제 상황 3번은 지금 임시로 해결해 놓긴 했는데 다음에 더 찾아보고 다음 글에 써야겠다.

 

 

#chrome #extension #chromeextension #webNavigation #chromAPI
#onDOMContentLoaded #onCreatedNavigationTarget #onCompleted #onHistoryStatedUpdated #onReferenceFragmentUpdated #onTabReplaced