요약
chrome에서 제공하는 "Hello World" 확장프로그램 예제를 만들어봅니다.
확장 프로그램 시작
본격적인 개발에 앞서 chrome에서 제공하는 예제를 통해 확장프로그램을 알아보고자 합니다.
확장프로그램을 만들기 위해서는 manifest.json 이라는 JSON 파일이 필요한데, 이 파일에는 확장프로그램 작업 아이콘 이미지, 아이콘을 클릭했을 때 팝업에 표시될 html 파일 등을 명시합니다.
{
"manifest_version": 3,
"name": "Hello Extensions of the world!",
"description": "Base Level Extension",
"version": "1.0",
"action": {
"default_popup": "hello.html",
"default_icon": "hello_extensions.png"
}
}- name : 확장프로그램에 표시될 이름입니다.
- description : 확장프로그램에 표시될 설명란입니다.
default_icon: 확장프로그램 작업 아이콘 이미지가 들어갑니다default_popup: 확장 프로그램을 실행시켰을 때 나올 html 파일이 들어갑니다.- 이번 예제에서는 아래의 html 파일을 사용하고 있습니다.
<html> <body> <h1>Hello Extensions</h1> </body> </html>
- 이번 예제에서는 아래의 html 파일을 사용하고 있습니다.
콘솔창 사용하기
확장프로그램에는 html 파일 뿐 만 아니라 javascript 파일도 삽입할 수 있습니다.
콘솔창을 사용하는 예제를 통해 확인해볼 수 있습니다.
앞전에 사용되었던 html 파일을 아래와 같이 수정한 후
<html>
<body>
<h1>Hello Extensions</h1>
<script src="popup.js"></script>
</body>
</html>popup.js 파일에 아래와 같이 코드를 작성합니다
console.log("This is a popup!")후에 로드된 확장프로그램을 클릭하여 팝업창을 띄운 후, 우클릭 버톤의 검색 옵션을 통해 콘솔창을 확인할 수 있습니다.
확장 프로그램 로드
위의 과정을 통해 제작된 파일은 chrome://extensions 사이트를 통해 업로드 할 수 있습니다.
오른쪽 상단의 개발자 모드를 통해 "압축해제된 확장 프로그램을 업로드" 가능합니다.
- 실행결과
