Chrome Extension 튜토리얼 따라하기 (1)
- 참고 | Hello Extensions
파일 구조
ㄴ my-extension/
├ manifest.json 💡 루트 디렉토리에 위치
├ background.js
├ src/
⎮ ㄴ content.js
├ popup/
⎮ ├ popup.html
⎮ ├ popup.js
⎮ ㄴ popup.css
⎣ images/
├ icon-16.png
ㄴ icon-32.png- 루트 디렉토리에
manifest.json파일이 배치되어 있는 것을 확인하면 된다.
manifest.json
{
"mainfest_version": 3, // MV3
"name": "Hello Extensions of the world!", // 익스텐션 이름
"description": "Base Level Extension",
"version": "1.0",
"action": {
"default_popup": "hello.html", // 팝업에 표시할 HTML
"default_icon": "hello_extensions.png" // 팝업 아이콘 이미지
}
}action: 확장 프로그램의 작업 아이콘으로 사용해야 하는 이미지 (default_icon)와 확장 프로그램의 작업 아이콘을 클릭했을 때 팝업에 표시할 HTML 페이지를 선언(default_popup)하는 키.
→ name 에 기재한 이름이 아이콘명에 표시된다.
hello.html
<html>
<body>
<h1>Hello Extensions</h1>
</body>
</html>
→ manifest.json 파일 내 default_icon 으로 꽂아둔 이미지가 아이콘으로 표시된다.
→ 아이콘 클릭 시 팝업과 함께 hello.html 파일이 로딩되어 나타난다.
콘솔 로그
개발 중에 브라우저 콘솔 로그에 액세스하여 코드를 디버그할 수 있다.
- 그러기 위해서는
hello.html에 스크립트 태그 를 추가해야 한다.
<!--hello.html-->
<html>
<body>
<h1>Hello Extensions</h1>
<script src="popup.js"></script> // 추가된 스크립트 태그 코드
</body>
</html>popup.js파일을 만들고 다음 코드를 추가해준다.
// popup.js
console.log("This is a popup!")- 팝업을 실행하여
우클릭 > 검사버튼을 클릭 후 DevTools 내 Console 패널로 이동한다.
💡 기초적인 튜토리얼 따라기 완료! :-)
개 발자국 🐾