DevTools 확장

개요

DevTools 확장 프로그램은 Chrome DevTools에 기능을 추가합니다. 새 UI 패널을 추가하고 사이드바를 확인하고, 검사한 페이지와 상호작용하고, 네트워크 요청에 대한 정보를 얻는 등 다양한 작업을 할 수 있습니다. 보기 추천 DevTools 확장 프로그램. DevTools 확장 프로그램을 사용하면 DevTools 전용 확장 프로그램 API:

• devtools.inspectedWindow
• devtools.network
• devtools.panels

DevTools 확장 프로그램은 다른 확장과 마찬가지로 구조화되어 있습니다. 즉, 백그라운드 페이지, 스크립트 및 기타 항목이 포함됩니다. 또한 각 DevTools 확장 프로그램에는 DevTools 페이지가 있어 DevTools API에 추가하는 방법을 알아보겠습니다.

DevTools 페이지

확장 프로그램의 DevTools 페이지 인스턴스는 DevTools 창이 열릴 때마다 생성됩니다. 이 DevTools 페이지가 DevTools 창의 전체 기간 동안 존재합니다. DevTools 페이지는 DevTools API 및 제한된 확장 API 세트를 제공합니다. 특히 DevTools 페이지는 다음을 수행할 수 있습니다.

• devtools.panels API를 사용하여 패널을 만들고 상호작용합니다.
• 다음을 사용하여 검사된 창에 관한 정보를 가져오고 검사된 창의 코드를 평가합니다. devtools.inspectedWindow API
• devtools.network API를 사용하여 네트워크 요청에 관한 정보를 가져옵니다.

DevTools 페이지는 대부분의 확장 프로그램 API를 직접 사용할 수 없습니다. 동일한 하위 집합에 액세스할 수 있음 콘텐츠 스크립트에서 액세스할 수 있는 extension 및 runtime API의 역할을 합니다. 콘텐츠에 좋아요 표시 스크립트를 사용하면 DevTools 페이지는 메시지 전달을 사용하여 백그라운드 페이지와 통신할 수 있습니다. 콘텐츠 스크립트 삽입을 참고하세요.

DevTools 확장 프로그램 만들기

확장 프로그램의 DevTools 페이지를 만들려면 확장 프로그램에 devtools_page 필드를 추가합니다. 매니페스트:

{
  "name": ...
  "version": "1.0",
  "minimum_chrome_version": "10.0",
  "devtools_page": "devtools.html",
  ...
}

확장 프로그램의 매니페스트에 지정된 devtools_page 인스턴스는 DevTools 창이 열렸습니다. 페이지에서 다른 확장 페이지를 패널 및 사이드바로 추가할 수 devtools.panels API를 사용하는 DevTools 창

chrome.devtools.* API 모듈은 DevTools 내에서 로드된 페이지에서만 사용할 수 있습니다. 창 콘텐츠 스크립트 및 기타 확장 프로그램 페이지에는 이러한 API가 없습니다. 따라서 API는 DevTools 창의 전체 기간 동안만 사용할 수 있습니다.

아직 실험 중인 DevTools API도 있습니다. chrome.experimental* 페이지를 참고하세요. API를 참조하세요.

DevTools UI 요소: 패널 및 사이드바 창

브라우저 작업, 컨텍스트 메뉴 및 팝업과 같은 일반적인 확장 UI 요소 외에도 DevTools 확장 프로그램은 DevTools 창에 UI 요소를 추가할 수 있습니다.

• 패널은 요소, 소스, 네트워크 패널과 같은 최상위 탭입니다.
• 사이드바 창은 패널과 관련된 보조 UI를 표시합니다. 스타일, 계산된 스타일 및 요소 패널의 이벤트 리스너 창이 사이드바 창의 예입니다. (참고: 사용 중인 Chrome 버전에 따라 메뉴 창의 모양이 이미지와 일치하지 않을 수 있습니다. DevTools 창이 도킹된 위치를 찾을 수 있습니다.)

각 패널은 자체 HTML 파일로, 다른 리소스 (JavaScript, CSS, 이미지 등)를 포함할 수 있습니다. '사용'). 기본 패널을 만드는 방법은 다음과 같습니다.

chrome.devtools.panels.create("My Panel",
    "MyPanelIcon.png",
    "Panel.html",
    function(panel) {
      // code invoked on panel creation
    }
);

