댓글 검색 목록

[html] chrome extention - 9. 사용자에게 옵션 제공

페이지 정보

작성자 운영자 작성일 20-11-02 20:36 조회 780 댓글 0

사용자가 옵션 페이지를 제공하여 확장의 동작을 사용자 정의 할 수 있습니다. 사용자는 도구 모음에서 확장 프로그램 아이콘을 마우스 오른쪽 버튼으로 클릭 한 다음 옵션을 선택하거나 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);

옵션 페이지 동작 선언

확장 옵션 페이지에는 전체 페이지와 임베디드 옵션 두 가지 유형이 있습니다. 옵션 유형은 매니페스트에서 선언 된 방식에 따라 결정됩니다.

전체 페이지 옵션

확장의 옵션 페이지가 새 탭에 표시됩니다. options_page 필드에 등록 된 옵션 HTML 파일이 나열됩니다.

{
  "name": "My extension",
  ...
  "options_page": "options.html",
  ...
}

Full Page Options

임베디드 옵션

임베디드 옵션을 사용하면 임베디드 상자 내부의 확장 관리 페이지를 벗어나지 않고도 확장 옵션을 조정할 수 있습니다. 포함 된 옵션을 선언하려면 open_in_tab 키를 false로 설정하여 확장 매니페스트의 options_ui 필드 아래에 HTML 파일을 등록합니다.

{
  "name": "My extension",
  ...
  "options_ui": {
    "page": "options.html",
    "open_in_tab": false
  },
  ...
}

Full Page Options

page (string)
확장의 루트에 상대적인 옵션 페이지의 경로입니다.
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(function() {
  if (chrome.runtime.openOptionsPage) {
    chrome.runtime.openOptionsPage();
  } else {
    window.open(chrome.runtime.getURL('options.html'));
  }
});