-
크롬 확장 프로그램 만들기 (Hello, world 출력해보기)SW개발 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/으로 이동하여 개발자 모드를 체크한다. 그러면 압축 해제된 확장 프로그램을 로드합니다라는 버튼이 보인다. 이 버튼을 클릭한다.
방금 생성한 폴더를 로드하도록 했더니 바로 추가가 된 것을 확인할 수 있었다.
그리고 동시에 오른쪽 상단에 확장 프로그램 버튼이 생성되었다. 이 버튼을 클릭하면 정상적으로 작동하는 것을 볼 수 있다.
'SW개발' 카테고리의 다른 글
MkDocs 를 이용하여 문서 사이트 만들기 (0) 2021.03.21 Time Timer extension 만들기 - 2 (Timer 형태로 변형하기) (0) 2019.07.17 Time Timer extension 만들기 - 1 (시계 형태 만들기) (0) 2019.07.17 PyQt를 활용한 Python 명령어 실행 프로그램 만들기 (0) 2019.03.06 Python tkinter를 활용한 tensorflow 자동 run 프로그램 만들기 (0) 2019.03.06 댓글