패널 또는 사이드바 창에서 실행된 JavaScript는 DevTools 페이지와 동일한 API에 액세스할 수 있습니다.

Elements 패널의 기본 사이드바 창을 생성하는 방법은 다음과 같습니다.

chrome.devtools.panels.elements.createSidebarPane("My Sidebar",
    function(sidebar) {
        // sidebar initialization code here
        sidebar.setObject({ some_data: "Some data to show" });
});

사이드바 창에 콘텐츠를 표시하는 방법에는 여러 가지가 있습니다.

• HTML 콘텐츠입니다. setPage를 호출하여 창에 표시할 HTML 페이지를 지정합니다.
• JSON 데이터입니다. JSON 객체를 setObject에 전달합니다.
• JavaScript 표현식에 저장됩니다. 표현식을 setExpression에 전달합니다. DevTools는 표현식을 사용하고 반환 값을 표시합니다.

setObject와 setExpression의 경우 창에 다음과 같이 값이 표시됩니다. DevTools 콘솔에서 사용할 수 있습니다. 그러나 setExpression를 사용하면 DOM 요소와 임의의 JavaScript를 표시할 수 있습니다. setObject는 JSON 객체만 지원합니다.

확장 프로그램 구성요소 간 통신

다음 섹션에서는 서로 다른 두 서비스 간의 통신에 대한 몇 가지 일반적인 시나리오를 설명합니다. 구성 요소부터 살펴보겠습니다.

콘텐츠 스크립트 삽입

DevTools 페이지에서는 tabs.executeScript를 직접 호출할 수 없습니다. 다음에서 콘텐츠 스크립트를 삽입하려면 DevTools 페이지에서 검사한 창 탭의 ID는 inspectedWindow.tabId 속성을 사용하여 백그라운드 페이지에 메시지를 전송합니다. tabs.executeScript를 호출하여 스크립트를 삽입합니다.

다음 코드 스니펫은 executeScript를 사용하여 콘텐츠 스크립트를 삽입하는 방법을 보여줍니다.

// DevTools page -- devtools.js
// Create a connection to the background page
var backgroundPageConnection = chrome.runtime.connect({
    name: "devtools-page"
});

backgroundPageConnection.onMessage.addListener(function (message) {
    // Handle responses from the background page, if any
});

// Relay the tab ID to the background page
chrome.runtime.sendMessage({
    tabId: chrome.devtools.inspectedWindow.tabId,
    scriptToInject: "content_script.js"
});

백그라운드 페이지 코드:

// Background page -- background.js
chrome.runtime.onConnect.addListener(function(devToolsConnection) {
    // assign the listener function to a variable so we can remove it later
    var devToolsListener = function(message, sender, sendResponse) {
        // Inject a content script into the identified tab
        chrome.tabs.executeScript(message.tabId,
            { file: message.scriptToInject });
    }
    // add the listener
    devToolsConnection.onMessage.addListener(devToolsListener);

    devToolsConnection.onDisconnect.addListener(function() {
         devToolsConnection.onMessage.removeListener(devToolsListener);
    });
});

검사된 창에서 JavaScript 평가

inspectedWindow.eval 메서드를 사용하여 검사된 페이지 DevTools 페이지, 패널 또는 사이드바 창에서 eval 메서드를 호출할 수 있습니다.

기본적으로 표현식은 페이지의 메인 프레임 컨텍스트에서 평가됩니다. 이제 요소 검사와 같은 DevTools 명령줄 API 기능 숙지 (inspect(elem)), 함수 중단 (debug(fn)), 클립보드에 복사 (copy()) 등 inspectedWindow.eval()는 DevTools 콘솔을 사용하면 eval 내에서 이러한 API에 액세스할 수 있습니다. 예를 들어 SOAK는 를 참조하세요.

chrome.devtools.inspectedWindow.eval(
  "inspect($$('head script[data-soak=main]')[0])",
  function(result, isException) { }
);

또는 inspectedWindow.eval()에 useContentScriptContext: true 옵션을 사용하여 다음을 수행합니다. 콘텐츠 스크립트와 동일한 컨텍스트에서 표현식을 평가합니다. eval님에게 전화 거는 중 useContentScriptContext: true는 콘텐츠 스크립트 컨텍스트를 생성하지 않으므로 eval를 호출하기 전에 executeScript를 호출하거나 콘텐츠를 지정하여 컨텍스트 스크립트 실행 manifest.json 파일에 있습니다.

