브라우저 확장 - DevTools 확장
3932 단어 beginnershtmljavascriptwebdev
기본 세팅이 됩니다. 지금은 아직 아무것도 하지 않습니다. 개발 도구에 무언가를 주입하는 방법을 보여줍니다.
결과는 다음과 같습니다.
Chrome DevTools 확장 프로그램 만들기
확장 프로그램을 만들려면
devtools-extension라는 새 폴더를 만들고 원하는 편집기에서 엽니다.작업의 핵심인
manifest.json 파일을 추가하여 시작합니다.{
"name": "DevTools extension",
"version": "1.0",
"manifest_version": 3,
"devtools_page": "devtools.html"
}
이것은 기본적인 개발 도구 확장에 필요한 모든 것입니다. 여기서 가장 중요한 부분은 주입해야 하는 페이지를 정의하는
devtools_page입니다.이 기본 기반도 추가해 보겠습니다.
<!DOCTYPE html>
<html>
<head>
<script src="/devtools.js"></script>
</head>
</html>
예, JavaScript 파일을 주입하는 데만 사용할 것입니다. 그 파일은 그 대가로 개발 도구 메뉴를 추가하는 소스가 됩니다.
chrome.devtools.panels.create('DDT', null, '/panel.html', null);
이 패널 생성 기능의 옵션은 다음과 같습니다.
우리는 다음과 같은 내용만 표시하려고 하므로 이제 이 파일
panel.html을 추가할 수 있습니다.<html>
<head></head>
<body>
<h1>Basic devtools panel</h1>
</body>
</html>
개발 도구 확장을 추가하려면 일반 브라우저 확장과 동일한 프로세스를 사용할 수 있습니다.
Read more about testing browser extensions
완료되면 임의의 웹 사이트로 이동하면 이제 추가 도구에서 확장 프로그램을 볼 수 있습니다.
이 프로젝트는 GitHub에서도 찾을 수 있습니다.
읽어주셔서 감사합니다. 연결해 봅시다!
제 블로그를 읽어주셔서 감사합니다. 내 이메일 뉴스레터를 구독하고 Facebook에 연결하거나
Reference
이 문제에 관하여(브라우저 확장 - DevTools 확장), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/dailydevtips1/browser-extensions-devtools-extension-47cm텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
