chrome.devtools.panels

설명

chrome.devtools.panels API를 사용하여 확장 프로그램을 개발자 도구 창 UI에 통합합니다. 자체 패널을 만들고 기존 패널에 액세스하며 사이드바를 추가합니다.

각 확장 패널과 사이드바는 별도의 HTML 페이지로 표시됩니다. 개발자 도구 창에 표시된 모든 확장 프로그램 페이지는 chrome.devtools API의 모든 모듈과 chrome.extension API에 액세스할 수 있습니다. 다른 확장 프로그램 API는 개발자 도구 창 내의 페이지에서 사용할 수 없지만 콘텐츠 스크립트에서 실행하는 것과 유사하게 확장 프로그램의 백그라운드 페이지로 요청을 전송하여 API를 호출할 수 있습니다.

devtools.panels.setOpenResourceHandler 메서드를 사용하여 리소스를 열기 위한 사용자 요청 (일반적으로 개발자 도구 창에서 리소스 링크 클릭)을 처리하는 콜백 함수를 설치할 수 있습니다. 설치된 핸들러 중 최대 하나가 호출됩니다. 사용자는 개발자 도구 설정 대화상자를 사용하여 기본 동작 또는 리소스 열기 요청을 처리하는 확장 프로그램을 지정할 수 있습니다. 확장 프로그램이 setOpenResourceHandler()를 여러 번 호출하면 마지막 핸들러만 유지됩니다.

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

매니페스트

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

"devtools_page"

예

다음 코드는 Panel.html에 포함된 패널을 추가합니다. 패널은 개발자 도구 툴바에서 FontPicker.png로 표시되고 글꼴 선택 도구로 라벨이 지정되어 있습니다.

chrome.devtools.panels.create("Font Picker",
                              "FontPicker.png",
                              "Panel.html",
                              function(panel) { ... });

다음 코드는 Sidebar.html에 포함되어 있고 제목이 Font Properties인 사이드바 창을 요소 패널에 추가하고 높이를 8ex로 설정합니다.

chrome.devtools.panels.elements.createSidebarPane("Font Properties",
  function(sidebar) {
    sidebar.setPage("Sidebar.html");
    sidebar.setHeight("8ex");
  }
);

스크린샷은 이 예가 개발자 도구 창에 미치는 영향을 보여줍니다.

DevTools 툴바의 확장 프로그램 아이콘 패널

이 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)=> {...}

  • title

    string

    사이드바 자막에 표시되는 텍스트입니다.

  • 콜백

    함수 선택사항

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

    (result: ExtensionSidebarPane)=>void

    • 결과

      ExtensionSidebarPane

      생성된 사이드바 창의 ExtensionSidebarPane 객체입니다.

ExtensionPanel

확장 프로그램에서 만든 패널을 나타냅니다.

속성

• onHidden

  이벤트<functionvoid>

  사용자가 패널에서 나갈 때 시작됩니다.

  onHidden.addListener 함수는 다음과 같습니다.

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

  • 콜백

    기능

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

    ()=>void

• onSearch

  이벤트<functionvoid>

  검색 작업 (새 검색 시작, 검색결과 탐색 또는 검색 취소) 시 실행됩니다.

  onSearch.addListener 함수는 다음과 같습니다.

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

  • 콜백

    기능

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

    (action: string,queryString?: string)=>void

    • 작업

      string

    • queryString

      문자열 선택사항

• onShown

  이벤트<functionvoid>

  사용자가 패널로 전환하면 실행됩니다.

  onShown.addListener 함수는 다음과 같습니다.

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

  • 콜백

    기능

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

    (window: Window)=>void

    • 창

      창

• createStatusBarButton

  void

  패널의 상태 표시줄에 버튼을 추가합니다.

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

  (iconPath: string,tooltipText: string,disabled: boolean)=> {...}

  • iconPath

    string

    버튼 아이콘의 경로입니다. 파일에는 2개의 32x24 아이콘으로 구성된 64x24픽셀 이미지가 포함되어야 합니다. 버튼이 비활성화된 경우 왼쪽 아이콘이 사용되고 버튼을 누르면 오른쪽 아이콘이 표시됩니다.

  • tooltipText

    string

    사용자가 버튼 위로 마우스를 가져가면 도움말로 표시되는 텍스트입니다.

  • 사용중지됨

    boolean

    버튼의 사용 중지 여부입니다.

  • 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)=> {...}

  • 표현식

    string

    검사한 페이지의 컨텍스트에서 평가할 표현식입니다. JavaScript 객체와 DOM 노드는 콘솔/워치와 유사한 확장형 트리에 표시됩니다.

  • rootTitle

    문자열 선택사항

    표현식 트리 루트의 제목(선택사항)입니다.

  • 콜백

    함수 선택사항

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

    ()=>void