컨텍스트 스크립트 컨텍스트가 존재하면 이 옵션을 사용하여 추가 콘텐츠를 삽입할 수 있습니다. 사용할 수 있습니다

eval 메서드는 올바른 컨텍스트에서 사용할 경우 효과적이며 사용하면 위험합니다. 있습니다. 다음 항목에 액세스할 필요가 없다면 tabs.executeScript 메서드를 사용합니다. 검사된 페이지의 JavaScript 컨텍스트입니다. 자세한 주의사항과 두 가지 방법의 비교를 위해 inspectedWindow를 참고하세요.

선택한 요소를 콘텐츠 스크립트에 전달

콘텐츠 스크립트에서 현재 선택된 요소에 직접 액세스할 수 없습니다. 하지만 inspectedWindow.eval를 사용하여 실행, DevTools 콘솔 및 명령줄 API에 액세스할 수 있습니다. 예를 들어 평가된 코드에서 $0를 사용하여 선택된 요소에 액세스할 수 있습니다.

선택한 요소를 콘텐츠 스크립트에 전달하는 방법:

• 콘텐츠 스크립트에 선택한 요소를 인수로 사용하는 메서드를 만듭니다.
• inspectedWindow.eval를 다음과 함께 사용하여 DevTools 페이지에서 메서드를 호출합니다. useContentScriptContext: true 옵션.

콘텐츠 스크립트의 코드는 다음과 같습니다.

function setSelectedElement(el) {
    // do something with the selected element
}

다음과 같이 DevTools 페이지에서 메서드를 호출합니다.

chrome.devtools.inspectedWindow.eval("setSelectedElement($0)",
    { useContentScriptContext: true });

useContentScriptContext: true 옵션은 콘텐츠 스크립트와 동일한 컨텍스트를 사용하므로 setSelectedElement 메서드에 액세스할 수 있습니다.

참조 패널의 window 가져오기

devtools 패널에서 postMessage하려면 window 객체 참조가 필요합니다. panel.onShown 이벤트 핸들러에서 패널의 iframe 창을 가져옵니다.

onShown.addListener(function callback)
extensionPanel.onShown.addListener(function (extPanelWindow) {
    extPanelWindow instanceof Window; // true
    extPanelWindow.postMessage( // …
});

콘텐츠 스크립트에서 DevTools 페이지로의 메시지

DevTools 페이지와 콘텐츠 스크립트 간의 메시징은 백그라운드 페이지를 통해 간접적으로 이루어집니다.

콘텐츠 스크립트로 메시지를 보낼 때 백그라운드 페이지에서 tabs.sendMessage 메서드: 특정 탭의 콘텐츠 스크립트로 메시지를 전달합니다. 이 작업은 콘텐츠 스크립트 삽입에 나와 있습니다.

콘텐츠 스크립트에서 메시지를 보낼 때 미리 준비된 메시지 전달 방법은 없음 현재 탭과 관련된 올바른 DevTools 페이지 인스턴스로 돌아갑니다. 이 문제를 해결하려면 DevTools 페이지는 백그라운드 페이지와의 장기 연결을 설정하고 탭 ID를 연결의 지도로 유지하여 각 메시지를 올바른 위치로 라우팅할 수 있습니다. 연결

// background.js
var connections = {};

chrome.runtime.onConnect.addListener(function (port) {

    var extensionListener = function (message, sender, sendResponse) {

        // The original connection event doesn't include the tab ID of the
        // DevTools page, so we need to send it explicitly.
        if (message.name == "init") {
          connections[message.tabId] = port;
          return;
        }

    // other message handling
    }

    // Listen to messages sent from the DevTools page
    port.onMessage.addListener(extensionListener);

    port.onDisconnect.addListener(function(port) {
        port.onMessage.removeListener(extensionListener);

        var tabs = Object.keys(connections);
        for (var i=0, len=tabs.length; i < len; i++) {
          if (connections[tabs[i]] == port) {
            delete connections[tabs[i]]
            break;
          }
        }
    });
});

// Receive message from content script and relay to the devTools page for the
// current tab
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
    // Messages from content scripts should have sender.tab set
    if (sender.tab) {
      var tabId = sender.tab.id;
      if (tabId in connections) {
        connections[tabId].postMessage(request);
      } else {
        console.log("Tab not found in connection list.");
      }
    } else {
      console.log("sender.tab not defined.");
    }
    return true;
});

