SW개발

크롬 확장 프로그램 만들기 (Hello, world 출력해보기)

초코쨔응 2019. 7. 17. 12:12

크롬 확장 프로그램을 만들기 위한 tutorial은 https://developer.chrome.com/extensions/getstarted에 나와있다.

하지만 실제 구현을 위해서는 설명이 잘 되어있는 https://beenlife.tistory.com/4를 참고하였다.

 

크롬 확장 프로그램을 만들기 위해서는 다음의 파일들을 한 폴더에 만들어야한다.

가장 먼저 필요한 파일은 manifest.json 파일이다. 이 안에 확장 프로그램의 이름, 버전, 사용할 html 파일의 이름 등이 들어간다.

{
  "manifest_version": 2,

  "name": "example_chromeExtension",
  "description": "Print Hello, World! message",
  "version": "1.0.0",

  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html"
  },
  "permissions": [
    "tabs",
    "<all_urls>"
  ]
}

 

크롬 확장 프로그램의 아이콘은 위에서 'icon.png'라고 이름 붙였기 때문에 그 이름으로 그림을 하나 만든다.

크롬 확장 프로그램 버튼을 클릭했을 때 나오는 화면은 위에서 'popup.html' 이라고 지정해두었다. 따라서 이 이름으로 html 파일을 하나 생성한다. 

<!DOCTYPE html>
<head>
    <style>
        BODY {width: 520px; min-height: 250px;}
    </style>
    <script src="popup.js"></script>
</head>
<body>

</body>
</html>

위의 html 파일에서 작동할 자바스크립트 파일의 이름은 'popup.js'라고 설정했으므로, 이 이름으로 자바스크립트 파일을 생성한다.

function sayHello(){
    document.body.innerText = "Hello, World!";
}
// 페이지가 완전히 로딩된 후 함수 실행
window.onload = sayHello;

여기까지 작성하고 저장하면, 필수적인 파일들을 다 생성하였다.

 

chrome://extensions/으로 이동하여 개발자 모드를 체크한다. 그러면 압축 해제된 확장 프로그램을 로드합니다라는 버튼이 보인다. 이 버튼을 클릭한다.

방금 생성한 폴더를 로드하도록 했더니 바로 추가가 된 것을 확인할 수 있었다.

그리고 동시에 오른쪽 상단에 확장 프로그램 버튼이 생성되었다. 이 버튼을 클릭하면 정상적으로 작동하는 것을 볼 수 있다.

 

반응형