chrome.webNavigation | API | Chrome for Developers
이 페이지는 Cloud Translation API를 통해 번역되었습니다. Switch to English chrome.webNavigation 컬렉션을 사용해 정리하기 내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요. 설명 chrome.webNavigation API
developer.chrome.com
문제 상황
- content.js가 뒤로 가기 등의 기능에서는 캐시 처리되어서 페이지를 불러올 때 실행이 안된다.
- SPA 사이트에서 contents.js를 동적으로 실행하고 싶은데 어떻게 하지…
- 페이지 전체 요소들을 다 불러오기 전에 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
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 순간 검색이란 검색을 누르지 않고도 검색란에 검색어를 치면 그 결과 값이 바로바로 출력되는 검색 기능이다.
- 사용할 일이 없는 거 같다.
결론
해결된 문제 상황
- content.js가 뒤로 가기 등의 기능에서는 캐시 처리되어서 페이지를 불러올 때 실행이 안된다.
- SPA 사이트에서 contents.js를 동적으로 실행하고 싶은데 어떻게 하지…
- 이 두 문제 상황에서 쓸 만한 것은 onHistoryStateUpdated 이벤트인 것 같다.
- 문제 상황 3번은 지금 임시로 해결해 놓긴 했는데 다음에 더 찾아보고 다음 글에 써야겠다.
#chrome #extension #chromeextension #webNavigation #chromAPI
#onDOMContentLoaded #onCreatedNavigationTarget #onCompleted #onHistoryStatedUpdated #onReferenceFragmentUpdated #onTabReplaced
'chrome-extension > 첫 chrome extension 개발' 카테고리의 다른 글
| chrome.scripting (0) | 2024.02.06 |
|---|