1// Copyright (c) 2012 The Chromium Authors. All rights reserved. 2// Use of this source code is governed by a BSD-style license that can be 3// found in the LICENSE file. 4 5// Store CSS data in the "local" storage area. 6// 7// Usually we try to store settings in the "sync" area since a lot of the time 8// it will be a better user experience for settings to automatically sync 9// between browsers. 10// 11// However, "sync" is expensive with a strict quota (both in storage space and 12// bandwidth) so data that may be as large and updated as frequently as the CSS 13// may not be suitable. 14var storage = chrome.storage.local; 15 16// Get at the DOM controls used in the sample. 17var resetButton = document.querySelector('button.reset'); 18var submitButton = document.querySelector('button.submit'); 19var textarea = document.querySelector('textarea'); 20 21// Load any CSS that may have previously been saved. 22loadChanges(); 23 24submitButton.addEventListener('click', saveChanges); 25resetButton.addEventListener('click', reset); 26 27function saveChanges() { 28 // Get the current CSS snippet from the form. 29 var cssCode = textarea.value; 30 // Check that there's some code there. 31 if (!cssCode) { 32 message('Error: No CSS specified'); 33 return; 34 } 35 // Save it using the Chrome extension storage API. 36 storage.set({'css': cssCode}, function() { 37 // Notify that we saved. 38 message('Settings saved'); 39 }); 40} 41 42function loadChanges() { 43 storage.get('css', function(items) { 44 // To avoid checking items.css we could specify storage.get({css: ''}) to 45 // return a default value of '' if there is no css value yet. 46 if (items.css) { 47 textarea.value = items.css; 48 message('Loaded saved CSS.'); 49 } 50 }); 51} 52 53function reset() { 54 // Remove the saved value from storage. storage.clear would achieve the same 55 // thing. 56 storage.remove('css', function(items) { 57 message('Reset stored CSS'); 58 }); 59 // Refresh the text area. 60 textarea.value = ''; 61} 62 63function message(msg) { 64 var message = document.querySelector('.message'); 65 message.innerText = msg; 66 setTimeout(function() { 67 message.innerText = ''; 68 }, 3000); 69} 70