설명
chrome.devtools.panels
API를 사용하여 확장 프로그램을 개발자 도구 창 UI에 통합하세요. 자체 패널을 만들고 기존 패널에 액세스하고 사이드바를 추가할 수 있습니다.
각 확장 프로그램 패널과 사이드바는 별도의 HTML 페이지로 표시됩니다. 모든 확장 프로그램 페이지가 표시됨
개발자 도구 창에서 chrome.devtools
API의 모든 부분에 액세스할 수 있을 뿐만 아니라
사용할 수 있습니다.
devtools.panels.setOpenResourceHandler
메서드를 사용하여 콜백 함수를 설치할 수 있습니다.
는 리소스를 열기 위한 사용자 요청을 처리하는데, 일반적으로
개발자 도구 창)에서 사용할 수 있습니다. 설치된 핸들러 중 최대 하나만 호출됩니다. 지정할 수 있습니다(
기본 동작 또는 리소스를 처리하기 위한 확장 프로그램)를 선택하는 것이 좋습니다.
확인할 수 있습니다 확장 프로그램에서 setOpenResourceHandler()
를 여러 번 호출하는 경우 마지막 호출만
유지됩니다.
Developer Tools API 사용에 관한 일반적인 소개는 DevTools API 요약을 참조하세요.
매니페스트
예
다음 코드는Panel.html
FontPicker.png
글꼴 선택 도구라는 라벨이 지정된 개발자 도구 툴바:
chrome.devtools.panels.create("Font Picker",
"FontPicker.png",
"Panel.html",
function(panel) { ... });
다음 코드는 Sidebar.html
에 포함되고 글꼴 속성이라는 제목의 사이드바 창을
Elements 패널을 사용합니다. 그런 다음 높이를 8ex
로 설정합니다.
chrome.devtools.panels.elements.createSidebarPane("Font Properties",
function(sidebar) {
sidebar.setPage("Sidebar.html");
sidebar.setHeight("8ex");
}
);
스크린샷은 이 예가 개발자 도구 창에 미치는 영향을 보여줍니다.
<ph type="x-smartling-placeholder">![DevTools 툴바의 확장 프로그램 아이콘 패널](https://developer.chrome.com/static/docs/extensions/reference/api/devtools/panels/images/devtools-panels.png?authuser=19&hl=ko)
이 API를 사용하려면 chrome-extension-samples에서 devtools 패널 API 예시를 설치하세요. 저장소
유형
Button
확장 프로그램에서 생성한 버튼
속성
-
onClicked
이벤트<functionvoid>
버튼을 클릭하면 실행됩니다.
onClicked.addListener
함수는 다음과 같습니다.(callback: function) => {...}
-
콜백
함수
callback
매개변수는 다음과 같습니다.() => void
-
-
update
void
버튼의 속성을 업데이트합니다. 인수 중 일부가 생략되거나
null
인 경우 해당 속성이 업데이트되지 않습니다.update
함수는 다음과 같습니다.(iconPath?: string, tooltipText?: string, disabled?: boolean) => {...}
-
iconPath
문자열(선택사항)
버튼의 새 아이콘의 경로입니다.
-
tooltipText
문자열(선택사항)
사용자가 버튼 위로 마우스를 가져가면 도움말로 표시되는 텍스트입니다.
-
사용중지됨
불리언 선택사항
버튼의 사용 중지 여부입니다.
-
ElementsPanel
요소 패널을 나타냅니다.
속성
-
onSelectionChanged
이벤트<functionvoid>
패널에서 객체를 선택하면 실행됩니다.
onSelectionChanged.addListener
함수는 다음과 같습니다.(callback: function) => {...}
-
콜백
함수
callback
매개변수는 다음과 같습니다.() => void
-
-
createSidebarPane
void
패널의 사이드바 내에 창을 만듭니다.
createSidebarPane
함수는 다음과 같습니다.(title: string, callback?: function) => {...}
-
제목
문자열
사이드바 캡션에 표시되는 텍스트입니다.
-
콜백
함수 선택사항
callback
매개변수는 다음과 같습니다.(result: ExtensionSidebarPane) => void
-
생성된 사이드바 창의 ExtensionSidebarPane 객체
-
-
ExtensionPanel
확장 프로그램으로 만든 패널을 나타냅니다.
속성
-
onHidden
이벤트<functionvoid>
사용자가 패널에서 벗어날 때 실행됩니다.
onHidden.addListener
함수는 다음과 같습니다.(callback: function) => {...}
-
콜백
함수
callback
매개변수는 다음과 같습니다.() => void
-
-
onSearch
이벤트<functionvoid>
검색 작업 (새 검색 시작, 검색결과 탐색 또는 검색 취소) 시 실행됩니다.
onSearch.addListener
함수는 다음과 같습니다.(callback: function) => {...}
-
콜백
함수
callback
매개변수는 다음과 같습니다.(action: string, queryString?: string) => void
-
action
문자열
-
queryString
문자열(선택사항)
-
-
-
onShown
이벤트<functionvoid>
사용자가 패널로 전환할 때 실행됩니다.
onShown.addListener
함수는 다음과 같습니다.(callback: function) => {...}
-
콜백
함수
callback
매개변수는 다음과 같습니다.(window: Window) => void
-
창
창
-
-
-
createStatusBarButton
void
패널의 상태 표시줄에 버튼을 추가합니다.
createStatusBarButton
함수는 다음과 같습니다.(iconPath: string, tooltipText: string, disabled: boolean) => {...}
-
iconPath
문자열
버튼 아이콘의 경로입니다. 파일에는 2개의 32x24 아이콘으로 구성된 64x24픽셀 이미지가 포함되어야 합니다. 왼쪽 아이콘은 버튼이 비활성 상태일 때 사용됩니다. 버튼을 누르면 오른쪽 아이콘이 표시됩니다.
-
tooltipText
문자열
사용자가 버튼 위로 마우스를 가져가면 도움말로 표시되는 텍스트입니다.
-
사용중지됨
부울
버튼의 사용 중지 여부입니다.
-
returns
-
ExtensionSidebarPane
확장 프로그램에서 생성한 사이드바.
속성
-
onHidden
이벤트<functionvoid>
사용자가 사이드바 창을 호스팅하는 패널에서 벗어나 사이드바 창이 숨겨지면 실행됩니다.
onHidden.addListener
함수는 다음과 같습니다.(callback: function) => {...}
-
콜백
함수
callback
매개변수는 다음과 같습니다.() => void
-
-
onShown
이벤트<functionvoid>
사용자가 사이드바 창을 호스팅하는 패널로 전환한 결과 사이드바 창이 표시되면 실행됩니다.
onShown.addListener
함수는 다음과 같습니다.(callback: function) => {...}
-
콜백
함수
callback
매개변수는 다음과 같습니다.(window: Window) => void
-
창
창
-
-
-
setExpression
void
검사된 페이지 내에서 평가되는 표현식을 설정합니다. 사이드바 창에 결과가 표시됩니다.
setExpression
함수는 다음과 같습니다.(expression: string, rootTitle?: string, callback?: function) => {...}
-
표현식
문자열
검사된 페이지의 컨텍스트에서 평가할 표현식입니다. JavaScript 객체와 DOM 노드는 콘솔/시계처럼 확장 가능한 트리에 표시됩니다.
-
rootTitle
문자열(선택사항)
표현식 트리 루트의 제목입니다(선택사항).
-
콜백
함수 선택사항
callback
매개변수는 다음과 같습니다.() => void
-
-
setHeight
void
사이드바의 높이를 설정합니다.
setHeight
함수는 다음과 같습니다.(height: string) => {...}
-
높이
문자열
CSS와 유사한 크기 사양(예:
'100px'
또는'12ex'
)
-
-
setObject
void
사이드바 창에 표시할 JSON 호환 객체를 설정합니다.
setObject
함수는 다음과 같습니다.(jsonObject: string, rootTitle?: string, callback?: function) => {...}
-
jsonObject
문자열
검사된 페이지의 컨텍스트에 표시될 객체입니다. 호출자 (API 클라이언트)의 컨텍스트에서 평가됩니다.
-
rootTitle
문자열(선택사항)
표현식 트리 루트의 제목입니다(선택사항).
-
콜백
함수 선택사항
callback
매개변수는 다음과 같습니다.() => void
-
-
setPage
void
사이드바 창에 표시할 HTML 페이지를 설정합니다.
setPage
함수는 다음과 같습니다.(path: string) => {...}
-
경로
문자열
사이드바 내에 표시할 확장 프로그램 페이지의 상대 경로입니다.
-
SourcesPanel
소스 패널을 나타냅니다.
속성
-
onSelectionChanged
이벤트<functionvoid>
패널에서 객체를 선택하면 실행됩니다.
onSelectionChanged.addListener
함수는 다음과 같습니다.(callback: function) => {...}
-
콜백
함수
callback
매개변수는 다음과 같습니다.() => void
-
-
createSidebarPane
void
패널의 사이드바 내에 창을 만듭니다.
createSidebarPane
함수는 다음과 같습니다.(title: string, callback?: function) => {...}
-
제목
문자열
사이드바 캡션에 표시되는 텍스트입니다.
-
콜백
함수 선택사항
callback
매개변수는 다음과 같습니다.(result: ExtensionSidebarPane) => void
-
생성된 사이드바 창의 ExtensionSidebarPane 객체
-
-
속성
elements
요소 패널
sources
소스 패널
유형
themeName
사용자의 DevTools 설정에 설정된 색상 테마의 이름입니다. 가능한 값은 default
(기본값) 및 dark
입니다.
유형
문자열
메서드
create()
chrome.devtools.panels.create(
title: string,
iconPath: string,
pagePath: string,
callback?: function,
)
확장 패널을 생성합니다.
매개변수
-
제목
문자열
개발자 도구 툴바의 확장 프로그램 아이콘 옆에 표시되는 제목
-
iconPath
문자열
확장 프로그램 디렉터리를 기준으로 한 패널 아이콘의 경로입니다.
-
pagePath
문자열
확장 프로그램 디렉터리를 기준으로 한 패널의 HTML 페이지 경로입니다.
-
콜백
함수 선택사항
callback
매개변수는 다음과 같습니다.(panel: ExtensionPanel) => void
-
생성된 패널을 나타내는 ExtensionPanel 객체입니다.
-
openResource()
chrome.devtools.panels.openResource(
url: string,
lineNumber: number,
columnNumber?: number,
callback?: function,
)
DevTools에 개발자 도구 패널에서 URL을 열도록 요청합니다.
매개변수
-
URL
문자열
열려는 리소스의 URL입니다.
-
lineNumber
숫자
리소스가 로드될 때 스크롤할 줄 번호를 지정합니다.
-
columnNumber
숫자 선택사항
Chrome 114 이상 를 통해 개인정보처리방침을 정의할 수 있습니다.리소스가 로드될 때 스크롤할 열 번호를 지정합니다.
-
콜백
함수 선택사항
callback
매개변수는 다음과 같습니다.() => void
setOpenResourceHandler()
chrome.devtools.panels.setOpenResourceHandler(
callback?: function,
)
사용자가 개발자 도구 창에서 리소스 링크를 클릭할 때 호출할 함수를 지정합니다. 핸들러를 설정 해제하려면 매개변수 없이 메서드를 호출하거나 null을 매개변수로 전달합니다.
매개변수
-
콜백
함수 선택사항
callback
매개변수는 다음과 같습니다.(resource: Resource) => void
-
리소스
클릭된 리소스의
devtools.inspectedWindow.Resource
객체.
-