설명
chrome.webNavigation
API를 사용하여 진행 중인 탐색 요청의 상태에 관한 알림을 수신합니다.
권한
webNavigation
모든 chrome.webNavigation
메서드와 이벤트에서는 확장 프로그램 매니페스트에 "webNavigation"
권한을 선언해야 합니다. 예를 들면 다음과 같습니다.
{
"name": "My extension",
...
"permissions": [
"webNavigation"
],
...
}
개념 및 사용
이벤트 순서
탐색이 성공적으로 완료되면 이벤트가 다음 순서로 발생합니다.
onBeforeNavigate -> onCommitted -> [onDOMContentLoaded] -> onCompleted
프로세스 중에 오류가 발생하면 onErrorOccurred
이벤트가 발생합니다. 특정 탐색의 경우 onErrorOccurred
이후에는 더 이상 이벤트가 발생하지 않습니다.
탐색 프레임에 하위 프레임이 포함된 경우 하위 프레임의 onBeforeNavigate
전에 onCommitted
가 실행되고 모든 하위 프레임의 onCompleted
후에 onCompleted
가 실행됩니다.
프레임의 참조 프래그먼트가 변경되면 onReferenceFragmentUpdated
이벤트가 실행됩니다. 이 이벤트는 onDOMContentLoaded
이후 언제든지, onCompleted
이후에도 발생할 수 있습니다.
히스토리 API를 사용하여 프레임의 상태를 수정하는 경우 (예: history.pushState()
사용) onHistoryStateUpdated
이벤트가 발생합니다. 이 이벤트는 onDOMContentLoaded
이후 언제든지 발생할 수 있습니다.
탐색에서 뒤로-앞으로 캐시에서 페이지를 복원한 경우 onDOMContentLoaded
이벤트가 발생하지 않습니다. 페이지를 처음 방문했을 때 콘텐츠가 이미 로드를 완료했기 때문에 이벤트가 발생하지 않습니다.
Chrome 인스턴트 또는 인스턴트 페이지를 사용하여 탐색이 트리거된 경우 완전히 로드된 페이지가 현재 탭으로 전환됩니다. 이 경우 onTabReplaced
이벤트가 발생합니다.
webRequest 이벤트와의 관계
webRequest API의 이벤트와 webNavigation API의 이벤트 간에 정의된 순서는 없습니다. 이미 새 탐색을 시작한 프레임에 대해 webRequest 이벤트가 계속 수신되거나 네트워크 리소스가 이미 완전히 로드된 후에만 탐색이 진행될 수 있습니다.
일반적으로 webNavigation 이벤트는 UI에 표시되는 탐색 상태와 밀접한 관련이 있는 반면 webRequest 이벤트는 일반적으로 사용자에게 불투명한 네트워크 스택의 상태에 해당합니다.
탭 ID
탐색 탭이 Chrome UI의 실제 탭에 대응하지 않는 경우도 있습니다(예: 사전 렌더링되는 탭). 이러한 탭은 tabs API를 사용하여 액세스할 수 없으며 webNavigation.getFrame()
또는 webNavigation.getAllFrames()
를 호출하여 탭에 관한 정보를 요청할 수도 없습니다. 이러한 탭이 스왑되면 onTabReplaced
이벤트가 발생하고 이러한 API를 통해 액세스할 수 있게 됩니다.
타임스탬프
OS에서 별도의 Chrome 프로세스를 처리할 때 발생하는 일부 기술적 이상으로 인해 브라우저 자체와 확장 프로그램 프로세스 간에 시계가 기울어질 수 있다는 점에 유의해야 합니다. 즉, WebNavigation
이벤트의 timeStamp
속성 timeStamp
속성은 내부적으로 일관성만 보장됩니다. 한 이벤트를 다른 이벤트와 비교하면 두 이벤트 간의 올바른 오프셋이 표시되지만, 확장 프로그램 내에서 현재 시간과 비교하면 (예: (new Date()).getTime()
사용) 예상치 못한 결과가 표시될 수 있습니다.
프레임 ID
탭 내의 프레임은 프레임 ID로 식별할 수 있습니다. 기본 프레임의 프레임 ID는 항상 0이고 하위 프레임의 ID는 양수입니다. 프레임에서 문서가 구성되면 문서의 수명 주기 동안 프레임 ID가 일정하게 유지됩니다. Chrome 49부터 이 ID는 프레임의 수명 동안 (여러 탐색에 걸쳐) 일정하게 유지됩니다.
Chrome의 다중 프로세스 특성으로 인해 탭에서 웹페이지의 소스와 대상을 렌더링하는 데 다른 프로세스를 사용할 수 있습니다. 따라서 새 프로세스에서 탐색이 발생하면 새 탐색이 커밋될 때까지 (즉, 새 기본 프레임에 onCommitted
이벤트가 전송될 때까지) 새 페이지와 이전 페이지 모두에서 이벤트를 수신할 수 있습니다. 즉, 동일한 frameId
를 갖는 대기 중인 webNavigation 이벤트 시퀀스가 두 개 이상 있을 수 있습니다. 시퀀스는 processId
키로 구분할 수 있습니다.
임시 로드 중에는 프로세스가 여러 번 전환될 수 있습니다. 이는 로드가 다른 사이트로 리디렉션될 때 발생합니다. 이 경우 최종 onCommitted
이벤트가 수신될 때까지 onBeforeNavigate
및 onErrorOccurred
이벤트가 반복적으로 수신됩니다.
확장 프로그램에서 문제가 되는 또 다른 개념은 프레임의 수명 주기입니다. 프레임은 커밋된 URL과 연결된 문서를 호스팅합니다. 문서는 변경될 수 있지만 (예: 탐색) frameId는 변경되지 않으므로 특정 문서에서 발생한 일을 frameId만으로 연결하기 어렵습니다. 문서별 고유 식별자인 documentId라는 개념이 도입됩니다. 프레임이 탐색되어 새 문서를 열면 식별자가 변경됩니다. 이 필드는 페이지가 수명 주기 상태 (사전 렌더링/활성/캐시 간)를 변경하는 시점을 확인하는 데 유용합니다.
전환 유형 및 한정자
webNavigation
onCommitted
이벤트에는 transitionType
및 transitionQualifiers
속성이 있습니다. 전환 유형은 브라우저가 이 특정 URL로 이동한 방법을 설명하는 history API에서 사용되는 것과 동일합니다. 또한 탐색을 추가로 정의하는 여러 전환 한정자를 반환할 수 있습니다.
다음과 같은 전환 한정자가 있습니다.
전환 예선전 | 설명 |
---|---|
'client_redirect' | 탐색 중에 페이지의 JavaScript 또는 메타 새로고침 태그로 인해 하나 이상의 리디렉션이 발생했습니다. |
'server_redirect' | 탐색 중에 서버에서 전송된 HTTP 헤더로 인해 하나 이상의 리디렉션이 발생했습니다. |
"forward_back" | 사용자가 앞으로 또는 뒤로 버튼을 사용하여 탐색을 시작했습니다. |
'from_address_bar' | 사용자가 주소 표시줄 (검색주소창)에서 탐색을 시작했습니다. |
예
이 API를 사용해 보려면 chrome-extension-samples 저장소에서 webNavigation API 예시를 설치하세요.
유형
TransitionQualifier
열거형
"client_redirect"
"server_redirect"
"forward_back"
"from_address_bar"
TransitionType
탐색의 원인입니다. 히스토리 API에 정의된 것과 동일한 전환 유형이 사용됩니다. 이는 "auto_toplevel"
대신 "start_page"
(하위 호환성)이 사용된다는 점을 제외하고 히스토리 API에 정의된 전환 유형과 동일합니다.
열거형
'link'
'typed'
'auto_bookmark'
"auto_subframe"
"manual_subframe"
'생성됨'
"start_page"
'form_submit'
"reload"
'keyword'
'keyword_generated'
메서드
getAllFrames()
chrome.webNavigation.getAllFrames(
details: object,
): Promise<object[] | undefined>
지정된 탭의 모든 프레임에 관한 정보를 가져옵니다.
매개변수
-
세부정보
객체
모든 프레임을 가져올 탭에 관한 정보입니다.
-
tabId
숫자
탭의 ID입니다.
-
반환 값
-
Promise<object[] | undefined>
Chrome 93 이상
getFrame()
chrome.webNavigation.getFrame(
details: object,
): Promise<object | undefined>
지정된 프레임에 관한 정보를 가져옵니다. 프레임은 웹페이지의 <iframe> 또는 <frame>을 의미하며 탭 ID와 프레임 ID로 식별됩니다.
매개변수
-
세부정보
객체
정보를 가져올 프레임에 관한 정보입니다.
-
documentId
문자열 선택사항
Chrome 106 이상문서의 UUID입니다. frameId 또는 tabId가 제공되면 제공된 문서 ID로 찾은 문서와 일치하는지 확인합니다.
-
frameId
번호 선택사항
지정된 탭의 프레임 ID입니다.
-
processId
번호 선택사항
Chrome 49부터 지원 중단됨이제 프레임이 탭 ID와 프레임 ID로 고유하게 식별됩니다. 프로세스 ID는 더 이상 필요하지 않으므로 무시됩니다.
이 탭의 렌더러를 실행하는 프로세스의 ID입니다.
-
tabId
번호 선택사항
프레임이 있는 탭의 ID입니다.
-
반환 값
-
Promise<object | undefined>
Chrome 93 이상
이벤트
onBeforeNavigate
chrome.webNavigation.onBeforeNavigate.addListener(
callback: function,
filters?: object,
)
탐색이 발생하려고 할 때 발생합니다.
매개변수
-
함수
callback
매개변수는 다음과 같습니다.(details: object) => void
-
객체
-
Chrome 106 이상
문서의 수명 주기입니다.
-
숫자
0은 탐색이 탭 콘텐츠 창에서 발생함을 나타내고, 양수 값은 하위 프레임에서 탐색이 발생함을 나타냅니다. 프레임 ID는 지정된 탭과 프로세스에 대해 고유합니다.
-
Chrome 106 이상
탐색이 발생한 프레임의 유형입니다.
-
문자열 선택사항
Chrome 106 이상이 프레임을 소유한 상위 문서의 UUID입니다. 상위 항목이 없는 경우 설정되지 않습니다.
-
숫자
상위 프레임의 ID입니다. 기본 프레임인 경우
-1
입니다. -
숫자
Chrome 50부터 지원 중단됨결과 문서를 렌더링할 프로세스는 onCommit까지 알 수 없으므로 이 이벤트에 processId가 더 이상 설정되지 않습니다.
-1 값입니다.
-
숫자
탐색이 발생하려고 하는 탭의 ID입니다.
-
숫자
브라우저가 탐색을 시작하려고 한 시간입니다(단위: 에포크 이후 경과된 밀리초).
-
문자열
-
-
-
객체 선택사항
-
탐색되는 URL이 충족해야 하는 조건입니다. 이 이벤트에서는 UrlFilter의 'schemes' 및 'ports' 필드가 무시됩니다.
-
onCommitted
chrome.webNavigation.onCommitted.addListener(
callback: function,
filters?: object,
)
탐색이 커밋될 때 발생합니다. 문서 (및 이미지, 하위 프레임과 같이 문서에서 참조하는 리소스)가 아직 다운로드되고 있을 수 있지만 문서의 일부가 서버에서 수신되었고 브라우저가 새 문서로 전환하기로 결정했습니다.
매개변수
-
callback
함수
callback
매개변수는 다음과 같습니다.(details: object) => void
-
세부정보
객체
-
documentId
문자열
Chrome 106 이상로드된 문서의 UUID입니다.
-
documentLifecycleChrome 106 이상
문서의 수명 주기입니다.
-
frameId
숫자
0은 탐색이 탭 콘텐츠 창에서 발생함을 나타내고, 양수 값은 하위 프레임에서 탐색이 발생함을 나타냅니다. 프레임 ID는 탭 내에서 고유합니다.
-
frameTypeChrome 106 이상
탐색이 발생한 프레임의 유형입니다.
-
parentDocumentId
문자열 선택사항
Chrome 106 이상이 프레임을 소유한 상위 문서의 UUID입니다. 상위 항목이 없는 경우 설정되지 않습니다.
-
parentFrameId
숫자
Chrome 74 이상상위 프레임의 ID입니다. 기본 프레임인 경우
-1
입니다. -
processId
숫자
이 프레임의 렌더러를 실행하는 프로세스의 ID입니다.
-
tabId
숫자
탐색이 발생하는 탭의 ID입니다.
-
timeStamp
숫자
탐색이 커밋된 시간입니다(단위: 에포크 이후 경과된 밀리초).
-
transitionQualifiers
전환 한정자 목록입니다.
-
transitionType
탐색의 원인입니다.
-
URL
문자열
-
-
-
필터
객체 선택사항
-
URL
탐색되는 URL이 충족해야 하는 조건입니다. 이 이벤트에서는 UrlFilter의 'schemes' 및 'ports' 필드가 무시됩니다.
-
onCompleted
chrome.webNavigation.onCompleted.addListener(
callback: function,
filters?: object,
)
참조하는 리소스를 포함한 문서가 완전히 로드되고 초기화될 때 발생합니다.
매개변수
-
callback
함수
callback
매개변수는 다음과 같습니다.(details: object) => void
-
세부정보
객체
-
documentId
문자열
Chrome 106 이상로드된 문서의 UUID입니다.
-
documentLifecycleChrome 106 이상
문서의 수명 주기입니다.
-
frameId
숫자
0은 탐색이 탭 콘텐츠 창에서 발생함을 나타내고, 양수 값은 하위 프레임에서 탐색이 발생함을 나타냅니다. 프레임 ID는 탭 내에서 고유합니다.
-
frameTypeChrome 106 이상
탐색이 발생한 프레임의 유형입니다.
-
parentDocumentId
문자열 선택사항
Chrome 106 이상이 프레임을 소유한 상위 문서의 UUID입니다. 상위 항목이 없는 경우 설정되지 않습니다.
-
parentFrameId
숫자
Chrome 74 이상상위 프레임의 ID입니다. 기본 프레임인 경우
-1
입니다. -
processId
숫자
이 프레임의 렌더러를 실행하는 프로세스의 ID입니다.
-
tabId
숫자
탐색이 발생하는 탭의 ID입니다.
-
timeStamp
숫자
문서가 로드를 완료한 시간입니다(에포크 이후의 경과 시간(밀리초)).
-
URL
문자열
-
-
-
필터
객체 선택사항
-
URL
탐색되는 URL이 충족해야 하는 조건입니다. 이 이벤트에서는 UrlFilter의 'schemes' 및 'ports' 필드가 무시됩니다.
-
onCreatedNavigationTarget
chrome.webNavigation.onCreatedNavigationTarget.addListener(
callback: function,
filters?: object,
)
탐색을 호스팅하기 위해 새 창이나 기존 창의 새 탭이 생성될 때 발생합니다.
매개변수
-
함수
callback
매개변수는 다음과 같습니다.(details: object) => void
-
객체
-
숫자
탐색이 트리거된 sourceTabId가 있는 프레임의 ID입니다. 0은 기본 프레임을 나타냅니다.
-
숫자
소스 프레임의 렌더러를 실행하는 프로세스의 ID입니다.
-
숫자
탐색이 트리거된 탭의 ID입니다.
-
숫자
URL이 열리는 탭의 ID입니다.
-
숫자
브라우저가 새 뷰를 생성하려고 한 시간입니다(에포크 이후 경과된 밀리초).
-
문자열
새 창에서 열 URL입니다.
-
-
-
객체 선택사항
-
탐색되는 URL이 충족해야 하는 조건입니다. 이 이벤트에서는 UrlFilter의 'schemes' 및 'ports' 필드가 무시됩니다.
-
onDOMContentLoaded
chrome.webNavigation.onDOMContentLoaded.addListener(
callback: function,
filters?: object,
)
페이지의 DOM이 완전히 구성되었지만 참조된 리소스의 로드가 완료되지 않았을 수 있는 경우에 발생합니다.
매개변수
-
callback
함수
callback
매개변수는 다음과 같습니다.(details: object) => void
-
세부정보
객체
-
documentId
문자열
Chrome 106 이상로드된 문서의 UUID입니다.
-
documentLifecycleChrome 106 이상
문서의 수명 주기입니다.
-
frameId
숫자
0은 탐색이 탭 콘텐츠 창에서 발생함을 나타내고, 양수 값은 하위 프레임에서 탐색이 발생함을 나타냅니다. 프레임 ID는 탭 내에서 고유합니다.
-
frameTypeChrome 106 이상
탐색이 발생한 프레임의 유형입니다.
-
parentDocumentId
문자열 선택사항
Chrome 106 이상이 프레임을 소유한 상위 문서의 UUID입니다. 상위 항목이 없는 경우 설정되지 않습니다.
-
parentFrameId
숫자
Chrome 74 이상상위 프레임의 ID입니다. 기본 프레임인 경우
-1
입니다. -
processId
숫자
이 프레임의 렌더러를 실행하는 프로세스의 ID입니다.
-
tabId
숫자
탐색이 발생하는 탭의 ID입니다.
-
timeStamp
숫자
페이지의 DOM이 완전히 생성된 시간입니다(단위: 에포크 이후 경과된 밀리초).
-
URL
문자열
-
-
-
필터
객체 선택사항
-
URL
탐색되는 URL이 충족해야 하는 조건입니다. 이 이벤트에서는 UrlFilter의 'schemes' 및 'ports' 필드가 무시됩니다.
-
onErrorOccurred
chrome.webNavigation.onErrorOccurred.addListener(
callback: function,
filters?: object,
)
오류가 발생하고 탐색이 중단되면 발생합니다. 네트워크 오류가 발생했거나 사용자가 탐색을 중단한 경우 발생할 수 있습니다.
매개변수
-
callback
함수
callback
매개변수는 다음과 같습니다.(details: object) => void
-
세부정보
객체
-
documentId
문자열
Chrome 106 이상로드된 문서의 UUID입니다.
-
documentLifecycleChrome 106 이상
문서의 수명 주기입니다.
-
오류
문자열
오류 설명입니다.
-
frameId
숫자
0은 탐색이 탭 콘텐츠 창에서 발생함을 나타내고, 양수 값은 하위 프레임에서 탐색이 발생함을 나타냅니다. 프레임 ID는 탭 내에서 고유합니다.
-
frameTypeChrome 106 이상
탐색이 발생한 프레임의 유형입니다.
-
parentDocumentId
문자열 선택사항
Chrome 106 이상이 프레임을 소유한 상위 문서의 UUID입니다. 상위 항목이 없는 경우 설정되지 않습니다.
-
parentFrameId
숫자
Chrome 74 이상상위 프레임의 ID입니다. 기본 프레임인 경우
-1
입니다. -
processId
숫자
Chrome 50부터 지원 중단됨이 이벤트에 더 이상 processId가 설정되지 않습니다.
-1 값입니다.
-
tabId
숫자
탐색이 발생하는 탭의 ID입니다.
-
timeStamp
숫자
오류가 발생한 시간입니다(단위: 에포크 이후 경과된 밀리초).
-
URL
문자열
-
-
-
필터
객체 선택사항
-
URL
탐색되는 URL이 충족해야 하는 조건입니다. 이 이벤트에서는 UrlFilter의 'schemes' 및 'ports' 필드가 무시됩니다.
-
onHistoryStateUpdated
chrome.webNavigation.onHistoryStateUpdated.addListener(
callback: function,
filters?: object,
)
프레임의 기록이 새 URL로 업데이트될 때 발생합니다. 해당 프레임의 향후 모든 이벤트는 업데이트된 URL을 사용합니다.
매개변수
-
callback
함수
callback
매개변수는 다음과 같습니다.(details: object) => void
-
세부정보
객체
-
documentId
문자열
Chrome 106 이상로드된 문서의 UUID입니다.
-
documentLifecycleChrome 106 이상
문서의 수명 주기입니다.
-
frameId
숫자
0은 탐색이 탭 콘텐츠 창에서 발생함을 나타내고, 양수 값은 하위 프레임에서 탐색이 발생함을 나타냅니다. 프레임 ID는 탭 내에서 고유합니다.
-
frameTypeChrome 106 이상
탐색이 발생한 프레임의 유형입니다.
-
parentDocumentId
문자열 선택사항
Chrome 106 이상이 프레임을 소유한 상위 문서의 UUID입니다. 상위 항목이 없는 경우 설정되지 않습니다.
-
parentFrameId
숫자
Chrome 74 이상상위 프레임의 ID입니다. 기본 프레임인 경우
-1
입니다. -
processId
숫자
이 프레임의 렌더러를 실행하는 프로세스의 ID입니다.
-
tabId
숫자
탐색이 발생하는 탭의 ID입니다.
-
timeStamp
숫자
탐색이 커밋된 시간입니다(단위: 에포크 이후 경과된 밀리초).
-
transitionQualifiers
전환 한정자 목록입니다.
-
transitionType
탐색의 원인입니다.
-
URL
문자열
-
-
-
필터
객체 선택사항
-
URL
탐색되는 URL이 충족해야 하는 조건입니다. 이 이벤트에서는 UrlFilter의 'schemes' 및 'ports' 필드가 무시됩니다.
-
onReferenceFragmentUpdated
chrome.webNavigation.onReferenceFragmentUpdated.addListener(
callback: function,
filters?: object,
)
프레임의 참조 프래그먼트가 업데이트될 때 발생합니다. 해당 프레임의 향후 모든 이벤트는 업데이트된 URL을 사용합니다.
매개변수
-
callback
함수
callback
매개변수는 다음과 같습니다.(details: object) => void
-
세부정보
객체
-
documentId
문자열
Chrome 106 이상로드된 문서의 UUID입니다.
-
documentLifecycleChrome 106 이상
문서의 수명 주기입니다.
-
frameId
숫자
0은 탐색이 탭 콘텐츠 창에서 발생함을 나타내고, 양수 값은 하위 프레임에서 탐색이 발생함을 나타냅니다. 프레임 ID는 탭 내에서 고유합니다.
-
frameTypeChrome 106 이상
탐색이 발생한 프레임의 유형입니다.
-
parentDocumentId
문자열 선택사항
Chrome 106 이상이 프레임을 소유한 상위 문서의 UUID입니다. 상위 항목이 없는 경우 설정되지 않습니다.
-
parentFrameId
숫자
Chrome 74 이상상위 프레임의 ID입니다. 기본 프레임인 경우
-1
입니다. -
processId
숫자
이 프레임의 렌더러를 실행하는 프로세스의 ID입니다.
-
tabId
숫자
탐색이 발생하는 탭의 ID입니다.
-
timeStamp
숫자
탐색이 커밋된 시간입니다(단위: 에포크 이후 경과된 밀리초).
-
transitionQualifiers
전환 한정자 목록입니다.
-
transitionType
탐색의 원인입니다.
-
URL
문자열
-
-
-
필터
객체 선택사항
-
URL
탐색되는 URL이 충족해야 하는 조건입니다. 이 이벤트에서는 UrlFilter의 'schemes' 및 'ports' 필드가 무시됩니다.
-
onTabReplaced
chrome.webNavigation.onTabReplaced.addListener(
callback: function,
)
탭의 콘텐츠가 다른 탭 (일반적으로 이전에 사전 렌더링됨)으로 대체될 때 발생합니다.
매개변수
-
callback
함수
callback
매개변수는 다음과 같습니다.(details: object) => void
-
세부정보
객체
-
replacedTabId
숫자
바뀐 탭의 ID입니다.
-
tabId
숫자
이전 탭을 대체한 탭의 ID입니다.
-
timeStamp
숫자
교체가 발생한 시간입니다(단위: 에포크 이후 경과된 밀리초).
-
-