chrome.webNavigation

설명

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 이벤트가 수신될 때까지 onBeforeNavigateonErrorOccurred 이벤트가 반복적으로 수신됩니다.

확장 프로그램에서 문제가 되는 또 다른 개념은 프레임의 수명 주기입니다. 프레임은 커밋된 URL과 연결된 문서를 호스팅합니다. 문서는 변경될 수 있지만 (예: 탐색) frameId는 변경되지 않으므로 특정 문서에서 발생한 일을 frameId만으로 연결하기 어렵습니다. 문서별 고유 식별자인 documentId라는 개념이 도입됩니다. 프레임이 탐색되어 새 문서를 열면 식별자가 변경됩니다. 이 필드는 페이지가 수명 주기 상태 (사전 렌더링/활성/캐시 간)를 변경하는 시점을 확인하는 데 유용합니다.

전환 유형 및 한정자

webNavigation onCommitted 이벤트에는 transitionTypetransitionQualifiers 속성이 있습니다. 전환 유형은 브라우저가 이 특정 URL로 이동한 방법을 설명하는 history API에서 사용되는 것과 동일합니다. 또한 탐색을 추가로 정의하는 여러 전환 한정자를 반환할 수 있습니다.

다음과 같은 전환 한정자가 있습니다.

전환 예선전설명
'client_redirect'탐색 중에 페이지의 JavaScript 또는 메타 새로고침 태그로 인해 하나 이상의 리디렉션이 발생했습니다.
'server_redirect'탐색 중에 서버에서 전송된 HTTP 헤더로 인해 하나 이상의 리디렉션이 발생했습니다.
"forward_back"사용자가 앞으로 또는 뒤로 버튼을 사용하여 탐색을 시작했습니다.
'from_address_bar'사용자가 주소 표시줄 (검색주소창)에서 탐색을 시작했습니다.

이 API를 사용해 보려면 chrome-extension-samples 저장소에서 webNavigation API 예시를 설치하세요.

유형

TransitionQualifier

Chrome 44 이상

열거형

"client_redirect"

"server_redirect"

"forward_back"

"from_address_bar"

TransitionType

Chrome 44 이상

탐색의 원인입니다. 히스토리 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

    함수

    callback 매개변수는 다음과 같습니다.

    (details: object) => void

    • 세부정보

      객체

      • Chrome 106 이상

        문서의 수명 주기입니다.

      • frameId

        숫자

        0은 탐색이 탭 콘텐츠 창에서 발생함을 나타내고, 양수 값은 하위 프레임에서 탐색이 발생함을 나타냅니다. 프레임 ID는 지정된 탭과 프로세스에 대해 고유합니다.

      • Chrome 106 이상

        탐색이 발생한 프레임의 유형입니다.

      • parentDocumentId

        문자열 선택사항

        Chrome 106 이상

        이 프레임을 소유한 상위 문서의 UUID입니다. 상위 항목이 없는 경우 설정되지 않습니다.

      • parentFrameId

        숫자

        상위 프레임의 ID입니다. 기본 프레임인 경우 -1입니다.

      • processId

        숫자

        Chrome 50부터 지원 중단됨

        결과 문서를 렌더링할 프로세스는 onCommit까지 알 수 없으므로 이 이벤트에 processId가 더 이상 설정되지 않습니다.

        -1 값입니다.

      • tabId

        숫자

        탐색이 발생하려고 하는 탭의 ID입니다.

      • timeStamp

        숫자

        브라우저가 탐색을 시작하려고 한 시간입니다(단위: 에포크 이후 경과된 밀리초).

      • URL

        문자열

  • 필터

    객체 선택사항

    • 탐색되는 URL이 충족해야 하는 조건입니다. 이 이벤트에서는 UrlFilter의 'schemes' 및 'ports' 필드가 무시됩니다.

onCommitted

chrome.webNavigation.onCommitted.addListener(
  callback: function,
  filters?: object,
)

탐색이 커밋될 때 발생합니다. 문서 (및 이미지, 하위 프레임과 같이 문서에서 참조하는 리소스)가 아직 다운로드되고 있을 수 있지만 문서의 일부가 서버에서 수신되었고 브라우저가 새 문서로 전환하기로 결정했습니다.

