목표 : "Hello World!!" 팝업 출력되는 익스텐션 제작하기
github : https://github.com/GoogleChrome/chrome-extensions-samples/tree/main/tutorials/hello-world
위 Hello World 익스텐션 개발을 위해 충 4개의 파일이 필요하다.
1. manifest.json
{
"name": "Hello Extensions of the world!",
"description": "Base Level Extension",
"version": "1.0",
"manifest_version": 3,
"action": {
"default_popup": "hello.html",
"default_icon": "hello_extensions.png"
}
}manifest.json파일은 익스텐션 개발에 필수적인 파일이다.
필요한 이유
- (우리가 개발할) 익스텐션에 대한 이름, 버전, 설명을 지정
- 익스텐션이 브라우저 데이터에 접근할 수 있는 범위 지정
- 어떤 기능(popup, icon, 크롬이 제공하는 API 등)을 쓸 것인지 지정
첫 포스팅이니 위 항목들을 하나씩 설명하면 다음과 같다.
- name : extension의 이름 - chrome://extensions에서 표시될 이름
- description : extension에 대한 설명 - chrome://extensions에서 표시될 설명
- version : extension의 버전
- manifest_version : manifest.json 파일의 버전을 뜻한다. 현재 일반적으로는 3을 사용하면 된다.
- action : 익스텐션의 행동을 지정해주는 요소들을 가짐
- default_popup : 팝업 페이지의 경로와 파일명을 지정
- default_icon : 익스텐션 아이콘의 경로와 파일명을 지정
2. hello.html
<html>
<body>
<h1>Hello World!!</h1>
<script src="popup.js"></script>
</body>
</html>
3. popup.js
console.log("This is a popup!");
4. hello_extensions.png
개발한 익스텐션 설치하기
1. chrome://extensions 에 접속
2. 개발자 모드를 킨다
3. [압축 해제된 확장 프로그램을 로드합니다] 버튼클릭
4. 폴더 선택
팝업창 디버깅하기
1. 팝업창을 띄운다.
2. 마우스 오른쪽 버튼 클릭
3. 검사 클릭
또 다른 팝업창 디버깅 방법은 다음과 같다.
1. chrome://extensions 페이지 진입
2. 내 extension id를 복사
3. chrome-extension://내익스텐션_ID/hello.html 진입
데이터 수정해보기
1. 소스코드에서 데이터를 수정한다.
2. 저장한다.
변경이 즉시 적용되지 않는 파일도 존재한다. (예를 들면 background.js)
이 경우에는 chrome://extensions 페이지에서 아래의 새로고침 버튼을 클릭해줘야 한다.
참조 : https://developer.chrome.com/docs/extensions/mv3/getstarted/development-basics/
'Extension 튜토리얼' 카테고리의 다른 글
| 크롬 익스텐션 튜토리얼 (6) Tabs Manager - 그룹화 해제 기능 (0) | 2022.12.31 |
|---|---|
| 크롬 익스텐션 튜토리얼 (5) Tabs Manager - hostname별 그룹화 (0) | 2022.12.31 |
| 크롬 익스텐션 튜토리얼 (4) Tabs Manager (0) | 2022.12.30 |
| 크롬 익스텐션 튜토리얼 (3) Focus Mode (0) | 2022.12.30 |
| 크롬 익스텐션 튜토리얼 (2) reading-time (0) | 2022.12.30 |
