chrome.devtools.inspectedWindow

설명

chrome.devtools.inspectedWindow API를 사용하여 검사된 창과 상호작용합니다. 검사된 페이지의 탭 ID를 가져오거나 검사된 창의 컨텍스트에서 코드를 평가하거나 페이지를 새로고침하거나 페이지 내의 리소스 목록을 가져옵니다.

Developer Tools API 사용에 관한 일반적인 소개는 DevTools API 요약을 참조하세요.

tabId 속성은 chrome.tabs.*와 함께 사용할 수 있는 탭 식별자를 제공합니다. API 호출 하지만 chrome.tabs.* API는 개발자 도구에 노출되지 않습니다. 탭 ID를 백그라운드로 전달해야 합니다. 거기에서 chrome.tabs.* API 함수를 호출합니다.

reload 메서드는 검사된 페이지를 새로고침하는 데 사용할 수 있습니다. 또한 호출자는 사용자 에이전트 문자열 재정의, 페이지 로드 시 초기에 삽입되는 스크립트 또는 캐시된 리소스를 강제로 새로고침하는 옵션을 사용할 수 있습니다.

getResources 호출 및 onResourceContent 이벤트를 사용하여 리소스 목록 가져오기 (문서, 스타일시트, 스크립트, 이미지 등)이 있습니다. getContent 및 onResourceContentCommitted 이벤트와 함께 Resource 클래스의 setContent 메서드가 리소스 콘텐츠 수정을 지원하는 데 사용할 수 있어야 합니다(예: 외부 편집기).

매니페스트

이 API를 사용하려면 매니페스트에서 다음 키를 선언해야 합니다.

"devtools_page"

검사된 창에서 코드 실행

eval 메서드는 확장 프로그램이 다음 컨텍스트에서 JavaScript 코드를 실행할 수 있는 기능을 제공합니다. 확인할 수 있습니다 이 방법은 올바른 상황에서 사용할 경우 효과적이며 사용하면 위험합니다. 있습니다. 특정 기능이 필요하지 않은 경우 tabs.executeScript 메서드를 사용합니다. eval 메서드로 제공됩니다.

eval 메서드와 tabs.executeScript 메서드의 주요 차이점은 다음과 같습니다.

  • eval 메서드는 평가되는 코드에 격리된 환경을 사용하지 않으므로 JavaScript는 코드에 액세스할 수 있는지 확인합니다. 이 메서드를 사용하여 검사된 페이지의 JavaScript 상태가 필요합니다.
  • 평가되는 코드의 실행 컨텍스트에는 Developer Tools 콘솔 API가 포함됩니다. 예를 들어 코드는 inspect 및 $0를 사용할 수 있습니다.
  • 평가된 코드는 확장 프로그램 콜백에 전달되는 값을 반환할 수 있습니다. 반환된 값입니다. 유효한 JSON 객체여야 함 (기본 자바스크립트 유형과 비순환 객체만 포함할 수 있음) 다른 JSON 객체에 대한 참조) 수신된 데이터를 처리하는 동안 각별히 주의하시기 바랍니다. 검사된 페이지에서 삭제: 검사된 페이지에서 실행 컨텍스트가 기본적으로 제어됩니다. a 악성 페이지가 확장 프로그램으로 반환되는 데이터에 영향을 미칠 수 있습니다.
를 통해 개인정보처리방침을 정의할 수 있습니다.

한 페이지에 여러 개의 서로 다른 JavaScript 실행 컨텍스트가 포함될 수 있습니다. 각 프레임에는 해당 컨텍스트에서 실행 중인 콘텐츠 스크립트가 있는 각 확장 프로그램에 대한 추가 컨텍스트를 있습니다.

기본적으로 eval 메서드는 검사된 페이지의 메인 프레임 컨텍스트에서 실행됩니다.

eval 메서드는 두 번째 인수(선택사항)를 사용하며, 이 인수는 코드가 평가됩니다 이 options 객체에는 다음 키 중 하나 이상이 포함될 수 있습니다.