매개변수

  • callback

    함수

    callback 매개변수는 다음과 같습니다.

    (details: object) => void

    • 세부정보

      객체

      • documentId

        문자열

        Chrome 106 이상

        로드된 문서의 UUID입니다.

      • Chrome 106 이상

        문서의 수명 주기입니다.

      • frameId

        숫자

        0은 탐색이 탭 콘텐츠 창에서 발생함을 나타내고, 양수 값은 하위 프레임에서 탐색이 발생함을 나타냅니다. 프레임 ID는 탭 내에서 고유합니다.

      • Chrome 106 이상

        탐색이 발생한 프레임의 유형입니다.

      • parentDocumentId

        문자열 선택사항

        Chrome 106 이상

        이 프레임을 소유한 상위 문서의 UUID입니다. 상위 항목이 없는 경우 설정되지 않습니다.

      • parentFrameId

        숫자

        Chrome 74 이상

        상위 프레임의 ID입니다. 기본 프레임인 경우 -1입니다.

      • processId

        숫자

        이 프레임의 렌더러를 실행하는 프로세스의 ID입니다.

      • tabId

        숫자

        탐색이 발생하는 탭의 ID입니다.

      • timeStamp

        숫자

        탐색이 커밋된 시간입니다(단위: 에포크 이후 경과된 밀리초).

      • transitionQualifiers

        전환 한정자 목록입니다.

      • transitionType

        탐색의 원인입니다.

      • URL

        문자열

  • 필터

    객체 선택사항

    • 탐색되는 URL이 충족해야 하는 조건입니다. 이 이벤트에서는 UrlFilter의 'schemes' 및 'ports' 필드가 무시됩니다.

onCompleted

chrome.webNavigation.onCompleted.addListener(
  callback: function,
  filters?: object,
)

참조하는 리소스를 포함한 문서가 완전히 로드되고 초기화될 때 발생합니다.

매개변수

  • callback

    함수

    callback 매개변수는 다음과 같습니다.

    (details: object) => void

    • 세부정보

      객체

      • documentId

        문자열

        Chrome 106 이상

        로드된 문서의 UUID입니다.

      • Chrome 106 이상

        문서의 수명 주기입니다.

      • frameId

        숫자

        0은 탐색이 탭 콘텐츠 창에서 발생함을 나타내고, 양수 값은 하위 프레임에서 탐색이 발생함을 나타냅니다. 프레임 ID는 탭 내에서 고유합니다.

      • Chrome 106 이상

        탐색이 발생한 프레임의 유형입니다.

      • parentDocumentId

        문자열 선택사항

        Chrome 106 이상

        이 프레임을 소유한 상위 문서의 UUID입니다. 상위 항목이 없는 경우 설정되지 않습니다.

      • parentFrameId

        숫자

        Chrome 74 이상

        상위 프레임의 ID입니다. 기본 프레임인 경우 -1입니다.

      • processId

        숫자

        이 프레임의 렌더러를 실행하는 프로세스의 ID입니다.

      • tabId

        숫자

        탐색이 발생하는 탭의 ID입니다.

      • timeStamp

        숫자

        문서가 로드를 완료한 시간입니다(에포크 이후의 경과 시간(밀리초)).

      • URL

        문자열

  • 필터

    객체 선택사항

    • 탐색되는 URL이 충족해야 하는 조건입니다. 이 이벤트에서는 UrlFilter의 'schemes' 및 'ports' 필드가 무시됩니다.

onCreatedNavigationTarget

chrome.webNavigation.onCreatedNavigationTarget.addListener(
  callback: function,
  filters?: object,
)

탐색을 호스팅하기 위해 새 창이나 기존 창의 새 탭이 생성될 때 발생합니다.

