확장 프로그램을 통해 사용자가 Chrome 브라우저를 맞춤설정할 수 있는 것처럼 옵션 페이지에서 확장 프로그램 맞춤설정을 사용 설정합니다. 옵션을 사용하여 기능을 사용 설정하고 사용자가 자신의 필요와 관련된 기능을 선택할 수 있게 합니다.
옵션 페이지 찾기
사용자는 직접 링크를 사용하거나 툴바에서 확장 프로그램 아이콘을 마우스 오른쪽 버튼으로 클릭한 다음 옵션을 선택하여 옵션 페이지에 액세스할 수 있습니다. 또한 사용자는 먼저 chrome://extensions를 열고 원하는 확장 프로그램을 찾은 다음 세부정보를 클릭한 다음 옵션 링크를 선택하여 옵션 페이지로 이동할 수 있습니다.
옵션 페이지 작성
다음은 옵션 페이지의 예입니다.
options.html:
<!DOCTYPE html>
<html>
<head>
<title>My Test Extension Options</title>
</head>
<body>
<select id="color">
<option value="red">red</option>
<option value="green">green</option>
<option value="blue">blue</option>
<option value="yellow">yellow</option>
</select>
<label>
<input type="checkbox" id="like" />
I like colors.
</label>
<div id="status"></div>
<button id="save">Save</button>
<script src="options.js"></script>
</body>
</html>
다음은 옵션 스크립트의 예입니다. options.html과 동일한 폴더에 저장합니다.
이렇게 하면 storage.sync API를 사용하여 여러 기기에서 사용자가 선호하는 옵션이 저장됩니다.
options.js:
// Saves options to chrome.storage
const saveOptions = () => {
const color = document.getElementById('color').value;
const likesColor = document.getElementById('like').checked;
chrome.storage.sync.set(
{ favoriteColor: color, likesColor: likesColor },
() => {
// Update status to let user know options were saved.
const status = document.getElementById('status');
status.textContent = 'Options saved.';
setTimeout(() => {
status.textContent = '';
}, 750);
}
);
};
// Restores select box and checkbox state using the preferences
// stored in chrome.storage.
const restoreOptions = () => {
chrome.storage.sync.get(
{ favoriteColor: 'red', likesColor: true },
(items) => {
document.getElementById('color').value = items.favoriteColor;
document.getElementById('like').checked = items.likesColor;
}
);
};
document.addEventListener('DOMContentLoaded', restoreOptions);
document.getElementById('save').addEventListener('click', saveOptions);
마지막으로 확장 프로그램의 매니페스트 파일에 "storage" 권한을 추가합니다.
manifest.json:
{
"name": "My extension",
...
"permissions": [
"storage"
]
...
}
옵션 페이지 동작 선언
광고 확장 옵션 페이지에는 전체 페이지와 삽입이라는 두 가지 유형이 있습니다. 옵션 페이지의 유형은 매니페스트에서 선언되는 방식에 따라 결정됩니다.
전체 페이지 옵션
전체 페이지 옵션 페이지가 새 탭에 표시됩니다. 옵션 HTML 파일을 "options_page" 필드의 매니페스트에 등록합니다.
manifest.json:
{
"name": "My extension",
...
"options_page": "options.html",
...
}
삽입된 옵션
삽입된 옵션 페이지를 사용하면 사용자가 삽입된 상자 내의 확장 프로그램 관리 페이지에서 나가지 않고도 확장 프로그램 옵션을 조정할 수 있습니다. 삽입된 옵션을 선언하려면 확장 프로그램 매니페스트의 "options_ui" 필드 아래에 "open_in_tab" 키를 false로 설정하여 HTML 파일을 등록합니다.
manifest.json:
{
"name": "My extension",
...
"options_ui": {
"page": "options.html",
"open_in_tab": false
},
...
}
page(문자열)- 확장 프로그램의 루트를 기준으로 한 옵션 페이지의 경로를 지정합니다.
open_in_tab(boolean)- 확장 프로그램의 옵션 페이지를 새 탭에서 열지를 나타냅니다.
false로 설정하면 확장 프로그램의 옵션 페이지가 새 탭에서 열리지 않고chrome://extensions에 삽입됩니다.
차이점 고려하기
chrome://extensions 내에 삽입된 옵션 페이지는 탭의 옵션 페이지와 미묘한 차이가 있습니다.
옵션 페이지 링크
확장 프로그램은 chrome.runtime.openOptionsPage()를 호출하여 옵션 페이지로 직접 연결할 수 있습니다. 예를 들어 팝업에 추가할 수 있습니다.
popup.html:
<button id="go-to-options">Go to options</button>
<script src="popup.js"></script>
popup.js:
document.querySelector('#go-to-options').addEventListener('click', function() {
if (chrome.runtime.openOptionsPage) {
chrome.runtime.openOptionsPage();
} else {
window.open(chrome.runtime.getURL('options.html'));
}
});
탭 API
삽입된 옵션 코드는 탭에서 호스팅되지 않으므로 Tabs API를 사용할 수 없습니다.
옵션 페이지에서 포함하는 탭을 조작해야 하는 경우 runtime.connect() 및 runtime.sendMessage()를 대신 사용합니다.
Messaging API
확장 프로그램의 옵션 페이지에서 runtime.connect() 또는 runtime.sendMessage()를 사용하여 메시지를 전송하면 발신자 탭이 설정되지 않으며 발신자의 URL이 옵션 페이지 URL이 됩니다.
사이즈
삽입된 옵션은 페이지 콘텐츠에 따라 자동으로 크기를 결정해야 합니다. 그러나 삽입된 상자는 일부 콘텐츠 유형에 적합하지 않을 수 있습니다. 이 문제는 창 크기에 따라 콘텐츠 모양을 조정하는 옵션 페이지에서 가장 일반적입니다.
이 문제가 발생하면 삽입된 페이지가 적절한 크기를 찾을 수 있도록 옵션 페이지에 고정된 최소 크기를 제공하세요.