확장은 다르지만 응집력 있는 구성 요소로 만들어집니다. 구성 요소에는 백그라운드 스크립트, 콘텐츠 스크립트, 옵션 페이지, UI 요소 및 다양한 논리 파일이 포함될 수 있습니다. 확장 구성 요소는 HTML, CSS 및 JavaScript와 같은 웹 개발 기술로 생성됩니다. 확장의 구성 요소는 기능에 따라 다르며 모든 옵션이 필요하지 않을 수 있습니다.
이 가이드는 사용자가 developer.chrome.com에서 모든 페이지의 배경색을 변경할 수 있는 확장 프로그램을 빌드합니다. 많은 핵심 구성 요소를 사용하여 관계에 대한 소개 데모를 제공합니다.
시작하려면 확장 파일을 보관할 새 디렉토리를 만듭니다.
완성 된 확장은 여기에서 다운로드 할 수 있습니다.
매니페스트(Manifest) 만들기
확장은 매니페스트로 시작됩니다. manifest.json이라는 파일을 만들고 다음 코드를 포함하거나 여기에서 파일을 다운로드합니다.
{ "name": "Getting Started Example", "version": "1.0", "description": "Build an Extension!", "manifest_version": 2 }
매니페스트 파일이 있는 디렉터리는 현재 상태에서 개발자 모드의 확장으로 추가 할 수 있습니다.
확장이 성공적으로 설치되었습니다. 매니페스트에 아이콘이 포함되지 않았기 때문에 확장에 대한 일반 도구 모음 아이콘이 생성됩니다.
명령어 추가
확장이 설치되었지만 지침이 없습니다. background.js라는 파일을 만들거나 여기에서 다운로드하여 확장 디렉터리에 배치하여 백그라운드 스크립트를 소개합니다.
백그라운드 스크립트 및 기타 여러 중요한 구성 요소는 매니페스트에 등록해야 합니다. 매니페스트에 백그라운드 스크립트를 등록하면 참조할 파일 확장자와 해당 파일의 작동 방식을 알 수 있습니다.
{ "name": "Getting Started Example", "version": "1.0", "description": "Build an Extension!", "background": { "scripts": ["background.js"], "persistent": false }, "manifest_version": 2 }
확장 프로그램은 이제 비 영구(non-persistent) 백그라운드 스크립트가 포함되어 있음을 인식하고 등록 된 파일에서 수신해야 하는 중요한 이벤트를 검색합니다.
이 확장은 설치 즉시 영구 변수의 정보가 필요합니다. 백그라운드 스크립트에 runtime.onInstalled에 대한 청취 이벤트를 포함하여 시작하십시오. onInstalled 리스너 내에서 확장은 스토리지 API를 사용하여 값을 설정합니다. 이렇게 하면 여러 확장 구성 요소가 해당 값에 액세스하고 업데이트 할 수 있습니다.
chrome.runtime.onInstalled.addListener(function() { chrome.storage.sync.set({color: '#3aa757'}, function() { console.log("The color is green."); }); });
저장소 API를 포함한 대부분의 API는 확장 프로그램에서 사용하려면 매니페스트의 "권한"필드에 등록해야 합니다.
{ "name": "Getting Started Example", "version": "1.0", "description": "Build an Extension!", "permissions": ["storage"], "background": { "scripts": ["background.js"], "persistent": false }, "manifest_version": 2 }
확장 관리 페이지로 돌아가서 다시로드 링크를 클릭합니다. 파란색 링크, 배경 페이지와 함께 새 필드 인 Inspect보기를 사용할 수 있습니다.
링크를 클릭하면 배경 스크립트의 콘솔 로그 "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 }
확장 프로그램은 확장 프로그램 관리 페이지, 권한 경고 및 파비콘에도 이미지를 표시합니다. 이러한 이미지는 아이콘 아래 매니페스트에 지정됩니다.
{ "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로 이동할 때 브라우저의 브라우저 도구 모음에 풀 컬러 페이지 작업 아이콘이 표시됩니다. 아이콘이 풀 컬러인 경우
클릭하면 popup.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>
녹색 버튼을 보려면 확장 프로그램을 새로 고침하세요.
레이어 로직(Layer Logic)
이제 확장 프로그램은 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 }
확장 프로그램을 새로 고침하고 DETAILS를 클릭합니다.
세부 정보 페이지를 아래로 스크롤하고 확장 옵션을 선택하여 옵션 페이지를 봅니다. 현재는 비어 있습니다.
마지막 단계는 옵션 로직을 추가하는 것입니다. 다음 코드를 사용하여 확장 디렉토리에 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);
네 가지 색상 옵션이 제공되고 onclick 이벤트 리스너가 있는 옵션 페이지에 버튼으로 생성됩니다. 사용자가 버튼을 클릭하면 확장 프로그램의 전역 저장소에 있는 색상 값이 업데이트 됩니다. 모든 확장 파일은 전역 저장소에서 색상 정보를 가져 오므로 다른 값을 업데이트 할 필요가 없습니다.
다음 단계
축하합니다! 이제 디렉토리는 단순하지만 모든 기능을 갖춘 Chrome 확장 프로그램을 보유합니다.
무엇 향후 계획?
https://developer.chrome.com/extensions/getstarted#manifest
등록된 댓글이 없습니다.
