엣지(Edge) 확장 프로그램을 만들고 배포하는 과정은 간단하지만, JavaScript만으로 구현하는 방식은 다소 제한적일 수 있습니다. 여기에 서버 없이 자바스크립트를 사용하여 간단한 엣지 확장 프로그램을 만드는 방법을 예시와 함께 블로그 형식으로 설명하겠습니다.
엣지 확장 프로그램 만들기
1. 엣지 확장 프로그램 기본 구조
엣지 확장 프로그램을 만들기 위해서는 기본적으로 몇 가지 파일이 필요합니다.
- manifest.json: 확장 프로그램의 메타데이터를 포함하는 파일입니다.
- background.js: 확장의 배경 스크립트를 담당하는 파일입니다 (필요한 경우).
- popup.html: 팝업 UI 파일입니다 (필요한 경우).
- content.js: 웹 페이지에 삽입되어 실행되는 스크립트입니다 (필요한 경우).
- icon.png: 확장 프로그램 아이콘입니다.
2. manifest.json 파일 만들기
manifest.json 파일은 엣지 확장 프로그램의 필수 파일입니다. 이 파일은 확장 프로그램의 이름, 버전, 권한, 아이콘, 실행할 스크립트 등을 정의합니다.
{
"manifest_version": 2,
"name": "Simple Edge Extension",
"version": "1.0",
"description": "A simple Edge extension example using only JavaScript",
"permissions": ["activeTab"],
"background": {
"scripts": ["background.js"],
"persistent": false
},
"browser_action": {
"default_popup": "popup.html",
"default_icon": "icon.png"
},
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["content.js"]
}
]
}3. background.js
background.js 파일은 확장 프로그램의 백그라운드 스크립트로, 사용자가 브라우저에서 특정 작업을 할 때마다 실행됩니다. 여기서는 기본적인 예제를 보여드리겠습니다.
chrome.runtime.onInstalled.addListener(function () {
console.log('Simple Edge Extension Installed!');
});4. popup.html
확장 프로그램의 팝업 인터페이스를 위한 HTML 파일을 작성합니다. 팝업은 사용자가 확장 프로그램 아이콘을 클릭했을 때 나타납니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Edge Extension</title>
<style>
body {
width: 200px;
padding: 10px;
font-family: Arial, sans-serif;
}
button {
padding: 10px;
font-size: 14px;
cursor: pointer;
}
</style>
</head>
<body>
<h3>Click the button!</h3>
<button id="changeColor">Change Background Color</button>
<script src="popup.js"></script>
</body>
</html>5. popup.js
팝업에서 버튼을 클릭했을 때, 페이지의 배경색을 변경하는 간단한 JavaScript 코드를 작성합니다.
document.getElementById('changeColor').addEventListener('click', function () {
chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
chrome.tabs.executeScript(tabs[0].id, {
code: 'document.body.style.backgroundColor = "lightblue";'
});
});
});6. content.js
content.js는 웹 페이지에 삽입되어 실행되는 스크립트입니다. 여기서는 페이지가 로드될 때마다 배경색을 lightyellow로 변경하는 예시를 보여줍니다.
document.body.style.backgroundColor = 'lightyellow';7. 아이콘 파일
아이콘 파일(icon.png)은 확장 프로그램의 아이콘을 나타냅니다. 128x128px 크기의 PNG 파일을 준비하여 프로젝트 디렉토리에 넣습니다.
8. 확장 프로그램 로드 및 테스트
엣지 확장 프로그램을 개발한 후에는 로컬에서 테스트할 수 있습니다.
- 엣지 브라우저에서 주소창에
edge://extensions입력 후, 개발자 모드를 활성화합니다. - 압축 해제된 확장 프로그램 로드 버튼을 클릭하여 방금 만든 확장 프로그램 폴더를 선택합니다.
- 확장 프로그램이 성공적으로 로드되면, 브라우저 상단에 아이콘이 나타납니다. 이 아이콘을 클릭하면 팝업이 나타나고, 버튼을 클릭하면 웹 페이지의 배경색이 변경됩니다.
9. 확장 프로그램 배포
확장 프로그램을 배포하려면 다음과 같은 단계를 따릅니다.
- 확장 프로그램 패키징:
manifest.json파일과 함께 프로젝트 폴더를 압축하여.zip파일로 만듭니다. - Microsoft Edge Add-ons Store에 배포:
https://partner.microsoft.com/en-us/dashboard에 로그인한 후, "Add a new extension"을 선택하고 압축 파일을 업로드하여 제출합니다. - 제출 후, 마이크로소프트에서 검토를 진행하고 배포 여부를 결정합니다.
결론
이 블로그 포스트에서는 자바스크립트만 사용하여 간단한 엣지 확장 프로그램을 만들고 배포하는 방법을 소개했습니다. 이와 같은 방식으로 서버 없이 로컬에서 실행되는 확장 프로그램을 만들 수 있습니다. 엣지 확장 프로그램 개발에 대한 이해를 바탕으로, 더 복잡한 기능도 구현해볼 수 있습니다.