매개변수

  • callback

    함수

    callback 매개변수는 다음과 같습니다.

    (details: object) => void

    • 세부정보

      객체

      • sourceFrameId

        숫자

        탐색이 트리거된 sourceTabId가 있는 프레임의 ID입니다. 0은 기본 프레임을 나타냅니다.

      • sourceProcessId

        숫자

        소스 프레임의 렌더러를 실행하는 프로세스의 ID입니다.

      • sourceTabId

        숫자

        탐색이 트리거된 탭의 ID입니다.

      • tabId

        숫자

        URL이 열리는 탭의 ID입니다.

      • timeStamp

        숫자

        브라우저가 새 뷰를 생성하려고 한 시간입니다(에포크 이후 경과된 밀리초).

      • URL

        문자열

        새 창에서 열 URL입니다.

  • 필터

    객체 선택사항

    • 탐색되는 URL이 충족해야 하는 조건입니다. 이 이벤트에서는 UrlFilter의 'schemes' 및 'ports' 필드가 무시됩니다.

onDOMContentLoaded

chrome.webNavigation.onDOMContentLoaded.addListener(
  callback: function,
  filters?: object,
)

페이지의 DOM이 완전히 구성되었지만 참조된 리소스의 로드가 완료되지 않았을 수 있는 경우에 발생합니다.

매개변수

  • callback

    함수

    callback 매개변수는 다음과 같습니다.

    (details: object) => void

    • 세부정보

      객체

      • documentId

        문자열

        Chrome 106 이상

        로드된 문서의 UUID입니다.

      • Chrome 106 이상

        문서의 수명 주기입니다.

      • frameId

        숫자

        0은 탐색이 탭 콘텐츠 창에서 발생함을 나타내고, 양수 값은 하위 프레임에서 탐색이 발생함을 나타냅니다. 프레임 ID는 탭 내에서 고유합니다.

      • Chrome 106 이상

        탐색이 발생한 프레임의 유형입니다.

      • parentDocumentId

        문자열 선택사항

        Chrome 106 이상

        이 프레임을 소유한 상위 문서의 UUID입니다. 상위 항목이 없는 경우 설정되지 않습니다.

      • parentFrameId

        숫자

        Chrome 74 이상

        상위 프레임의 ID입니다. 기본 프레임인 경우 -1입니다.

      • processId

        숫자

        이 프레임의 렌더러를 실행하는 프로세스의 ID입니다.

      • tabId

        숫자

        탐색이 발생하는 탭의 ID입니다.

      • timeStamp

        숫자

        페이지의 DOM이 완전히 생성된 시간입니다(단위: 에포크 이후 경과된 밀리초).

      • URL

        문자열

  • 필터

    객체 선택사항

    • 탐색되는 URL이 충족해야 하는 조건입니다. 이 이벤트에서는 UrlFilter의 'schemes' 및 'ports' 필드가 무시됩니다.

onErrorOccurred

chrome.webNavigation.onErrorOccurred.addListener(
  callback: function,
  filters?: object,
)

오류가 발생하고 탐색이 중단되면 발생합니다. 네트워크 오류가 발생했거나 사용자가 탐색을 중단한 경우 발생할 수 있습니다.