frameURL
검사된 페이지의 기본 프레임이 아닌 프레임을 지정하는 데 사용합니다.
contextSecurityOrigin
웹 출처에 따라 지정된 프레임 내에서 컨텍스트를 선택하는 데 사용합니다.
useContentScriptContext
true인 경우 확장 프로그램의 콘텐츠 스크립트와 동일한 컨텍스트에서 스크립트를 실행합니다. ( 확장 프로그램의 자체 웹 조직을 컨텍스트 보안 출처로 지정). 이는 다음을 수행하는 데 사용할 수 있습니다. 콘텐츠 스크립트와 데이터를 교환할 수 없습니다.

예

다음 코드는 검사한 페이지에서 사용하는 jQuery 버전을 확인합니다.

chrome.devtools.inspectedWindow.eval(
  "jQuery.fn.jquery",
  function(result, isException) {
    if (isException) {
      console.log("the page is not using jQuery");
    } else {
      console.log("The page is using jQuery v" + result);
    }
  }
);

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

유형

Resource

문서, 스크립트, 이미지와 같이 검사된 페이지 내의 리소스입니다.

속성

  • URL

    문자열

    리소스의 URL입니다.

  • getContent

    void

    리소스의 콘텐츠를 가져옵니다.

    getContent 함수는 다음과 같습니다. 

    (callback: function) => {...}

    • 콜백

      함수

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

      (content: string, encoding: string) => void

      • 콘텐츠

        문자열

        인코딩될 수 있는 리소스의 콘텐츠입니다.

      • encoding

        문자열

        콘텐츠가 인코딩되지 않은 경우 비어 있고 그렇지 않으면 인코딩 이름입니다. 현재는 base64만 지원됩니다.

  • setContent

    void

    리소스의 콘텐츠를 설정합니다.

    setContent 함수는 다음과 같습니다. 

    (content: string, commit: boolean, callback?: function) => {...}

    • 콘텐츠

      문자열

      리소스의 새 콘텐츠입니다. 현재 텍스트 유형의 리소스만 지원됩니다.

    • commit

      부울

      사용자가 리소스 수정을 완료했고 리소스의 새 콘텐츠가 유지되어야 하는 경우 true입니다. 사용자가 리소스를 수정하는 동안 전송된 사소한 변경사항인 경우 false입니다.

    • 콜백

      함수 선택사항

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

      (error?: object) => void

      • 오류

        객체(선택사항)

        리소스 콘텐츠가 성공적으로 설정된 경우 정의되지 않음으로 설정됩니다. 은 오류를 설명합니다.

속성

tabId

검사 중인 탭의 ID입니다. 이 ID는 chrome.tabs.*에서 사용할 수 있습니다. 또는 Compute Engine API를 통해 만들 수 있습니다

유형

숫자

메서드

eval()

chrome.devtools.inspectedWindow.eval(
  expression: string,
  options?: object,
  callback?: function,
)

검사된 페이지의 기본 프레임 컨텍스트에서 JavaScript 표현식을 평가합니다. 표현식은 JSON 호환 객체로 평가되어야 합니다. 그렇지 않으면 예외가 발생합니다. eval 함수는 평가 중에 발생하는 DevTools 측 오류 또는 JavaScript 예외를 보고할 수 있습니다. 두 경우 모두 콜백의 result 매개변수는 undefined입니다. DevTools 측 오류의 경우 isException 매개변수는 null이 아니며 isError가 true로 설정되고 code가 오류 코드로 설정됩니다. JavaScript 오류의 경우 isException는 true로 설정되고 value는 발생한 객체의 문자열 값으로 설정됩니다.

