확장 사용자 인터페이스는 목적이 있고 최소한이어야 합니다. 확장 프로그램 자체와 마찬가지로 UI는 방해 받지 않고 탐색 환경을 사용자 지정하거나 향상 시켜야 합니다.
이 가이드에서는 필수 및 선택적 사용자 인터페이스 기능을 살펴 봅니다. 이를 사용하여 확장 내에서 다른 UI 요소를 구현하는 방법과 시기를 이해하십시오.
모든 페이지에서 확장 활성화
대부분의 상황에서 확장 기능이 작동하는 경우 browser_action을 사용하십시오.
브라우저 동작 등록
"browser_action"필드는 매니페스트에 등록됩니다.
{ "name": "My Awesome browser_action Extension", ... "browser_action": { ... } ... }
"browser_action"을 선언하면 아이콘 색상이 유지되어 사용자가 확장 프로그램을 사용할 수 있음을 나타냅니다.
배지 추가
배지는 브라우저 아이콘 위에 최대 4 개의 문자가 있는 컬러 배너를 표시합니다. 매니페스트에서 "browser_action"을 선언하는 확장 프로그램에서만 사용할 수 있습니다.
확장 상태를 표시하려면 배지를 사용하십시오. 음료수 이벤트 샘플은 "ON"배지를 표시하여 사용자가 성공적으로 알람을 설정했음을 보여주고 확장 프로그램이 유휴 상태 일 때 아무것도 표시하지 않습니다.
chrome.browserAction.setBadgeText를 호출하여 배지의 텍스트를 설정하고 chrome.browserAction.setBadgeBackgroundColor를 호출하여 배너 색상을 설정합니다.
chrome.browserAction.setBadgeText({text: 'ON'}); chrome.browserAction.setBadgeBackgroundColor({color: '#4688F1'});
선택한 페이지에서 확장 활성화
확장 기능이 정의 된 상황에서만 사용할 수 있는 경우 page_action을 사용하십시오.
페이지 작업 선언
"page_action"필드는 매니페스트에 등록됩니다.
{ "name": "My Awesome page_action Extension", ... "page_action": { ... } ... }
"page_action"을 선언하면 사용자가 확장 프로그램을 사용할 수 있을 때만 아이콘에 색상이 지정되고 그렇지 않으면 회색조로 표시됩니다.
확장 활성화를 위한 규칙 정의
백그라운드 스크립트의 runtime.onInstalled 리스너에서 chrome.declarativeContent를 호출하여 확장 프로그램을 사용할 수 있는 경우에 대한 규칙을 정의합니다. URL 샘플 확장에 의한 페이지 작업은 URL에 'g'가 포함되어야 한다는 조건을 설정합니다. 조건이 충족되면 확장은 declarativeContent.ShowPageAction()을 호출합니다.
chrome.runtime.onInstalled.addListener(function() { // Replace all rules ... chrome.declarativeContent.onPageChanged.removeRules(undefined, function() { // With a new rule ... chrome.declarativeContent.onPageChanged.addRules([ { // That fires when a page's URL contains a 'g' ... conditions: [ new chrome.declarativeContent.PageStateMatcher({ pageUrl: { urlContains: 'g' }, }) ], // And shows the extension's page action. actions: [ new chrome.declarativeContent.ShowPageAction() ] } ]); }); });
확장 활성화 또는 비활성화
"page_action"을 사용하는 확장은 pageAction.show 및 pageAction.hide를 호출하여 동적으로 활성화 및 비활성화 할 수 있습니다.
Mappy 샘플 확장은 웹 페이지에서 주소를 스캔하고 팝업의 정적 지도에 해당 위치를 표시합니다. 확장은 페이지 콘텐츠에 종속되기 때문에 어떤 페이지가 관련 될지 예측하는 규칙을 선언 할 수 없습니다. 대신 페이지에서 주소가 발견되면 pageAction.show를 호출하여 아이콘에 색상을 지정하고 해당 탭에서 확장 프로그램을 사용할 수 있음을 알립니다
chrome.runtime.onMessage.addListener(function(req, sender) { chrome.storage.local.set({'address': req.address}) chrome.pageAction.show(sender.tab.id); chrome.pageAction.setTitle({tabId: sender.tab.id, title: req.address}); });
확장 아이콘 제공
확장 프로그램을 나타내려면 하나 이상의 아이콘이 필요합니다. BMP, GIF, ICO 및 JPEG를 포함하여 WebKit에서 지원하는 모든 형식이 허용되지만 PNG 형식의 아이콘을 제공하면 최상의 시각적 결과를 얻을 수 있습니다.
도구 모음 아이콘 지정
툴바와 관련된 아이콘은 manifest의 browser_action 또는 page_action 아래의 "default_icon"필드에 등록됩니다. 16-dip 공간에 맞게 확장하려면 여러 크기를 포함하는 것이 좋습니다. 최소한 16x16 및 32x32 크기가 권장됩니다.
{ "name": "My Awesome page_action Extension", ... "page_action": { "default_icon": { "16": "extension_toolbar_icon16.png", "32": "extension_toolbar_icon32.png" } } ... }
모든 아이콘은 정사각형이거나 왜곡 될 수 있습니다. 아이콘이 제공되지 않으면 Chrome은 도구 모음에 일반 아이콘을 추가합니다.
추가 아이콘 생성 및 등록
도구 모음 외부에서 사용할 수 있도록 다음 크기의 추가 아이콘을 포함합니다.
Icon Size |
Icon Use |
16x16 |
확장 프로그램 페이지의 파비콘 |
32x32 |
Windows 컴퓨터에는 종종 이 크기가 필요합니다. 이 옵션을 제공하면 크기 왜곡이 48x48 옵션을 축소하는 것을 방지 할 수 있습니다. |
48x48 |
확장 관리 페이지에 표시 |
128x128 |
설치 및 Chrome 웹 스토어에 표시 |
"아이콘"필드 아래의 매니페스트에 아이콘을 등록합니다.
{ "name": "My Awesome Extension", ... "icons": { "16": "extension_icon16.png", "32": "extension_icon32.png", "48": "extension_icon48.png", "128": "extension_icon128.png" } ... }
추가 UI 기능
Popup
팝업은 사용자가 도구 모음 아이콘을 클릭 할 때 특수 창에 표시되는 HTML 파일입니다. 팝업은 웹 페이지와 매우 유사하게 작동합니다. 스타일 시트 및 스크립트 태그에 대한 링크를 포함 할 수 있지만 인라인 JavaScript는 허용하지 않습니다.
음료수 이벤트 예제 팝업은 사용 가능한 타이머 옵션을 표시합니다. 사용자는 제공된 버튼 중 하나를 클릭하여 알람을 설정합니다.
<html> <head> <title>Water Popup</title> </head> <body> <img src='./stay_hydrated.png' id='hydrateImage'> <button id='sampleSecond' value='0.1'>Sample Second</button> <button id='15min' value='15'>15 Minutes</button> <button id='30min' value='30'>30 Minutes</button> <button id='cancelAlarm'>Cancel Alarm</button> <script src="popup.js"></script> </body> </html>
팝업은 브라우저 작업 또는 페이지 작업에서 매니페스트에 등록 할 수 있습니다.
{ "name": "Drink Water Event", ... "browser_action": { "default_popup": "popup.html" } ... }
팝업은 browserAction.setPopup 또는 pageAction.setPopup을 호출하여 동적으로 설정할 수도 있습니다.
chrome.storage.local.get('signed_in', function(data) { if (data.signed_in) { chrome.browserAction.setPopup({popup: 'popup.html'}); } else { chrome.browserAction.setPopup({popup: 'popup_sign_in.html'}); } });
Tooltip
도구 설명을 사용하여 브라우저 아이콘 위로 마우스를 가져갈 때 사용자에게 간단한 설명이나 지침을 제공합니다.
툴팁은 매니페스트의 "default_title"필드 browser_action 또는 page_action에 등록됩니다.
{ "name": "Tab Flipper", ... "browser_action": { "default_title": "Press Ctrl(Win)/Command(Mac)+Shift+Right/Left to flip tabs" } ... }
도구 설명은 browserAction.setTitle 및 pageAction.setTitle을 호출하여 설정하거나 업데이트 할 수도 있습니다.
chrome.browserAction.onClicked.addListener(function(tab) { chrome.browserAction.setTitle({tabId: tab.id, title: "You are on tab:" + tab.id}); });
특수화 된 로케일 문자열은 국제화로 구현됩니다. _locales라는 폴더 내에 언어 별 메시지를 보관할 디렉토리를 만듭니다. 다음 이미지는 영어 및 스페인어 로케일을 지원하는 확장자의 파일 경로를 보여줍니다.
각 언어의 messages.json 내에서 메시지 형식을 지정합니다.
{ "__MSG_tooltip__": { "message": "Hello!", "description": "Tooltip Greeting." } }
{ "__MSG_tooltip__": { "message": "Hola!", "description": "Tooltip Greeting." } }
현지화를 사용하려면 메시지 대신 도구 설명 필드에 메시지 이름을 포함하십시오.
{ "name": "Tab Flipper", ... "browser_action": { "default_title": "__MSG_tooltip__" } ... }
Omnibox
사용자는 검색 주소창을 통해 확장 기능을 호출 할 수 있습니다. 매니페스트에 "검색 주소창"필드를 포함하고 키워드를 지정합니다. 검색 주소창 새 탭 검색 샘플 확장은 "nt"를 키워드로 사용합니다.
{ "name": "Omnibox New Tab Search",\ ... "omnibox": { "keyword" : "nt" }, "default_icon": { "16": "newtab_search16.png", "32": "newtab_search32.png" } ... }
사용자가 검색 주소창에 "nt"를 입력하면 확장 프로그램이 활성화됩니다. 이를 사용자에게 알리기 위해 제공된 16x16 아이콘을 회색조로 표시하고 확장 이름 옆의 검색 주소창에 포함합니다.
확장 프로그램은 omnibox.onInputEntered 이벤트를 수신합니다. 실행 된 후 확장 프로그램은 사용자 항목에 대한 Google 검색이 포함 된 새 탭을 엽니다.
chrome.omnibox.onInputEntered.addListener(function(text) { // Encode user input for special characters , / ? : @ & = + $ # var newURL = 'https://www.google.com/search?q=' + encodeURIComponent(text); chrome.tabs.create({ url: newURL }); });
Context Menu
매니페스트에서 "contextMenus"권한을 부여하여 새 컨텍스트 메뉴 옵션을 추가합니다.
{ "name": "Global Google Search", ... "permissions": ["contextMenus", "storage"], "icons": { "16": "globalGoogle16.png", "48": "globalGoogle48.png", "128": "globalGoogle128.png" } ... }
16x16 아이콘이 새 메뉴 항목 옆에 표시됩니다.
백그라운드 스크립트에서 contextMenus.create를 호출하여 컨텍스트 메뉴를 만듭니다. 이는 runtime.onInstalled 리스너 이벤트에서 수행되어야 합니다.
chrome.runtime.onInstalled.addListener(function() { for (let key of Object.keys(kLocales)) { chrome.contextMenus.create({ id: key, title: kLocales[key], type: 'normal', contexts: ['selection'], }); } });
const kLocales = { 'com.au': 'Australia', 'com.br': 'Brazil', 'ca': 'Canada', 'cn': 'China', 'fr': 'France', 'it': 'Italy', 'co.in': 'India', 'co.jp': 'Japan', 'com.ms': 'Mexico', 'ru': 'Russia', 'co.za': 'South Africa', 'co.uk': 'United Kingdom' };
글로벌 Google 검색 컨텍스트 메뉴 예제는 locales.js의 목록에서 여러 옵션을 만듭니다. 확장 프로그램에 컨텍스트 메뉴가 두 개 이상 포함 된 경우 Chrome은 자동으로 단일 상위 메뉴로 축소합니다.
Commands
확장은 특정 명령을 정의하고 키 조합에 바인딩 할 수 있습니다. "commands"필드 아래 매니페스트에 하나 이상의 명령을 등록합니다.
{ "name": "Tab Flipper", ... "commands": { "flip-tabs-forward": { "suggested_key": { "default": "Ctrl+Shift+Right", "mac": "Command+Shift+Right" }, "description": "Flip tabs forward" }, "flip-tabs-backwards": { "suggested_key": { "default": "Ctrl+Shift+Left", "mac": "Command+Shift+Left" }, "description": "Flip tabs backwards" } } ... }
명령을 사용하여 새로운 또는 대체 브라우저 바로 가기를 제공 할 수 있습니다. Tab Flipper 샘플 확장은 백그라운드 스크립트에서 commands.onCommand 이벤트를 수신하고 등록 된 각 조합에 대한 기능을 정의합니다.
chrome.commands.onCommand.addListener(function(command) { chrome.tabs.query({currentWindow: true}, function(tabs) { // Sort tabs according to their index in the window. tabs.sort((a, b) => { return a.index < b.index; }); let activeIndex = tabs.findIndex((tab) => { return tab.active; }); let lastTab = tabs.length - 1; let newIndex = -1; if (command === 'flip-tabs-forward') newIndex = activeIndex === 0 ? lastTab : activeIndex - 1; else // 'flip-tabs-backwards' newIndex = activeIndex === lastTab ? 0 : activeIndex + 1; chrome.tabs.update(tabs[newIndex].id, {active: true, highlighted: true}); }); });
명령은 확장과 함께 특별히 작동하는 키 바인딩을 만들 수도 있습니다. Hello Extensions 예제는 팝업을 여는 명령을 제공합니다.
{ "name": "Hello Extensions", "description" : "Base Level Extension", "version": "1.0", "browser_action": { "default_popup": "hello.html", "default_icon": "hello_extensions.png" }, "manifest_version": 2, "commands": { "_execute_browser_action": { "suggested_key": { "default": "Ctrl+Shift+F", "mac": "MacCtrl+Shift+F" }, "description": "Opens hello.html" } } }
확장은 broswer_action을 정의하기 때문에 명령에 "execute_browser_action"을 지정하여 백그라운드 스크립트를 포함하지 않고 팝업 파일을 열 수 있습니다. page_action을 사용하는 경우 "execute_page_action"으로 대체 할 수 있습니다. 브라우저 및 확장 명령은 모두 동일한 확장에서 사용할 수 있습니다.
페이지 재정의(Override Pages)
확장은 히스토리, 새 탭 또는 책갈피 웹 페이지를 사용자 정의 HTML 파일로 대체하고 대체 할 수 있습니다. 팝업과 마찬가지로 특수 로직 및 스타일을 포함 할 수 있지만 인라인 JavaScript는 허용하지 않습니다. 단일 확장은 가능한 세 페이지 중 하나만 재정의 하도록 제한됩니다.
'chrome_url_overrides'필드 아래 매니페스트에 재정의 페이지를 등록합니다.
{ "name": "Awesome Override Extension", ... "chrome_url_overrides" : { "newtab": "override_page.html" }, ... }
"newtab"필드는 해당 페이지를 재정의 할 때 "책갈피"또는 "기록"으로 대체되어야 합니다.
<html> <head> <title>New Tab</title> </head> <body> <h1>Hello World</h1> <script src="logic.js"></script> </body> </html>
등록된 댓글이 없습니다.
