minimimi

[크롬 확장프로그램 개발]00.개발환경 세팅 및 개발자 모드로 실행시키기 본문

프로그래밍 공부/크롬 확장프로그램 개발

[크롬 확장프로그램 개발]00.개발환경 세팅 및 개발자 모드로 실행시키기

99mini 2023. 3. 24. 19:47
반응형

크롬 확장 프로그램 개발 세팅을 위한 파일 구성과 개발자 모드에서 실행시키는 방법을 소개합니다.

크롬 확장 프로그램이 manifest V3로 업데이트 되면서 api와 manifest.json 작성법이 바뀌어서 검색하며 적용시키는 데 시간을 사용했습니다.

1. 파일 구성하기

chrome-extension-study/
├── manifest.json
└── popup.html

manifest.json 파일

{
  "version": "1.0.0",
  "manifest_version": 3,
  "name": "chrome-extension-study",
  "description": "테스트 코드",
  "action": {
    "default_popup": "popup.html"
  }
}

popup.html 파일

<!DOCTYPE html>
<html>
  <head>
    <title>Hello Popup</title>
  </head>
  <body>
    <h1>Hello, World!</h1>
  </body>
</html>

2. 개발자 모드에서 크롬 확장프로그램 실행하기

1. Chrome 브라우저를 열고 chrome://extensions 페이지로 이동합니다.

2. 페이지 오른쪽 상단의 토글 스위치를 클릭하여 "개발자 모드"를 켭니다.

3. 페이지 왼쪽 상단 모서리에 있는 "압축해제된 확장 프로그램을 로드합니다." 버튼을 클릭합니다.

4. 나타나는 파일 대화 상자에서 확장 코드가 포함된 디렉토리를 선택합니다. 이것은 확장 프로그램의 manifest.json 파일과 확장 프로그램에 필요한 다른 모든 파일을 포함하는 디렉토리여야 합니다.

5. 디렉토리를 선택하면 확장 프로그램이 '확장 프로그램 로드됨'이라는 메시지와 함께 chrome://extensions 페이지에 나타납니다. 이제 확장 프로그램을 Chrome에서 사용할 수 있습니다.

6. 확장 프로그램의 코드를 변경할 때마다 chrome://extensions 페이지에서 확장 프로그램 옆에 있는 "새로고침"  버튼을 클릭하여 확장 프로그램을 다시 로드할 수 있습니다.

Hello World!가 popup으로 나오는 모습을 확인할 수 있다.

반응형
저작자표시

'프로그래밍 공부 > 크롬 확장프로그램 개발' 카테고리의 다른 글

[크롬 확장프로그램 개발]01. popup과 background에서 local 저장소 사용하기 (chrome.storage.local)  (0) 2023.03.25
'프로그래밍 공부/크롬 확장프로그램 개발' Related Articles more