매개변수

  • 표현식

    문자열

    평가할 표현식입니다.

  • 옵션

    객체(선택사항)

    옵션 매개변수는 하나 이상의 옵션을 포함할 수 있습니다.

    • frameURL

      문자열(선택사항)

      지정하면 URL이 지정된 iframe과 일치하는 iframe에서 표현식이 평가됩니다. 기본적으로 표현식은 검사된 페이지의 상단 프레임에서 평가됩니다.

    • scriptExecutionContext

      문자열(선택사항)

      Chrome 107 이상 를 통해 개인정보처리방침을 정의할 수 있습니다.

      지정된 출처와 일치하는 확장 프로그램의 콘텐츠 스크립트 컨텍스트에서 표현식을 평가합니다. 지정된 경우scriptExecutionContext는 'true'를 재정의합니다. useContentScriptContext 설정을 사용합니다.

    • useContentScriptContext

      불리언 선택사항

      콘텐츠 스크립트가 검사된 페이지에 이미 삽입되어 있는 경우 호출 확장 프로그램의 콘텐츠 스크립트 컨텍스트에서 표현식을 평가합니다. 그렇지 않으면 표현식이 평가되지 않고 isError 필드가 true로 설정되고 code 필드가 E_NOTFOUND로 설정된 객체로 예외 매개변수가 설정된 상태로 콜백이 호출됩니다.

  • 콜백

    함수 선택사항

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

    (result: object, exceptionInfo: object) => void

    • 결과

      객체

      평가 결과입니다.

    • exceptionInfo

      객체

      표현식을 평가하는 동안 예외가 발생한 경우 세부정보를 제공하는 객체입니다.

      • 코드

        문자열

        표현식이 평가되기 전에 DevTools 측에서 오류가 발생한 경우 설정합니다.

      • 설명

        문자열

        표현식이 평가되기 전에 DevTools 측에서 오류가 발생한 경우 설정합니다.

      • 세부정보

        모두[]

        표현식이 평가되기 전에 DevTools 측에서 오류가 발생한 경우 설정합니다. 여기에는 오류 원인에 대한 추가 정보를 제공하기 위해 설명 문자열에 대체할 수 있는 값의 배열이 포함됩니다.

      • isError

        부울

        표현식이 평가되기 전에 DevTools 측에서 오류가 발생한 경우 설정합니다.

      • isException

        부울

        평가된 코드가 처리되지 않은 예외를 생성하는 경우 설정됩니다.

      • 값

        문자열

        평가된 코드가 처리되지 않은 예외를 생성하는 경우 설정됩니다.

getResources()

chrome.devtools.inspectedWindow.getResources(
  callback: function,
)

검사된 페이지에서 리소스 목록을 검색합니다.

매개변수

  • 콜백

    함수

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

    (resources: Resource[]) => void

    • 리소스

      리소스[]

      페이지 내의 리소스입니다.

reload()

chrome.devtools.inspectedWindow.reload(
  reloadOptions?: object,
)

검사된 페이지를 새로고침합니다.

매개변수

  • reloadOptions

    객체(선택사항)

    • ignoreCache

      불리언 선택사항

      true인 경우 로더가 load 이벤트가 실행되기 전에 로드된 검사된 모든 페이지 리소스의 캐시를 우회합니다. 검사한 창이나 개발자 도구 창 내에서 Ctrl+Shift+R을 누르는 것과 유사한 효과입니다.

    • injectedScript

      문자열(선택사항)

      지정하면 로드 즉시, 프레임의 스크립트 전에 검사된 페이지의 모든 프레임에 스크립트가 삽입됩니다. 후속 새로고침 후에는 스크립트가 삽입되지 않습니다(예: 사용자가 Ctrl+R을 누르는 경우).

    • userAgent

      문자열(선택사항)

      지정하면 문자열이 검사된 페이지의 리소스를 로드하는 동안 전송된 User-Agent HTTP 헤더의 값을 재정의합니다. 이 문자열은 검사된 페이지 내에서 실행 중인 스크립트로 반환되는 navigator.userAgent 속성의 값도 재정의합니다.

이벤트

onResourceAdded

chrome.devtools.inspectedWindow.onResourceAdded.addListener(
  callback: function,
)

검사된 페이지에 새 리소스가 추가되면 실행됩니다.

매개변수

  • 콜백

    함수

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

    (resource: Resource) => void

onResourceContentCommitted

chrome.devtools.inspectedWindow.onResourceContentCommitted.addListener(
  callback: function,
)

리소스의 새 버전이 커밋되면 실행됩니다 (예: 사용자가 개발자 도구에 리소스의 수정된 버전을 저장함).

매개변수

  • 콜백

    함수

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

    (resource: Resource, content: string) => void