Why isn't Javascript working in Google's example code for the new style of Chrome extension options pages?
Question
I'm trying to follow the example code for the newer style of making options pages . I've added an options.html and options.js file with the exact content that they list on that page. I've also added the "options_ui" section to my manifest.json (and removed the trailing comma after '"chrome_style": true').
When I do this I am able to open the options window for the extension but the saving and loading functionality do not work. I've tried adding in some console logs and alerts and these don't seem to be executing either. I can't find any errors or warnings anywhere but I just can't figure out how to get the JavaScript to execute. Does anybody know what I need to do differently?
Edit: I'm adding the source files here to make it easier for people to scan through them and for posterity.
manifest.json
{
"manifest_version": 2,
"name": "My extension",
"description": "test extension",
"version": "1.0",
"options_ui": {
// Required.
"page": "options.html",
// Recommended.
"chrome_style": true
// Not recommended; only provided for backwards compatibility,
// and will be unsupported in a future version of Chrome (TBD).
//"open_in_tab": true
}
}
options.html
<!DOCTYPE html>
<html>
<head>
<title>My Test Extension Options</title>
<style>
body: { padding: 10px; }
</style>
</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>
options.js
// Saves options to chrome.storage.sync.
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);
1 answers
solution1
3 ACCPTED 2015-07-18 20:10:56
To use the chrome.storage API, you have to declare the storage permission in the manifest file.
If you right-clicked on your options page, selected "Inspect element" (to open the devtools), and switched to the Console tab, then you would have received the "Cannot read property 'sync' of undefined" error.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.