Uzantılar, kullanıcıların Chrome tarayıcıyı özelleştirmesine olanak tanıdığı gibi seçenekler sayfası da uzantının özelleştirilmesini sağlar. Özellikleri etkinleştirmek ve kullanıcıların ihtiyaçlarıyla alakalı işlevi seçmelerine olanak tanımak için seçenekleri kullanın.
Seçenekler sayfasını bulma
Kullanıcılar, seçenekler sayfasına doğrudan bağlantıyı kullanarak veya araç çubuğundaki uzantı simgesini sağ tıklayıp ardından seçenekleri belirleyerek erişebilir. Ayrıca kullanıcılar ilk olarak chrome://extensions
uygulamasını açıp istenen uzantıyı bularak, Ayrıntılar'ı tıkladıktan sonra seçenekler bağlantısını tıklayarak seçenekler sayfasına gidebilir.
![Kullanıcı arayüzündeki seçenekler sayfası bağlantısı](https://developer.chrome.com/static/docs/extensions/develop/ui/options-page/image/options-page-link-the-us-ae0a3ee5d7b2e.png?authuser=5&hl=tr)
![İçerik Menüsü Seçenekleri sayfası](https://developer.chrome.com/static/docs/extensions/develop/ui/options-page/image/context-menu-options-page-3d4d2c8dcce27.png?authuser=5&hl=tr)
Seçenekler sayfasını yaz
Aşağıda, bir seçenekler sayfası örneği verilmiştir:
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>
Aşağıda, örnek bir seçenek komut dosyası verilmiştir. options.html
ile aynı klasöre kaydedin.
Bu işlem, kullanıcının cihazlarda storage.sync
API'yi kullanan tercih ettiği seçenekleri kaydeder.
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);
Son olarak, "storage"
iznini uzantının manifest dosyasına ekleyin:
manifest.json:
{
"name": "My extension",
...
"permissions": [
"storage"
]
...
}
Seçenekler sayfası davranışını bildir
İki tür uzantı seçenekleri sayfası vardır: tam sayfa ve yerleştirilmiş. Seçenekler sayfasının türü, manifest'te nasıl tanımlandığına göre belirlenir.
Tam sayfa seçenekleri
Yeni bir sekmede tam sayfa seçenekler sayfası görüntülenir. Seçenekler HTML dosyasını, "options_page"
alanındaki manifest dosyasında kaydedin.
manifest.json:
{
"name": "My extension",
...
"options_page": "options.html",
...
}
![Tam sayfa seçenekleri](https://developer.chrome.com/static/docs/extensions/develop/ui/options-page/image/full-page-options-06cf906a1303e.png?authuser=5&hl=tr)
Yerleştirilmiş seçenekler
Yerleştirilmiş seçenekler sayfası, kullanıcıların yerleştirilmiş bir kutunun içindeki uzantı yönetimi sayfasından çıkmadan uzantı seçeneklerini ayarlamasına olanak tanır. Yerleştirilmiş seçenekleri bildirmek için HTML dosyasını uzantı manifest'indeki "options_ui"
alanının altına ("open_in_tab"
anahtarı false
olarak ayarlanmış şekilde) kaydedin.
manifest.json:
{
"name": "My extension",
...
"options_ui": {
"page": "options.html",
"open_in_tab": false
},
...
}
![Yerleştirilmiş seçenekler](https://developer.chrome.com/static/docs/extensions/develop/ui/options-page/image/embedded-options-7de329f362ce.png?authuser=5&hl=tr)
page
(dize)- Uzantının köküne göre seçenekler sayfasının yolunu belirtir.
open_in_tab
(boolean)- Uzantının seçenekler sayfasının yeni bir sekmede açılıp açılmayacağını belirtir.
false
olarak ayarlanırsa uzantının seçenekler sayfası yeni bir sekmede açılmak yerinechrome://extensions
içine yerleştirilir.
Farklılıkları göz önünde bulundurun
chrome://extensions
içine yerleştirilmiş seçenek sayfalarının davranış açısından sekmelerdeki seçenek sayfalarına göre küçük farklılıkları vardır.
Seçenekler sayfasının bağlantısı
Bir uzantı, chrome.runtime.openOptionsPage()
numaralı telefonu arayarak doğrudan seçenekler sayfasına bağlantı verebilir. Örneğin, bir pop-up'a eklenebilir:
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'));
}
});
Sekmeler API'sı
Yerleştirilmiş seçenek kodu bir sekmede barındırılmadığı için Tabs API kullanılamaz.
Seçenekler sayfasının kapsayıcı sekmesini değiştirmesi gerekiyorsa bunun yerine runtime.connect()
ve runtime.sendMessage()
öğelerini kullanın.
Mesajlaşma API'leri
Bir uzantının seçenekler sayfası, runtime.connect()
veya runtime.sendMessage()
kullanarak mesaj gönderirse gönderenin sekmesi ayarlanmaz ve gönderenin URL'si, seçenekler sayfası URL'si olur.
Boyutlandırma
Katıştırılmış seçenekler, sayfa içeriğine göre kendi boyutlarını otomatik olarak belirlemelidir. Ancak yerleştirilmiş kutu bazı içerik türleri için iyi bir boyut bulamayabilir. Bu sorun en çok, içerik şeklini pencere boyutuna göre ayarlayan seçenek sayfalarında görülür.
Bu bir sorunsa yerleştirilmiş sayfanın uygun bir boyut bulacağından emin olmak için seçenekler sayfasına yönelik sabit minimum boyutlar sağlayın.