chrome.devtools.panels

설명

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

매니페스트

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

"devtools_page"

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

개요

각 확장 프로그램 패널과 사이드바는 별도의 HTML 페이지로 표시됩니다. 모든 확장 프로그램 페이지가 표시됨 개발자 도구 창에서 chrome.devtools API의 모든 모듈에 액세스할 수 있을 뿐만 아니라 chrome.extension API로 업그레이드됩니다. 다른 확장 프로그램 API는 개발자 내의 페이지에서 사용할 수 없습니다. 도구 창을 실행하지만, 확장 프로그램의 백그라운드 페이지로 요청을 전송하여 호출할 수 있습니다. 콘텐츠 스크립트에서 처리하는 방식과 비슷합니다.

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

다음 코드는Panel.htmlFontPicker.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");
  }
);

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

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

    • 제목

      문자열

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

    • 콜백

      함수 선택사항

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

      (result: ExtensionSidebarPane) => void

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

      문자열

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

    • 사용중지됨

      부울

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

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

속성

elements

요소 패널

유형

sources

소스 패널

유형

themeName

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

사용자의 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을 매개변수로 전달합니다.

매개변수