💡 핵심 요약 (Executive Summary)
본 가이드는 to be chrome extensions 개발 핵심 가이드 및 실전 아키텍처의 핵심 개념, 실전 구성 명령어 및 아키텍처 베스트 프랙티스를 다룹니다. 클라우드 네이티브 및 인프라 엔지니어링 실무에 즉시 활용 가능하도록 체계적으로 정리했습니다.
Sample
manifest.json
json
{
"manifest_version": 3,
"name": "My First Extension",
"version": "1.0",
"description": "클릭하면 인사를 건네는 팝업 프로그램",
"action": {
"default_popup": "popup.html"
},
"permissions": ["activeTab"]
}popup.html
html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<style>
body { width: 200px; padding: 10px; font-family: sans-serif; text-align: center; }
button { background: #4ecb99; color: white; border: none; padding: 8px 12px; border-radius: 4px; cursor: pointer; }
</style>
</head>
<body>
<h3>Hello Extension!</h3>
<button id="btn">클릭해봐</button>
<script src="popup.js"></script>
</body>
</html>popup.js
javascript
document.getElementById('btn').addEventListener('click', () => {
alert('반갑습니다! 확장 프로그램이 정상 작동 중입니다.');
});Exec
소스 작성
bash
mkdir chrome-extension-test
cd chrome-extension-test
cat <<EOF > manifest.json
{
"manifest_version": 3,
"name": "My First Extension",
"version": "1.0",
"description": "클릭하면 인사를 건네는 팝업 프로그램",
"action": {
"default_popup": "popup.html"
},
"permissions": ["activeTab"]
}
EOF
cat <<EOF > popup.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<style>
body { width: 200px; padding: 10px; font-family: sans-serif; text-align: center; }
button { background: #4ecb99; color: white; border: none; padding: 8px 12px; border-radius: 4px; cursor: pointer; }
</style>
</head>
<body>
<h3>Hello Extension!</h3>
<button id="btn">클릭해봐</button>
<script src="popup.js"></script>
</body>
</html>
EOF
cat <<EOF > popup.js
document.getElementById('btn').addEventListener('click', () => {
alert('반갑습니다! 확장 프로그램이 정상 작동 중입니다.');
});
EOF확장프로그램 등록
chrome://extensions/접속 후 개발자 모드 turn on압축해제된 확장 프로그램 로드선택 후 소스 디렉토리 선택
확장프로그램 압축
chrome://extensions/접속 후 개발자 모드 turn on확장 프로그램 압축선택 후 소스 디렉토리 선택- output:
.crx,.pem
Leave a Reply