chrome extension(확장 프로그램)을 만드려면 먼저 manifest.json 파일이 필요하다.
- manifest.json : 확장 프로그램의 이름과 버전과 같은 정보를 기재하는 파일로, 확장 프로그램을 구성할 html 페이지나 이미지, 권한 등을 조정하게 된다. 개발자 사이트에서 더 자세한 내용을 볼 수 있다.
다음은 hello,world를 띄우는 확장 프로그램을 만들기 위한 manifest.json이다.
{
// Required
"manifest_version": 2,
"name": "test_hello",
"version": "1.0.0",
// Recommended
"description": "Print Hello, World! message",
// Pick one (or none)
"browser_action": {
"default_icon" : "icon.png",
"default_popup" : "popup.html"
},
"permissions": [
"<all_urls>"
]
}default_icon은 확장 프로그램의 로고 이미지 파일이고, default_popup의 popup.html은 확장 프로그램의 메인페이지이다.
- popup.html
<!DOCTYPE html>
<html>
<head>
<style>
BODY {width: 520px; min-height: 250px;}
</style>
<script src="popup.js"></script>
</head>
<body>
</body>
</html>- popup.js
function hello(){
document.body.innerText = "Hello, World!";
}
window.onload = hello;
확장 프로그램 업로드
코드를 다 작성한 뒤, 확장 프로그램을 게시하는 방법이다.
1) chrome://extensions/ 으로 들어간 후, 오른쪽 상단의 개발자 모드를 켠다.
2) 왼쪽 상단의 '압축해제된 확장 프로그램을 로드합니다.' 버튼 클릭 후, manifest.json, popup.html, popup.js가 담겨져 있는 폴더를 업로드한다.
3) 업로드 성공!
참고
>> minwook-shin.github.io/chrome-extension/
'DEVELOPMENT > chrome extension' 카테고리의 다른 글
| 크롬 익스텐션 Safe Browsing 소개 (0) | 2020.12.29 |
|---|---|
| chrome.webRequest API로 request 차단하기 (0) | 2020.12.29 |