확장 프로그램은 다르지만 결합된 구성요소로 구성됩니다. 구성요소에는 백그라운드 스크립트, 콘텐츠 스크립트, 옵션 페이지, UI 요소, 다양한 로직 파일이 포함될 수 있습니다. 확장 프로그램 구성요소는 HTML, CSS, 자바스크립트와 같은 웹 개발 기술을 사용하여 만들어집니다. 확장 프로그램의 구성요소는 기능에 따라 다르며 모든 옵션이 필요한 것은 아닙니다.
이 튜토리얼에서는 사용자가 developer.chrome.com의 모든 페이지의 배경색을 변경할 수 있는 확장 프로그램을 빌드합니다. 이 확장 프로그램은 여러 핵심 구성요소를 사용하여 이러한 관계를 소개합니다.
시작하려면 확장 프로그램의 파일을 저장할 새 디렉터리를 만듭니다.
완성된 연장은 여기에서 확인할 수 있습니다.
매니페스트 만들기
확장 프로그램은 매니페스트로 시작합니다. manifest.json라는 파일을 만들고 다음 코드를 포함합니다.
{
"name": "Getting Started Example",
"version": "1.0",
"description": "Build an Extension!",
"manifest_version": 2
}
매니페스트 파일이 있는 디렉터리는 현재 상태에서 개발자 모드에서 확장 프로그램으로 추가할 수 있습니다.
chrome://extensions로 이동하여 확장 프로그램 관리 페이지를 엽니다.- Chrome 메뉴를 클릭하고 도구 더보기 위로 마우스를 가져간 후 확장 프로그램을 선택하여 확장 프로그램 관리 페이지를 열 수도 있습니다.
- 개발자 모드 옆에 있는 전환 스위치를 클릭하여 개발자 모드를 사용 설정합니다.
- UNPACKED 로드 버튼을 클릭하고 확장 프로그램 디렉터리를 선택합니다.
짜잔! 확장 프로그램이 설치되었습니다. 매니페스트에 포함된 아이콘이 없으므로 확장 프로그램의 일반 툴바 아이콘이 생성됩니다.
안내 추가
확장 프로그램이 설치되었지만 안내가 없습니다. 제목이 background.js인 파일을 만들고 확장 프로그램 디렉터리에 배치하여 백그라운드 스크립트를 도입합니다.
백그라운드 스크립트와 기타 여러 중요한 구성요소는 매니페스트에 등록해야 합니다. 매니페스트에 백그라운드 스크립트를 등록하면 참조할 파일과 해당 파일의 작동 방식을 확장 프로그램에 알려줍니다.
{
"name": "Getting Started Example",
"version": "1.0",
"description": "Build an Extension!",
"background": {
"scripts": ["background.js"],
"persistent": false
},
"manifest_version": 2
}
이제 확장 프로그램이 비영구 백그라운드 스크립트를 포함하고 있음을 인식하고 등록된 파일을 수신 대기해야 하는 중요 이벤트를 검색합니다.
이 확장 프로그램은 설치되는 즉시 영구 변수의 정보가 필요합니다. 백그라운드 스크립트에서 runtime.onInstalled의 수신 대기 이벤트를 포함하여 시작합니다. onInstalled 리스너 내에서 확장 프로그램은 storage API를 사용하여 값을 설정합니다. 이렇게 하면 여러 확장 프로그램 구성요소가 해당 값에 액세스하여 업데이트할 수 있습니다.
chrome.runtime.onInstalled.addListener(function() {
chrome.storage.sync.set({color: '#3aa757'}, function() {
console.log("The color is green.");
});
});
storage API를 포함한 대부분의 API는 확장 프로그램에서 사용하려면 매니페스트의 "permissions" 필드 아래에 등록해야 합니다.
{
"name": "Getting Started Example",
"version": "1.0",
"description": "Build an Extension!",
"permissions": ["storage"],
"background": {
"scripts": ["background.js"],
"persistent": false
},
"manifest_version": 2
}
확장 프로그램 관리 페이지로 돌아가서 새로고침 링크를 클릭합니다. 새로운 필드인 Inspect views가 파란색 링크인 백그라운드 페이지와 함께 제공됩니다.
백그라운드 스크립트의 콘솔 로그("The color is green.")를 보려면 링크를 클릭하세요.
사용자 인터페이스 도입
확장 프로그램에는 여러 형식의 사용자 인터페이스가 있을 수 있지만 이 버전에서는 팝업을 사용합니다.
제목이 popup.html인 파일을 만들어 디렉터리에 추가합니다. 이 확장 프로그램은 버튼을 사용하여 배경 색상을 변경합니다.
<!DOCTYPE html>
<html>
<head>
<style>
button {
height: 30px;
width: 30px;
outline: none;
}
</style>
</head>
<body>
<button id="changeColor"></button>
</body>
</html>
백그라운드 스크립트와 마찬가지로 이 파일은 page_action 아래 매니페스트에서 팝업으로 지정해야 합니다.
{
"name": "Getting Started Example",
"version": "1.0",
"description": "Build an Extension!",
"permissions": ["storage"],
"background": {
"scripts": ["background.js"],
"persistent": false
},
"page_action": {
"default_popup": "popup.html"
},
"manifest_version": 2
}
툴바 아이콘 지정은 default_icons 필드의 page_action 아래에도 포함됩니다.
여기에서 이미지 폴더를 다운로드하고 압축을 풀고 확장 프로그램 디렉터리에 넣습니다. 확장 프로그램이 이미지 사용 방법을 알 수 있도록 매니페스트를 업데이트합니다.
{
"name": "Getting Started Example",
"version": "1.0",
"description": "Build an Extension!",
"permissions": ["storage"],
"background": {
"scripts": ["background.js"],
"persistent": false
},
"page_action": {
"default_popup": "popup.html",
"default_icon": {
"16": "images/get_started16.png",
"32": "images/get_started32.png",
"48": "images/get_started48.png",
"128": "images/get_started128.png"
}
},
"manifest_version": 2
}
확장 프로그램은 확장 프로그램 관리 페이지, 권한 경고, 파비콘에도 이미지를 표시합니다. 이러한 이미지는 매니페스트의 icons에 지정됩니다.
{
"name": "Getting Started Example",
"version": "1.0",
"description": "Build an Extension!",
"permissions": ["storage"],
"background": {
"scripts": ["background.js"],
"persistent": false
},
"page_action": {
"default_popup": "popup.html",
"default_icon": {
"16": "images/get_started16.png",
"32": "images/get_started32.png",
"48": "images/get_started48.png",
"128": "images/get_started128.png"
}
},
"icons": {
"16": "images/get_started16.png",
"32": "images/get_started32.png",
"48": "images/get_started48.png",
"128": "images/get_started128.png"
},
"manifest_version": 2
}
이 단계에서 확장 프로그램이 새로고침되면 회색 아이콘이 표시되지만 기능상의 차이는 없습니다. page_action는 매니페스트에서 선언되므로 사용자가 popup.html와 상호작용할 수 있는 시점을 브라우저에 알리는 것은 확장 프로그램의 책임입니다.
runtime.onInstalled 리스너 이벤트 내의 declarativeContent API를 사용하여 선언된 규칙을 백그라운드 스크립트에 추가합니다.
chrome.runtime.onInstalled.addListener(function() {
chrome.storage.sync.set({color: '#3aa757'}, function() {
console.log('The color is green.');
});
chrome.declarativeContent.onPageChanged.removeRules(undefined, function() {
chrome.declarativeContent.onPageChanged.addRules([{
conditions: [new chrome.declarativeContent.PageStateMatcher({
pageUrl: {hostEquals: 'developer.chrome.com'},
})
],
actions: [new chrome.declarativeContent.ShowPageAction()]
}]);
});
});
확장 프로그램에 매니페스트에서 declarativeContent API에 액세스할 수 있는 권한이 필요합니다.
{
"name": "Getting Started Example",
...
"permissions": ["declarativeContent", "storage"],
...
}
이제 사용자가 "developer.chrome.com"가 포함된 URL로 이동할 때 브라우저의 브라우저 툴바에 컬러 페이지 작업 아이콘이 표시됩니다. 아이콘이 컬러 색상이면 사용자는 이를 클릭하여
Pop.html을 볼 수 있습니다.
팝업 UI의 마지막 단계는 버튼에 색상을 추가하는 것입니다. 다음 코드를 포함하여 popup.js라는 파일을 만들고 확장 프로그램 디렉터리에 추가합니다.
let changeColor = document.getElementById('changeColor');
chrome.storage.sync.get('color', function(data) {
changeColor.style.backgroundColor = data.color;
changeColor.setAttribute('value', data.color);
});
이 코드는 popup.html에서 버튼을 가져와 저장소에 색상 값을 요청합니다. 그런 다음 색상을 버튼의 배경으로 적용합니다. popup.html의 popup.js에 스크립트 태그를 포함합니다.
<!DOCTYPE html>
<html>
...
<body>
<button id="changeColor"></button>
<script src="popup.js"></script>
</body>
</html>
확장 프로그램을 새로고침하여 녹색 버튼을 확인합니다.
레이어 로직
이제 확장 프로그램에서 사용자가 developer.chrome.com에서 팝업을 사용할 수 있어야 함을 알고 색상이 지정된 버튼을 표시하지만 추가 사용자 상호작용을 위한 로직이 필요합니다. 다음 코드를 포함하도록 popup.js를 업데이트합니다.
let changeColor = document.getElementById('changeColor');
...
changeColor.onclick = function(element) {
let color = element.target.value;
chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
chrome.tabs.executeScript(
tabs[0].id,
{code: 'document.body.style.backgroundColor = "' + color + '";'});
});
};
업데이트된 코드는 버튼에 onclick 이벤트를 추가하여 프로그래매틱 방식으로 삽입된 콘텐츠 스크립트를 트리거합니다. 이렇게 하면 페이지의 배경색이 버튼과 동일한 색상으로 바뀝니다. 프로그래매틱 삽입을 사용하면 원치 않는 코드를 웹페이지에 자동으로 삽입하는 대신 사용자가 호출한 콘텐츠 스크립트를 작성할 수 있습니다.
확장 프로그램이 tabs API에 임시로 액세스하도록 허용하려면 매니페스트에 activeTab 권한이 필요합니다. 이렇게 하면 확장 프로그램이 tabs.executeScript를 호출할 수 있습니다.
{
"name": "Getting Started Example",
...
"permissions": ["activeTab", "declarativeContent", "storage"],
...
}
이제 확장 프로그램이 완전히 작동합니다. 확장 프로그램을 새로고침하고 페이지를 새로고침한 후 팝업을 열고 버튼을 클릭하여 녹색으로 바꿉니다. 그러나 일부 사용자는 배경을 다른 색상으로 변경해야 할 수 있습니다.
사용자에게 옵션 제공
이 확장 프로그램은 현재 사용자가 배경을 녹색으로 변경하는 것만 허용합니다. 옵션 페이지를 포함하면 사용자가 확장 프로그램의 기능을 더 세밀하게 제어할 수 있어 탐색 환경을 추가로 맞춤설정할 수 있습니다.
먼저 options.html 디렉터리에 파일을 만들고 다음 코드를 포함합니다.
<!DOCTYPE html>
<html>
<head>
<style>
button {
height: 30px;
width: 30px;
outline: none;
margin: 10px;
}
</style>
</head>
<body>
<div id="buttonDiv">
</div>
<div>
<p>Choose a different background color!</p>
</div>
</body>
<script src="options.js"></script>
</html>
그런 다음 매니페스트에 옵션 페이지를 등록합니다.
{
"name": "Getting Started Example",
...
"options_page": "options.html",
...
"manifest_version": 2
}
확장 프로그램을 새로고침하고 세부정보를 클릭합니다.
세부정보 페이지를 아래로 스크롤하고 확장 프로그램 옵션을 선택하여 옵션 페이지를 봅니다. 현재는 비어 있는 상태로 표시됩니다.
마지막 단계는 옵션 로직을 추가하는 것입니다. 다음 코드를 사용하여 확장 프로그램 디렉터리에 options.js라는 파일을 만듭니다.
let page = document.getElementById('buttonDiv');
const kButtonColors = ['#3aa757', '#e8453c', '#f9bb2d', '#4688f1'];
function constructOptions(kButtonColors) {
for (let item of kButtonColors) {
let button = document.createElement('button');
button.style.backgroundColor = item;
button.addEventListener('click', function() {
chrome.storage.sync.set({color: item}, function() {
console.log('color is ' + item);
})
});
page.appendChild(button);
}
}
constructOptions(kButtonColors);
4가지 색상 옵션이 제공된 다음 온클릭 이벤트 리스너가 있는 옵션 페이지에 버튼으로 생성됩니다. 사용자가 버튼을 클릭하면 확장 프로그램의 전역 저장소에 있는 색상 값이 업데이트됩니다. 모든 확장 프로그램의 파일이 전역 저장소에서 색상 정보를 가져오므로 다른 값을 업데이트할 필요가 없습니다.
다음 단계 수행
축하합니다. 이제 이 디렉터리에는 간단하지만 모든 기능을 갖춘 Chrome 확장 프로그램이 포함됩니다.
다음 단계
- Chrome 확장 프로그램 개요는 이 내용을 참고하고 일반적으로 확장 프로그램 아키텍처에 관한 많은 세부정보와 개발자가 알고 싶어하는 몇 가지 특정 개념을 설명합니다.
- 디버깅 튜토리얼에서 디버깅 확장 프로그램에 사용할 수 있는 옵션에 대해 알아보세요.
- Chrome 확장 프로그램을 사용하면 공개 웹의 API를 넘어 강력한 API에 액세스할 수 있습니다. chrome.* API 문서에서 각 API를 안내합니다.
- 개발자 가이드에는 고급 확장 프로그램 만들기와 관련된 문서로 연결되는 수십 개의 추가 링크가 있습니다.