• setHeight

  void

  사이드바의 높이를 설정합니다.

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

  (height: string)=> {...}

  • 키

    string

    CSS와 유사한 크기 사양(예: '100px' 또는 '12ex')

• setObject

  void

  사이드바 창에 표시할 JSON 준수 객체를 설정합니다.

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

  (jsonObject: string,rootTitle?: string,callback?: function)=> {...}

  • jsonObject

    string

    검사된 페이지의 컨텍스트에 표시될 객체입니다. 호출자 (API 클라이언트)의 컨텍스트에서 평가됩니다.

  • rootTitle

    문자열 선택사항

    표현식 트리 루트의 제목(선택사항)입니다.

  • 콜백

    함수 선택사항

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

    ()=>void

• setPage

  void

  사이드바 창에 표시할 HTML 페이지를 설정합니다.

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

  (path: string)=> {...}

  • 경로

    string

    사이드바 내에 표시할 확장 페이지의 상대 경로입니다.

SourcesPanel

소스 패널을 나타냅니다.

속성

• onSelectionChanged

  이벤트<functionvoid>

  패널에서 객체를 선택하면 실행됩니다.

  onSelectionChanged.addListener 함수는 다음과 같습니다.

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

  • 콜백

    기능

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

    ()=>void

• createSidebarPane

  void

  패널의 사이드바 내에 창을 만듭니다.

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

  (title: string,callback?: function)=> {...}

  • title

    string

    사이드바 자막에 표시되는 텍스트입니다.

  • 콜백

    함수 선택사항

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

    (result: ExtensionSidebarPane)=>void

    • 결과

      ExtensionSidebarPane

      생성된 사이드바 창의 ExtensionSidebarPane 객체입니다.

속성

elements

요소 패널

유형

ElementsPanel

sources

소스 패널.

유형

SourcesPanel

themeName

Chrome 59 이상

사용자의 DevTools 설정에 설정된 색상 테마의 이름입니다. 가능한 값은 default (기본값) 및 dark입니다.

유형

string

방법

create()

chrome.devtools.panels.create(
  title: string,
  iconPath: string,
  pagePath: string,
  callback?: function,
)

확장 패널을 만듭니다.

매개변수

• title

  string

  개발자 도구 툴바의 확장 프로그램 아이콘 옆에 표시되는 제목

• iconPath

  string

  확장 프로그램 디렉터리를 기준으로 한 패널 아이콘의 경로입니다.

• pagePath

  string

  확장 프로그램 디렉터리를 기준으로 한 패널의 HTML 페이지 경로입니다.

• 콜백

  함수 선택사항

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

  (panel: ExtensionPanel)=>void

  • 패널

    ExtensionPanel

    생성된 패널을 나타내는 ExtensionPanel 객체입니다.

openResource()

chrome.devtools.panels.openResource(
  url: string,
  lineNumber: number,
  columnNumber?: number,
  callback?: function,
)

DevTools에 개발자 도구 패널에서 URL을 열도록 요청합니다.

매개변수

• url

  string

  열려는 리소스의 URL입니다.

• lineNumber

  숫자

  리소스가 로드될 때 스크롤할 줄 번호를 지정합니다.

• columnNumber

  number 선택사항

  Chrome 114 이상

  리소스가 로드될 때 스크롤할 열 번호를 지정합니다.

• 콜백

  함수 선택사항

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

  ()=>void

setOpenResourceHandler()

chrome.devtools.panels.setOpenResourceHandler(
  callback?: function,
)

사용자가 개발자 도구 창에서 리소스 링크를 클릭할 때 호출할 함수를 지정합니다. 핸들러 설정을 해제하려면 매개변수 없이 메서드를 호출하거나 null을 매개변수로 전달합니다.

매개변수

• 콜백

  함수 선택사항

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

  (resource: Resource)=>void

  • 리소스

    리소스

    클릭된 리소스의 devtools.inspectedWindow.Resource 객체