설명
chrome.devtools.inspectedWindow API를 사용하여 검사된 창과 상호작용합니다. 검사된 페이지의 탭 ID를 가져오거나, 검사된 창의 컨텍스트에서 코드를 평가하거나, 페이지를 새로고침하거나, 페이지 내의 리소스 목록을 가져올 수 있습니다.
개발자 도구 API 사용에 관한 일반적인 소개는 개발자 도구 API 요약을 참고하세요.
tabId 속성은 chrome.tabs.*
API 호출과 함께 사용할 수 있는 탭 식별자를 제공합니다. 하지만 보안상의 이유로 chrome.tabs.* API는 개발자 도구 확장 프로그램 페이지에 노출되지 않습니다. 탭 ID를 백그라운드 페이지에 전달하고 거기에서 chrome.tabs.* API 함수를 호출해야 합니다.
reload 메서드를 사용하여 검사된 페이지를 새로고침할 수 있습니다. 또한 호출자는 사용자 에이전트 문자열의 재정의, 페이지 로드 시 초기에 삽입되는 스크립트 또는 캐시된 리소스의 강제 새로고침 옵션을 지정할 수 있습니다.
getResources 호출 및 onResourceContent 이벤트를 사용하여 검사된 페이지 내의 리소스(문서, 스타일시트, 스크립트, 이미지 등) 목록을 가져옵니다. getContent 및
setContent 메서드는 Resource 클래스의 onResourceContentCommitted 이벤트와 함께 리소스 콘텐츠 수정을 지원하는 데 사용할 수 있습니다(예: 외부 편집기 사용).
매니페스트
검사된 창에서 코드 실행
eval 메서드를 사용하면 확장 프로그램이 검사된 페이지의 컨텍스트에서 JavaScript 코드를 실행할 수 있습니다. 이 메서드는 올바른 컨텍스트에서 사용하면 강력하지만 부적절하게 사용하면 위험합니다. eval 메서드가 제공하는 특정 기능
이 필요하지 않은 경우 tabs.executeScript 메서드를 사용하세요.
eval 메서드와 tabs.executeScript 메서드의 주요 차이점은 다음과 같습니다.
eval메서드는 평가되는 코드에 격리된 세계를 사용하지 않으므로 검사된 창의 JavaScript 상태에 코드에서 액세스할 수 있습니다. 검사된 페이지의 JavaScript 상태에 액세스해야 하는 경우 이 메서드를 사용하세요.- 평가되는 코드의 실행 컨텍스트에는 개발자 도구 콘솔 API가 포함됩니다.
예를 들어 코드는
inspect및$0을 사용할 수 있습니다. - 평가된 코드는 확장 프로그램 콜백에 전달되는 값을 반환할 수 있습니다. 반환된 값은 유효한 JSON 객체여야 합니다 (기본 JavaScript 유형과 다른 JSON 객체에 대한 비순환 참조만 포함할 수 있음). 검사된 페이지에서 수신한 데이터를 처리할 때는 특히 주의하세요. 실행 컨텍스트는 기본적으로 검사된 페이지에서 제어됩니다. 악성 페이지는 확장 프로그램에 반환되는 데이터에 영향을 미칠 수 있습니다.
페이지에는 여러 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를 사용해 보려면 devtools API 예시를 chrome-extension-samples 저장소에서 설치하세요.
유형
Resource
문서, 스크립트 또는 이미지와 같이 검사된 페이지 내의 리소스입니다.
속성
-
URL
문자열
리소스의 URL입니다.
-
getContent
void
리소스의 콘텐츠를 가져옵니다.
getContent함수는 다음과 같습니다.(callback: function) => {...}
-
callback
함수
callback매개변수는 다음과 같습니다.(content: string, encoding: string) => void
-
콘텐츠
문자열
리소스의 콘텐츠 (인코딩될 수 있음).
-
인코딩
문자열
콘텐츠가 인코딩되지 않은 경우 비어 있고, 그렇지 않은 경우 인코딩 이름입니다. 현재는 base64만 지원됩니다.
-
-
-
setContent
void
리소스의 콘텐츠를 설정합니다.
setContent함수는 다음과 같습니다.(content: string, commit: boolean, callback?: function) => {...}
-
콘텐츠
문자열
리소스의 새 콘텐츠입니다. 현재는 텍스트 유형의 리소스만 지원됩니다.
-
commit
부울
사용자가 리소스 편집을 완료했고 리소스의 새 콘텐츠를 유지해야 하는 경우 true입니다. 사용자가 리소스를 편집하는 동안 전송된 사소한 변경사항인 경우 false입니다.
-
callback
함수 (선택사항)
callback매개변수는 다음과 같습니다.(error?: object) => void
-
오류
객체 (선택사항)
리소스 콘텐츠가 성공적으로 설정된 경우 undefined로 설정됩니다. 그렇지 않은 경우 오류를 설명합니다.
-
-
속성
tabId
검사 중인 탭의 ID입니다. 이 ID는 chrome.tabs.* API와 함께 사용할 수 있습니다.
유형
숫자
메서드
eval()
chrome.devtools.inspectedWindow.eval(
expression: string,
options?: object,
callback?: function,
): void
검사된 페이지의 기본 프레임 컨텍스트에서 JavaScript 표현식을 평가합니다. 표현식은 JSON 호환 객체로 평가되어야 합니다. 그렇지 않으면 예외가 발생합니다. eval 함수는 평가 중에 발생하는 개발자 도구 측 오류 또는 JavaScript 예외를 보고할 수 있습니다. 두 경우 모두 콜백의 result 매개변수는 undefined입니다. 개발자 도구 측 오류의 경우 isException 매개변수는 null이 아니며 isError가 true로 설정되고 code가 오류 코드로 설정됩니다. JavaScript 오류의 경우 isException이 참으로 설정되고 value가 발생한 객체의 문자열 값으로 설정됩니다.
매개변수
-
표현식
문자열
평가할 표현식입니다.
-
옵션
객체 (선택사항)
옵션 매개변수에는 하나 이상의 옵션이 포함될 수 있습니다.
-
frameURL
문자열 선택사항
지정된 경우 표현식은 지정된 URL과 일치하는 URL을 가진 iframe에서 평가됩니다. 기본적으로 표현식은 검사된 페이지의 최상위 프레임에서 평가됩니다.
-
scriptExecutionContext
문자열 선택사항
Chrome 107 이상지정된 출처와 일치하는 확장 프로그램의 콘텐츠 스크립트 컨텍스트에서 표현식을 평가합니다. 제공된 경우 scriptExecutionContext는 useContentScriptContext의 'true' 설정을 재정의합니다.
-
useContentScriptContext
부울 선택사항
콘텐츠 스크립트가 이미 검사된 페이지에 삽입되어 있는 경우 호출 확장 프로그램의 콘텐츠 스크립트 컨텍스트에서 표현식을 평가합니다. 그렇지 않으면 표현식이 평가되지 않고 콜백이
isError필드가 true로 설정되고code필드가E_NOTFOUND로 설정된 객체로 설정된 exception 매개변수와 함께 호출됩니다.
-
-
callback
함수 (선택사항)
callback매개변수는 다음과 같습니다.(result: object, exceptionInfo: object) => void
-
결과
객체
평가 결과입니다.
-
exceptionInfo
객체
표현식을 평가하는 동안 예외가 발생한 경우 세부정보를 제공하는 객체입니다.
-
코드
문자열
표현식이 평가되기 전에 개발자 도구 측에서 오류가 발생한 경우 설정됩니다.
-
설명
문자열
표현식이 평가되기 전에 개발자 도구 측에서 오류가 발생한 경우 설정됩니다.
-
세부정보
any[]
표현식이 평가되기 전에 개발자 도구 측에서 오류가 발생한 경우 설정됩니다. 오류의 원인에 관한 자세한 정보를 제공하기 위해 설명 문자열로 대체될 수 있는 값의 배열을 포함합니다.
-
isError
부울
표현식이 평가되기 전에 개발자 도구 측에서 오류가 발생한 경우 설정됩니다.
-
isException
부울
평가된 코드에서 처리되지 않은 예외가 발생하는 경우 설정됩니다.
-
값
문자열
평가된 코드에서 처리되지 않은 예외가 발생하는 경우 설정됩니다.
-
-
getResources()
chrome.devtools.inspectedWindow.getResources(
callback: function,
): void
검사된 페이지에서 리소스 목록을 가져옵니다.
매개변수
reload()
chrome.devtools.inspectedWindow.reload(
reloadOptions?: object,
): void
검사된 페이지를 새로고침합니다.
매개변수
-
reloadOptions
객체 (선택사항)
-
ignoreCache
부울 선택사항
true인 경우 로더는
load이벤트가 발생하기 전에 로드된 모든 검사된 페이지 리소스의 캐시를 무시합니다. 이 효과는 검사된 창 또는 개발자 도구 창 내에서 Ctrl+Shift+R을 누르는 것과 비슷합니다. -
injectedScript
문자열 선택사항
지정된 경우 스크립트는 프레임의 스크립트보다 먼저 로드 시 검사된 페이지의 모든 프레임에 삽입됩니다. 스크립트는 후속 새로고침 후에는 삽입되지 않습니다(예: 사용자가 Ctrl+R을 누르는 경우).
-
userAgent
문자열 선택사항
지정된 경우 이 문자열은 검사된 페이지의 리소스를 로드하는 동안 전송되는
User-AgentHTTP 헤더의 값을 재정의합니다. 또한 이 문자열은 검사된 페이지 내에서 실행되는 스크립트에 반환되는navigator.userAgent속성의 값을 재정의합니다.
-
이벤트
onResourceAdded
chrome.devtools.inspectedWindow.onResourceAdded.addListener(
callback: function,
)
검사된 페이지에 새 리소스가 추가될 때 발생합니다.
onResourceContentCommitted
chrome.devtools.inspectedWindow.onResourceContentCommitted.addListener(
callback: function,
)
리소스의 새 수정사항이 커밋될 때 발생합니다 (예: 사용자가 개발자 도구에서 리소스의 수정된 버전을 저장함).