15821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)// Copyright (c) 2012 The Chromium Authors. All rights reserved. 25821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)// Use of this source code is governed by a BSD-style license that can be 35821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)// found in the LICENSE file. 45821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 55821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)// Store CSS data in the "local" storage area. 65821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)// 75821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)// Usually we try to store settings in the "sync" area since a lot of the time 85821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)// it will be a better user experience for settings to automatically sync 95821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)// between browsers. 105821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)// 115821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)// However, "sync" is expensive with a strict quota (both in storage space and 125821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)// bandwidth) so data that may be as large and updated as frequently as the CSS 135821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)// may not be suitable. 145821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)var storage = chrome.storage.local; 155821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 165821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)// Get at the DOM controls used in the sample. 175821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)var resetButton = document.querySelector('button.reset'); 185821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)var submitButton = document.querySelector('button.submit'); 195821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)var textarea = document.querySelector('textarea'); 205821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 215821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)// Load any CSS that may have previously been saved. 225821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)loadChanges(); 235821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 245821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)submitButton.addEventListener('click', saveChanges); 255821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)resetButton.addEventListener('click', reset); 265821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 275821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)function saveChanges() { 285821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) // Get the current CSS snippet from the form. 295821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) var cssCode = textarea.value; 305821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) // Check that there's some code there. 315821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) if (!cssCode) { 325821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) message('Error: No CSS specified'); 335821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) return; 345821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) } 355821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) // Save it using the Chrome extension storage API. 365821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) storage.set({'css': cssCode}, function() { 375821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) // Notify that we saved. 385821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) message('Settings saved'); 395821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) }); 405821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)} 415821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 425821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)function loadChanges() { 435821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) storage.get('css', function(items) { 445821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) // To avoid checking items.css we could specify storage.get({css: ''}) to 455821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) // return a default value of '' if there is no css value yet. 465821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) if (items.css) { 475821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) textarea.value = items.css; 485821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) message('Loaded saved CSS.'); 495821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) } 505821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) }); 515821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)} 525821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 535821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)function reset() { 545821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) // Remove the saved value from storage. storage.clear would achieve the same 555821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) // thing. 565821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) storage.remove('css', function(items) { 575821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) message('Reset stored CSS'); 585821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) }); 595821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) // Refresh the text area. 605821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) textarea.value = ''; 615821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)} 625821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 635821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)function message(msg) { 645821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) var message = document.querySelector('.message'); 655821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) message.innerText = msg; 665821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) setTimeout(function() { 675821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) message.innerText = ''; 685821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) }, 3000); 695821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)} 70