매개변수

  • callback

    함수

    callback 매개변수는 다음과 같습니다.

    (details: object) => void

    • 세부정보

      객체

      • documentId

        문자열

        Chrome 106 이상

        로드된 문서의 UUID입니다.

      • Chrome 106 이상

        문서의 수명 주기입니다.

      • 오류

        문자열

        오류 설명입니다.

      • frameId

        숫자

        0은 탐색이 탭 콘텐츠 창에서 발생함을 나타내고, 양수 값은 하위 프레임에서 탐색이 발생함을 나타냅니다. 프레임 ID는 탭 내에서 고유합니다.

      • Chrome 106 이상

        탐색이 발생한 프레임의 유형입니다.

      • parentDocumentId

        문자열 선택사항

        Chrome 106 이상

        이 프레임을 소유한 상위 문서의 UUID입니다. 상위 항목이 없는 경우 설정되지 않습니다.

      • parentFrameId

        숫자

        Chrome 74 이상

        상위 프레임의 ID입니다. 기본 프레임인 경우 -1입니다.

      • processId

        숫자

        Chrome 50부터 지원 중단됨

        이 이벤트에 더 이상 processId가 설정되지 않습니다.

        -1 값입니다.

      • tabId

        숫자

        탐색이 발생하는 탭의 ID입니다.

      • timeStamp

        숫자

        오류가 발생한 시간입니다(단위: 에포크 이후 경과된 밀리초).

      • 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입니다.

      • Chrome 106 이상

        문서의 수명 주기입니다.

      • frameId

        숫자

        0은 탐색이 탭 콘텐츠 창에서 발생함을 나타내고, 양수 값은 하위 프레임에서 탐색이 발생함을 나타냅니다. 프레임 ID는 탭 내에서 고유합니다.

      • Chrome 106 이상

        탐색이 발생한 프레임의 유형입니다.

      • parentDocumentId

        문자열 선택사항

        Chrome 106 이상

        이 프레임을 소유한 상위 문서의 UUID입니다. 상위 항목이 없는 경우 설정되지 않습니다.

      • parentFrameId

        숫자

        Chrome 74 이상

        상위 프레임의 ID입니다. 기본 프레임인 경우 -1입니다.

      • processId

        숫자

        이 프레임의 렌더러를 실행하는 프로세스의 ID입니다.

      • tabId

        숫자

        탐색이 발생하는 탭의 ID입니다.

      • timeStamp

        숫자

        탐색이 커밋된 시간입니다(단위: 에포크 이후 경과된 밀리초).

      • transitionQualifiers

        전환 한정자 목록입니다.

      • transitionType

        탐색의 원인입니다.

      • URL

        문자열

  • 필터

    객체 선택사항

    • 탐색되는 URL이 충족해야 하는 조건입니다. 이 이벤트에서는 UrlFilter의 'schemes' 및 'ports' 필드가 무시됩니다.

onReferenceFragmentUpdated

chrome.webNavigation.onReferenceFragmentUpdated.addListener(
  callback: function,
  filters?: object,
)

프레임의 참조 프래그먼트가 업데이트될 때 발생합니다. 해당 프레임의 향후 모든 이벤트는 업데이트된 URL을 사용합니다.

매개변수

  • callback

    함수

    callback 매개변수는 다음과 같습니다.

    (details: object) => void

    • 세부정보

      객체

      • documentId

        문자열

        Chrome 106 이상

        로드된 문서의 UUID입니다.

      • Chrome 106 이상

        문서의 수명 주기입니다.

      • frameId

        숫자

        0은 탐색이 탭 콘텐츠 창에서 발생함을 나타내고, 양수 값은 하위 프레임에서 탐색이 발생함을 나타냅니다. 프레임 ID는 탭 내에서 고유합니다.

      • Chrome 106 이상

        탐색이 발생한 프레임의 유형입니다.

      • parentDocumentId

        문자열 선택사항

        Chrome 106 이상

        이 프레임을 소유한 상위 문서의 UUID입니다. 상위 항목이 없는 경우 설정되지 않습니다.

      • parentFrameId

        숫자

        Chrome 74 이상

        상위 프레임의 ID입니다. 기본 프레임인 경우 -1입니다.

      • processId

        숫자

        이 프레임의 렌더러를 실행하는 프로세스의 ID입니다.

      • tabId

        숫자

        탐색이 발생하는 탭의 ID입니다.

      • timeStamp

        숫자

        탐색이 커밋된 시간입니다(단위: 에포크 이후 경과된 밀리초).

      • transitionQualifiers

        전환 한정자 목록입니다.

      • transitionType

        탐색의 원인입니다.

      • URL

        문자열

  • 필터

    객체 선택사항

    • 탐색되는 URL이 충족해야 하는 조건입니다. 이 이벤트에서는 UrlFilter의 'schemes' 및 'ports' 필드가 무시됩니다.

onTabReplaced

chrome.webNavigation.onTabReplaced.addListener(
  callback: function,
)

탭의 콘텐츠가 다른 탭 (일반적으로 이전에 사전 렌더링됨)으로 대체될 때 발생합니다.

매개변수

  • callback

    함수

    callback 매개변수는 다음과 같습니다.

    (details: object) => void

    • 세부정보

      객체

      • replacedTabId

        숫자

        바뀐 탭의 ID입니다.

      • tabId

        숫자

        이전 탭을 대체한 탭의 ID입니다.

      • timeStamp

        숫자

        교체가 발생한 시간입니다(단위: 에포크 이후 경과된 밀리초).