옵션 페이지를 제공하여 사용자가 확장 프로그램의 동작을 맞춤설정할 수 있도록 합니다. 사용자는 툴바에서 확장 프로그램 아이콘을 마우스 오른쪽 버튼으로 클릭한 후 옵션을 선택하거나 chrome://extensions의 확장 프로그램 관리 페이지로 이동하고 원하는 확장 프로그램을 찾아 세부정보를 클릭한 후 옵션 링크를 선택하여 확장 프로그램의 옵션을 볼 수 있습니다.
옵션 페이지 작성
다음은 옵션 페이지의 예입니다.
<!DOCTYPE html>
<html>
<head><title>My Test Extension Options</title></head>
<body>
Favorite color:
<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>
storage.sync API를 사용하여 여러 기기에서 사용자가 선호하는 옵션을 저장합니다.
// Saves options to chrome.storage
function save_options() {
var color = document.getElementById('color').value;
var likesColor = document.getElementById('like').checked;
chrome.storage.sync.set({
favoriteColor: color,
likesColor: likesColor
}, function() {
// Update status to let user know options were saved.
var status = document.getElementById('status');
status.textContent = 'Options saved.';
setTimeout(function() {
status.textContent = '';
}, 750);
});
}
// Restores select box and checkbox state using the preferences
// stored in chrome.storage.
function restore_options() {
// Use default value color = 'red' and likesColor = true.
chrome.storage.sync.get({
favoriteColor: 'red',
likesColor: true
}, function(items) {
document.getElementById('color').value = items.favoriteColor;
document.getElementById('like').checked = items.likesColor;
});
}
document.addEventListener('DOMContentLoaded', restore_options);
document.getElementById('save').addEventListener('click',
save_options);
옵션 페이지 동작 선언
광고 확장 옵션 페이지에는 전체 페이지와 삽입된 페이지 등 두 가지 유형이 있습니다. 옵션 유형은 매니페스트에서 선언되는 방식에 따라 결정됩니다.
전체 페이지 옵션
확장 프로그램의 옵션 페이지가 새 탭에 표시됩니다. 옵션 HTML 파일이 options_page 필드 아래에 등록되어 있습니다.
{
"name": "My extension",
...
"options_page": "options.html",
...
}
삽입된 옵션
삽입된 옵션을 사용하면 사용자가 삽입된 상자 내의 확장 프로그램 관리 페이지에서 이동하지 않고도 확장 프로그램 옵션을 조정할 수 있습니다. 삽입된 옵션을 선언하려면 확장 프로그램 매니페스트의 options_ui 필드 아래에 open_in_tab 키를 false로 설정하여 HTML 파일을 등록합니다.
{
"name": "My extension",
...
"options_ui": {
"page": "options.html",
"open_in_tab": false
},
...
}
page(문자열)확장 프로그램의 루트를 기준으로 한 옵션 페이지 경로입니다.
open_in_tab(boolean)삽입된 옵션 페이지를 선언하려면
false로 지정합니다.true인 경우 확장 프로그램의 옵션 페이지가 chrome://extensions에 삽입되지 않고 새 탭에서 열립니다.
차이점 고려하기
chrome://extensions 내에 삽입된 옵션 페이지에는 자체 탭 내부에서 호스팅되지 않는 것과 관련하여 미묘한 동작 차이가 있습니다.
옵션 페이지 링크
확장 프로그램은 chrome.runtime.openOptionsPage()를 호출하여 옵션 페이지로 직접 연결할 수 있습니다 .
<button id="go-to-options">Go to options</button>
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 사용 방식에 영향을 미칩니다.
- tabs.query는 확장 프로그램의 옵션 페이지 URL 내에서 탭을 찾지 않습니다.
- 옵션 페이지가 열릴 때 tabs.onCreated가 실행되지 않습니다.
- 옵션 페이지 로드 상태가 변경될 때 tabs.onUpdated가 실행되지 않습니다.
- tabs.connect 또는 tabs.sendMessage는 옵션 페이지와 통신하는 데 사용할 수 없습니다.
옵션 페이지에서 포함하는 탭을 조작해야 하는 경우 runtime.connect 및 runtime.sendMessage를 사용하면 이러한 제한사항을 해결할 수 있습니다.
Messaging API
확장 프로그램의 옵션 페이지에서 runtime.connect 또는 runtime.sendMessage를 사용하여 메시지를 보내면 발신자 탭이 설정되지 않고 발신자의 URL이 옵션 페이지 URL이 됩니다.
사이즈
삽입된 옵션은 페이지 콘텐츠에 따라 자동으로 크기를 결정해야 합니다. 그러나 삽입된 상자는 일부 콘텐츠 유형에 적합하지 않을 수 있습니다. 이 문제는 창 크기에 따라 콘텐츠 모양을 조정하는 옵션 페이지에서 가장 일반적입니다.
이 문제가 발생하면 삽입된 페이지가 적절한 크기를 찾을 수 있도록 옵션 페이지에 고정된 최소 크기를 제공하세요.