확장 프로그램 사용자 인터페이스는 목적이 있고 최소화되어야 합니다. 확장 프로그램 자체와 마찬가지로 UI는 브라우징 환경을 방해하지 않고 맞춤설정하거나 개선해야 합니다.
이 가이드에서는 필수 및 선택 사용자 인터페이스 기능을 살펴봅니다. 이 보고서를 통해 언제 어떻게 를 사용하여 확장 프로그램 내에서 여러 UI 요소를 구현할 수 있습니다.
모든 페이지에서 확장 프로그램 활성화
대부분의 상황에서 확장 프로그램의 기능이 작동하는 경우 browser_action을 사용합니다.
브라우저 작업 등록
"browser_action" 필드가 매니페스트에 등록됩니다.
{
"name": "My Awesome browser_action Extension",
...
"browser_action": {
...
}
...
}
"browser_action"를 선언하면 아이콘에 색상이 적용되어 확장 프로그램을 사용할 수 있음을 나타냅니다.
있습니다.
배지 추가
배지는 브라우저 아이콘 위에 최대 4자(영문 기준)의 컬러 배너가 표시됩니다. 다음 작업만 수행할 수 있습니다.
매니페스트에서 "browser_action"을 선언하는 확장 프로그램에서 사용할 수 있습니다.
배지를 사용하여 확장 프로그램의 상태를 표시합니다. 물 마시기 이벤트 샘플은 '사용'으로 표시된 배지 알람을 설정했다는 것을 사용자에게 보여주며, 알람이 울리면 확장 프로그램이 유휴 상태입니다.
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"를 선언하면 사용자가 확장 프로그램을 사용할 수 있을 때만 아이콘에 색상이 지정됩니다.
그렇지 않으면 그레이 스케일로 표시됩니다.
확장 프로그램 활성화 규칙 정의
확장 프로그램을 사용할 수 있는 시점에 관한 규칙을 정의합니다. 이때 다음과 같이 chrome.declarativeContent를 호출합니다.
runtime.onInstalled 리스너(백그라운드 스크립트에 위치) 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});
});
확장 프로그램 아이콘 제공
확장 프로그램을 사용하려면 아이콘이 하나 이상 필요합니다. 아이콘을 PNG 형식으로 제공합니다. BMP, GIF, ICO 및 JPEG를 포함하여 WebKit에서 지원하는 모든 형식은 동의합니다.
툴바 아이콘 지정
툴바와 관련된 아이콘은 아래의 "default_icon" 필드에 등록됩니다.
매니페스트의 browser_action 또는 page_action 여러 크기를 포함하는 것은
16 딥 공간에 맞게 확장하는 것이 좋습니다. 최소 16x16 및 32x32 크기를 권장합니다.
{
"name": "My Awesome page_action Extension",
...
"page_action": {
"default_icon": {
"16": "extension_toolbar_icon16.png",
"32": "extension_toolbar_icon32.png"
}
}
...
}
모든 아이콘은 정사각형이어야 합니다. 그렇지 않으면 왜곡될 수 있습니다. 아이콘이 제공되지 않으면 Chrome은 툴바에 추가할 수 있습니다.
추가 아이콘 만들기 및 등록
툴바 밖에서 사용할 수 있도록 다음 크기의 추가 아이콘을 포함합니다.
| 아이콘 크기 | 아이콘 사용 |
|---|---|
| 16x16 | 확장 프로그램 페이지의 파비콘 |
| 32x32 | Windows 컴퓨터에는 이 크기가 필요한 경우가 많습니다. 이 옵션을 제공하면 크기 왜곡으로 인해 48x48 옵션이 축소되는 것을 방지할 수 있습니다. |
| 48x48 | 확장 프로그램 관리 페이지에 표시됩니다. |
| 128x128 | 설치 시 및 Chrome 웹 스토어에 표시됩니다. |
매니페스트의 "icons" 필드 아래에서 아이콘을 등록합니다.
{
"name": "My Awesome Extension",
...
"icons": {
"16": "extension_icon16.png",
"32": "extension_icon32.png",
"48": "extension_icon48.png",
"128": "extension_icon128.png"
}
...
}
추가 UI 기능
팝업
팝업은 사용자가 툴바 아이콘을 클릭할 때 특수 창에 표시되는 HTML 파일입니다. 팝업은 웹페이지와 매우 유사하게 작동합니다. 스타일시트와 스크립트 태그 링크를 포함할 수 있지만 는 인라인 자바스크립트를 허용하지 않습니다.
Drink Water Event 예 팝업은 사용 가능한 타이머 옵션을 표시합니다. 사용자가 설정한 알람 표시된 버튼을 클릭할 수 있습니다.
<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'});
}
});
도움말
브라우저 위로 마우스를 가져가면 도움말을 사용하여 사용자에게 간단한 설명이나 안내를 제공하세요. 아이콘을 클릭합니다.
도움말이 "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라는 폴더 내에 언어별 메시지를 저장합니다.
_locales/en/messages.json_locales/es/messages.json
각 언어의 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 });
});
컨텍스트 메뉴
매니페스트에서 "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" 필드 아래에서 더 많은 명령어를 사용하세요.
{
"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"
}
}
...
}
명령어를 사용하여 새로운 브라우저 단축키나 대체 브라우저 단축키를 제공할 수 있습니다. 탭 플리퍼 샘플
확장 프로그램은 백그라운드 스크립트에서 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"
}
}
}
확장 프로그램이 browser_action를 정의하므로 다음에서 "execute_browser_action"를 지정할 수 있습니다.
백그라운드 스크립트를 포함하지 않고 팝업 파일을 여는 명령어 사용하는 경우
page_action는 "execute_page_action"로 대체할 수 있습니다. 브라우저 및 확장 프로그램 모두
명령어를 동일한 확장 프로그램에서 사용할 수 있습니다.
페이지 재정의
확장 프로그램은 방문 기록, 새 탭 또는 북마크 웹페이지를 재정의하고 맞춤 HTML 파일을 만듭니다. 팝업과 마찬가지로 특수 로직과 스타일을 포함할 수 있지만 사용할 수 있습니다. 단일 확장 프로그램은 가능한 3개의 페이지 중 하나만 재정의합니다.
매니페스트의 "chrome_url_overrides" 필드 아래에서 재정의 페이지를 등록합니다.
{
"name": "Awesome Override Extension",
...
"chrome_url_overrides" : {
"newtab": "override_page.html"
},
...
}
"newtab" 필드를 재정의할 때 "bookmarks" 또는 "history"로 바꿔야 합니다.
있습니다.
<html>
<head>
<title>New Tab</title>
</head>
<body>
<h1>Hello World</h1>
<script src="logic.js"></script>
</body>
</html>