DevTools 페이지 (또는 패널 또는 사이드바 창)에서는 다음과 같이 연결을 설정합니다.

// Create a connection to the background page
var backgroundPageConnection = chrome.runtime.connect({
    name: "panel"
});

backgroundPageConnection.postMessage({
    name: 'init',
    tabId: chrome.devtools.inspectedWindow.tabId
});

삽입된 스크립트에서 DevTools 페이지로의 메시지

위의 솔루션은 콘텐츠 스크립트에서 작동하지만, 페이지에 직접 삽입되는 코드는 (예: <script> 태그 추가 또는 inspectedWindow.eval를 통해)에는 전략을 세울 수 있습니다 이 문맥에서 runtime.sendMessage는 백그라운드 스크립트가 제대로 작동하는지 확인합니다.

이 문제를 해결하려면 삽입된 스크립트를 중개자라고 해도 과언이 아닙니다. 메시지를 콘텐츠 스크립트에 전달하려면 window.postMessage API에 액세스할 수 있습니다. 다음은 이전 섹션의 백그라운드 스크립트를 가정한 예입니다.

// injected-script.js

window.postMessage({
  greeting: 'hello there!',
  source: 'my-devtools-extension'
}, '*');

// content-script.js

window.addEventListener('message', function(event) {
  // Only accept messages from the same frame
  if (event.source !== window) {
    return;
  }

  var message = event.data;

  // Only accept messages that we know are ours
  if (typeof message !== 'object' || message === null ||
      !message.source === 'my-devtools-extension') {
    return;
  }

  chrome.runtime.sendMessage(message);
});

이제 삽입된 스크립트에서 콘텐츠 스크립트, 백그라운드로 메시지가 전달됩니다. 스크립트, 그리고 마지막으로 DevTools 페이지로 이동합니다.

여기에서 두 가지 대체 메시지 전달 기술을 고려해 볼 수도 있습니다.

DevTools 열기 및 닫기 감지

확장 프로그램에서 DevTools 창이 열려 있는지 추적해야 하는 경우 onConnect DevTools 페이지에서 connect를 호출할 수 있습니다. 각 탭은 자체 DevTools 창이 열려 있으면 여러 연결 이벤트를 수신할 수 있습니다. 디코더가 작동하지 않는지 DevTools 창이 열리면 아래와 같이 연결 및 연결 해제 이벤트를 계산해야 합니다.

// background.js
var openCount = 0;
chrome.runtime.onConnect.addListener(function (port) {
    if (port.name == "devtools-page") {
      if (openCount == 0) {
        alert("DevTools window opening.");
      }
      openCount++;

      port.onDisconnect.addListener(function(port) {
          openCount--;
          if (openCount == 0) {
            alert("Last DevTools window closing.");
          }
      });
    }
});

DevTools 페이지는 다음과 같은 연결을 생성합니다.

// devtools.js

// Create a connection to the background page
var backgroundPageConnection = chrome.runtime.connect({
    name: "devtools-page"
});

DevTools 확장 프로그램 예

다음 DevTools 확장 프로그램 예시의 소스를 살펴보세요.

• Polymer Devtools 확장 프로그램 - 호스트 페이지에서 실행되는 많은 도우미를 사용하여 DOM/JS를 쿼리합니다. 상태를 맞춤 패널로 다시 보냅니다.
• React DevTools 확장 프로그램 - Blink의 하위 모듈을 사용하여 DevTools UI 구성요소를 재사용합니다.
• Ember Inspector - Chrome 및 Firefox용 어댑터가 포함된 공유 확장 프로그램 코어입니다.
• Coquette-inspect - 디버깅 에이전트가 주입된 깔끔한 React 기반 확장 프로그램 호스트 페이지
• DevTools 확장 프로그램 갤러리 및 샘플 확장 프로그램에는 더 많은 유용한 앱이 있습니다. 설치하고, 사용해 보고, 배울 수 있었습니다.

추가 정보

확장 프로그램에서 사용할 수 있는 표준 API에 관한 자세한 내용은 chrome.*을 참고하세요. API 및 웹 API를 참조하세요.

의견 보내기 여러분의 의견과 제안은 API를 개선하는 데 도움이 됩니다.

예

샘플에서 DevTools API를 사용하는 예를 확인할 수 있습니다.