I'm making a extension for Google Chrome, the extension deletes all browsing data when the user clicks it, the extension works fine but now im trying to add a options panel where the user can choose which data to delete, my problem is that the options made by the user in the options panel are not being saved (or im not being able to retrieve the data stored in localStorage properly) because when i access the options panel again after saving and closing the checkboxes are blank again.
Manifest [manifest.json]
{
"name": "TEST TITLE",
"version": "1.0",
"manifest_version": 2,
"description": "TEST DESCRIPTION",
"options_page": "options.html",
"icons": { "16": "icon-small.png",
"48": "icon-medium.png",
"128": "icon-big.png" },
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"permissions": [
"storage",
"browsingData"
]
}
HTML [popup.html]
<!DOCTYPE html>
<html>
<head>
<script src="script.js"></script>
</head>
<body>
</body>
</html>
HTML [options.html]
<!DOCTYPE html>
<html>
<head>
<script src="script-options.js"></script>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body onLoad="loadOptions()">
<div id="wrapper-options">
<div id="header-options">OPTIONS</div>
<div id="content-options">
<div id="checkbox-options">
<input name="" id="protectedWeb-checkbox" type="checkbox" value="">Websites that have been installed as hosted applications
</div>
<div id="checkbox">
<input name="" id="unprotectedWeb-checkbox" type="checkbox" value="">Normal websites
</div>
<div id="checkbox">
<input name="" id="extension-checkbox" type="checkbox" value="">Extensions and packaged applications a user has installed
</div>
<div id="checkbox">
<input name="" id="appcache-checkbox" type="checkbox" value="">Websites appcaches
</div>
<div id="checkbox">
<input name="" id="cache-checkbox" type="checkbox" value="">Browser's cache
</div>
<div id="checkbox">
<input name="" id="cookies-checkbox" type="checkbox" value="">Browser's cookies
</div>
<div id="checkbox">
<input name="" id="downloads-checkbox" type="checkbox" value="">Browser's download
</div>
<div id="checkbox">
<input name="" id="fileSystems-checkbox" type="checkbox" value="">Websites file systems
</div>
<div id="checkbox">
<input name="" id="formData-checkbox" type="checkbox" value="">Browser's stored form data
</div>
<div id="checkbox">
<input name="" id="history-checkbox" type="checkbox" value="">Browser's history
</div>
<div id="checkbox">
<input name="" id="indexedDB-checkbox" type="checkbox" value="">Websites IndexedDB data
</div>
<div id="checkbox">
<input name="" id="localStorage-checkbox" type="checkbox" value="">Websites local storage data
</div>
<div id="checkbox">
<input name="" id="pluginData-checkbox" type="checkbox" value="">Plugins data
</div>
<div id="checkbox">
<input name="" id="passwords-checkbox" type="checkbox" value="">Stored passwords
</div>
<div id="checkbox">
<input name="" id="webSQL-checkbox" type="checkbox" value="">Websites WebSQL data
</div>
<div id="button-option">
<input name="" type="button" value="SAVE" onClick="saveOptions()">
<input name="" type="button" value="CANCEL" onClick="">
</div>
</div>
</div>
</body>
</html>
JavaScript [script.js]
// JavaScript Document
function browsingdata(){
chrome.browsingData.remove({
"originTypes": {
"protectedWeb": true, // Set to true or false as per your requirement / Websites that have been installed as hosted applications
"unprotectedWeb":true, // Set to true or false as per your requirement / Normal websites
"extension":true // Set to true or false as per your requirement / Extensions and packaged applications a user has installed
}
}, {
"appcache": true, // Set to true or false as per your requirement / Websites appcaches
"cache": true, // Set to true or false as per your requirement / Browser's cache
"cookies": true, // Set to true or false as per your requirement / Browser's cookies
"downloads": true, // Set to true or false as per your requirement / Browser's download
"fileSystems": true, // Set to true or false as per your requirement / Websites file systems
"formData": true, // Set to true or false as per your requirement / Browser's stored form data
"history": true, // Set to true or false as per your requirement / Browser's history
"indexedDB": true, // Set to true or false as per your requirement / Websites IndexedDB data
"localStorage": true, // Set to true or false as per your requirement / Websites local storage data
"pluginData": true, // Set to true or false as per your requirement / Plugins data
"passwords": true, // Set to true or false as per your requirement / Stored passwords
"webSQL": true // Set to true or false as per your requirement / Websites WebSQL data
}, function (){
console.log("All data Deleted");
});
}
window.onload=browsingdata;
JavaScript [script-options.js]
// JavaScript Document
function saveOptions() {
if (document.getElementById('protectedWeb-checkbox').checked) {
localStorage.setItem('protectedWeb-checkbox', "true");
} else {
localStorage.setItem('protectedWeb-checkbox', "false");
}
}
function loadOptions() {
if (localStorage.getItem('protectedWeb-checkbox') == "true") {
console.log("its checked");
document.getElementById("protectedWeb-checkbox").checked=true;
} else {
console.log("its not checked");
}
}
In addition to the main question i also would like to know which is the best way in your opinion to add the other 14 options to JavaScript [script-options.js] and how would you remend i change the value (true/false) on JavaScript [script.js] using also JavaScript, and ANY advice or remendation about the whole extension code also would be very appreciated.
As always thanks in advance for taking the time to read this, the below list are all the StackOverflow questions and sites i've been reading so far.
/
.html
I'm making a extension for Google Chrome, the extension deletes all browsing data when the user clicks it, the extension works fine but now im trying to add a options panel where the user can choose which data to delete, my problem is that the options made by the user in the options panel are not being saved (or im not being able to retrieve the data stored in localStorage properly) because when i access the options panel again after saving and closing the checkboxes are blank again.
Manifest [manifest.json]
{
"name": "TEST TITLE",
"version": "1.0",
"manifest_version": 2,
"description": "TEST DESCRIPTION",
"options_page": "options.html",
"icons": { "16": "icon-small.png",
"48": "icon-medium.png",
"128": "icon-big.png" },
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"permissions": [
"storage",
"browsingData"
]
}
HTML [popup.html]
<!DOCTYPE html>
<html>
<head>
<script src="script.js"></script>
</head>
<body>
</body>
</html>
HTML [options.html]
<!DOCTYPE html>
<html>
<head>
<script src="script-options.js"></script>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body onLoad="loadOptions()">
<div id="wrapper-options">
<div id="header-options">OPTIONS</div>
<div id="content-options">
<div id="checkbox-options">
<input name="" id="protectedWeb-checkbox" type="checkbox" value="">Websites that have been installed as hosted applications
</div>
<div id="checkbox">
<input name="" id="unprotectedWeb-checkbox" type="checkbox" value="">Normal websites
</div>
<div id="checkbox">
<input name="" id="extension-checkbox" type="checkbox" value="">Extensions and packaged applications a user has installed
</div>
<div id="checkbox">
<input name="" id="appcache-checkbox" type="checkbox" value="">Websites appcaches
</div>
<div id="checkbox">
<input name="" id="cache-checkbox" type="checkbox" value="">Browser's cache
</div>
<div id="checkbox">
<input name="" id="cookies-checkbox" type="checkbox" value="">Browser's cookies
</div>
<div id="checkbox">
<input name="" id="downloads-checkbox" type="checkbox" value="">Browser's download
</div>
<div id="checkbox">
<input name="" id="fileSystems-checkbox" type="checkbox" value="">Websites file systems
</div>
<div id="checkbox">
<input name="" id="formData-checkbox" type="checkbox" value="">Browser's stored form data
</div>
<div id="checkbox">
<input name="" id="history-checkbox" type="checkbox" value="">Browser's history
</div>
<div id="checkbox">
<input name="" id="indexedDB-checkbox" type="checkbox" value="">Websites IndexedDB data
</div>
<div id="checkbox">
<input name="" id="localStorage-checkbox" type="checkbox" value="">Websites local storage data
</div>
<div id="checkbox">
<input name="" id="pluginData-checkbox" type="checkbox" value="">Plugins data
</div>
<div id="checkbox">
<input name="" id="passwords-checkbox" type="checkbox" value="">Stored passwords
</div>
<div id="checkbox">
<input name="" id="webSQL-checkbox" type="checkbox" value="">Websites WebSQL data
</div>
<div id="button-option">
<input name="" type="button" value="SAVE" onClick="saveOptions()">
<input name="" type="button" value="CANCEL" onClick="">
</div>
</div>
</div>
</body>
</html>
JavaScript [script.js]
// JavaScript Document
function browsingdata(){
chrome.browsingData.remove({
"originTypes": {
"protectedWeb": true, // Set to true or false as per your requirement / Websites that have been installed as hosted applications
"unprotectedWeb":true, // Set to true or false as per your requirement / Normal websites
"extension":true // Set to true or false as per your requirement / Extensions and packaged applications a user has installed
}
}, {
"appcache": true, // Set to true or false as per your requirement / Websites appcaches
"cache": true, // Set to true or false as per your requirement / Browser's cache
"cookies": true, // Set to true or false as per your requirement / Browser's cookies
"downloads": true, // Set to true or false as per your requirement / Browser's download
"fileSystems": true, // Set to true or false as per your requirement / Websites file systems
"formData": true, // Set to true or false as per your requirement / Browser's stored form data
"history": true, // Set to true or false as per your requirement / Browser's history
"indexedDB": true, // Set to true or false as per your requirement / Websites IndexedDB data
"localStorage": true, // Set to true or false as per your requirement / Websites local storage data
"pluginData": true, // Set to true or false as per your requirement / Plugins data
"passwords": true, // Set to true or false as per your requirement / Stored passwords
"webSQL": true // Set to true or false as per your requirement / Websites WebSQL data
}, function (){
console.log("All data Deleted");
});
}
window.onload=browsingdata;
JavaScript [script-options.js]
// JavaScript Document
function saveOptions() {
if (document.getElementById('protectedWeb-checkbox').checked) {
localStorage.setItem('protectedWeb-checkbox', "true");
} else {
localStorage.setItem('protectedWeb-checkbox', "false");
}
}
function loadOptions() {
if (localStorage.getItem('protectedWeb-checkbox') == "true") {
console.log("its checked");
document.getElementById("protectedWeb-checkbox").checked=true;
} else {
console.log("its not checked");
}
}
In addition to the main question i also would like to know which is the best way in your opinion to add the other 14 options to JavaScript [script-options.js] and how would you remend i change the value (true/false) on JavaScript [script.js] using also JavaScript, and ANY advice or remendation about the whole extension code also would be very appreciated.
As always thanks in advance for taking the time to read this, the below list are all the StackOverflow questions and sites i've been reading so far.
https://stackoverflow./questions/3033829/google-chrome-extension-local-storage
https://stackoverflow./questions/2153070/do-chrome-extensions-have-access-to-local-storage
https://stackoverflow./questions/11679967/remember-checkbox-with-localstorage-onclick
http://julip.co/2010/01/how-to-build-a-chrome-extension-part-2-options-and-localstorage/
https://developer.chrome./stable/extensions/storage.html
3 Answers
Reset to default 4And here's my contibution.
Done the way it is because I HATE doing html/css ;)
Got auto save on the options so no need for the save button.
Commented out the bit that clears things on the popup press, didnt want to clear anything.
manifest.json
{
"name": "ProtectedWeb",
"description" : "http://stackoverflow./questions/13617257/saving-data-in-localstorage-for-a-googlechrome-extension-options-panel-and-acces/",
"version": "1.0",
"permissions": [
"tabs", "<all_urls>","storage","browsingData"
],
"browser_action": {
"default_title": "Clear stuff",
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"options_page": "options.html",
"manifest_version":2
}
options.html
<html>
<head>
<script src="options.js"></script>
</head>
<body>
<div id="wrapper-options">
<div id="header-options">OPTIONS</div>
<div id="content-options">
<br />
Origin Type
<div id="originTypes">
</div>
<div id="checkbox-options">
<br />
Options
<div id="options">
</div>
</div>
</div>
</div>
</body>
</html>
options.js
// This is where we store the default options if there aren't any options saved and it gets replaced with what is saved on load if there is anything in storage
var Options = {
"originTypes": {
"protectedWeb": false,
// Set to false or false as per your requirement / Websites that have been installed as hosted applications
"unprotectedWeb": true,
// Set to true or false as per your requirement / Normal websites
"extension": false
// Set to true or false as per your requirement / Extensions and packaged applications a user has installed
},
options: {
"appcache": true,
// Set to false or false as per your requirement / Websites appcaches
"cache": true,
// Set to false or false as per your requirement / Browser's cache
"cookies": true,
// Set to false or false as per your requirement / Browser's cookies
"downloads": true,
// Set to false or false as per your requirement / Browser's download
"fileSystems": true,
// Set to false or false as per your requirement / Websites file systems
"formData": true,
// Set to false or false as per your requirement / Browser's stored form data
"history": true,
// Set to false or false as per your requirement / Browser's history
"indexedDB": true,
// Set to false or false as per your requirement / Websites IndexedDB data
"localStorage": true,
// Set to false or false as per your requirement / Websites local storage data
"pluginData": true,
// Set to false or false as per your requirement / Plugins data
"passwords": true,
// Set to false or false as per your requirement / Stored passwords
"webSQL": true
// Set to false or false as per your requirement / Websites WebSQL data
}
}
var optionsTemplate = {
originTypes: [{
name: "appcache",
title: "appcache",
description: "Websites appcaches"
}, {
name: "unprotectedWeb",
title: "Unprotected Web",
description: "Normal websites"
}, {
name: "extension",
title: "Extension",
description: "Extensions and packaged applications a user has installed"
}],
options: [{
name: "appcache",
title: "appcache",
description: "Websites appcaches"
}, {
name: "cache",
title: "cache",
description: "Browser's cache"
}, {
name: "cookies",
title: "cookies",
description: "Browser's cookies"
}, {
name: "downloads",
title: "downloads",
description: "Browser's download"
}, {
name: "fileSystems",
title: "fileSystems",
description: "Websites file systems"
}, {
name: "formData",
title: "formData",
description: "Browser's stored form data"
}, {
name: "history",
title: "history",
description: "Browser's history"
}, {
name: "indexedDB",
title: "indexedDB",
description: "Websites IndexedDB data"
}, {
name: "localStorage",
title: "localStorage",
description: "Websites local storage data"
}, {
name: "pluginData",
title: "pluginData",
description: "Plugins data"
}, {
name: "passwords",
title: "passwords",
description: "Stored passwords"
}, {
name: "webSQL",
title: "webSQL",
description: "Websites WebSQL data"
}]
}
var optionsTemplateSelectors = {
originTypes: '#originTypes',
options: '#options'
}
renderHTML = function(template, targets) {
var key, keys, elements = {};
keys = Object.keys(targets);
for(var i = 0; i < keys.length; i++) {
key = keys[i];
elements[key] = document.querySelector(targets[key]);
if (elements[key]===null) console.debug('Couldn\'t find "'+key+'"" using the querySelector "'+targets[key]+'"');
}
var sections = Object.keys(template),
section;
var item;
var checkbox, div, text;
for(var z = 0; z < sections.length; z++) {
section = sections[z];
for(var i = 0; i < template[section].length; i++) {
item = template[section][i];
div = document.createElement('div');
text = document.createTextNode(item.title);
checkbox = document.createElement('input');
checkbox.type = 'checkbox';
checkbox.id = item.name + '-checkbox';
checkbox.dataset['section'] = section;
checkbox.dataset['key'] = item.name;
checkbox.title = item.description;
if(Options[section][item.name] === true) checkbox.checked = true;
checkbox.addEventListener('change', checkboxChanged);
div.id = item.name;
div.appendChild(checkbox);
div.appendChild(text);
elements[section].appendChild(div);
}
}
}
checkboxChanged = function(evt) {
var src = evt.srcElement;
var checked = src.checked;
Options[src.dataset['section']][src.dataset['key']] = checked;
chrome.storage.local.set({
'options': Options
});
}
init = function() {
chrome.storage.local.get('options', function(options) {
if(Object.keys(options).length === 0) {
chrome.storage.local.set({
'options': Options
});
} else {
Options = options.options;
}
renderHTML(optionsTemplate, optionsTemplateSelectors);
})
}
window.addEventListener('load', init);
popup.html
<!doctype html>
<html>
<head>
<script src="popup.js"></script>
</head>
<body>
</body>
</html>
popup.js
chrome.storage.local.get('options', function(data) {
chrome.browsingData.remove({
"originTypes":data.options.originTypes
},data.options.options);
});
//window.close();
You delete all localstorage data in popup.html. So every time you open it, your settings are gone. If you don't open it, settings are not really usefull.
After going through your code, i prepared a structure which you can further expand for all check boxes;
I have tested it in following cases, let me know if you still have difficulties:
Beginning of page:
After Selection Made
After Page Load:
Refresh:
You can use chrome storage API instead of Local Storage
manifest.json
{
"name": "TEST TITLE",
"version": "1.0",
"manifest_version": 2,
"description": "TEST DESCRIPTION",
"options_page": "options.html",
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"permissions": [
"storage",
"browsingData"
]
}
popup.html
<html>
<head>
<script src="scripts.js"></script>
</head>
<body>
</body>
</html>
options.html
<html>
<head>
<script src="script-options.js"></script>
</head>
<body>
<div id="wrapper-options">
<div id="header-options">OPTIONS</div>
<div id="content-options">
<div id="checkbox-options">
<input name="" id="protectedWeb" type="checkbox" value="">Websites that have been installed as hosted applications
</div>
<div id="button-option">
<input name="" type="button" value="SAVE" id="save" >
</div>
</div>
</div>
</body>
</html>
scripts.js
// JavaScript Document
function browsingdata(){
var protectedWeb;
chrome.storage.local.get('protectedWeb',function (obj){
console.log(obj.protectedWeb);
protectedWeb = obj.protectedWeb;
});
chrome.browsingData.remove({
"originTypes": {
"protectedWeb": protectedWeb, // Set to false or false as per your requirement / Websites that have been installed as hosted applications
"unprotectedWeb":true, // Set to true or false as per your requirement / Normal websites
"extension":true // Set to true or false as per your requirement / Extensions and packaged applications a user has installed
}}, {
"appcache": false, // Set to false or false as per your requirement / Websites appcaches
"cache": false, // Set to false or false as per your requirement / Browser's cache
"cookies": false, // Set to false or false as per your requirement / Browser's cookies
"downloads": false, // Set to false or false as per your requirement / Browser's download
"fileSystems": false, // Set to false or false as per your requirement / Websites file systems
"formData": false, // Set to false or false as per your requirement / Browser's stored form data
"history": false, // Set to false or false as per your requirement / Browser's history
"indexedDB": false, // Set to false or false as per your requirement / Websites IndexedDB data
"localStorage": false, // Set to false or false as per your requirement / Websites local storage data
"pluginData": false, // Set to false or false as per your requirement / Plugins data
"passwords": false, // Set to false or false as per your requirement / Stored passwords
"webSQL": false // Set to false or false as per your requirement / Websites WebSQL data
}, function (){
console.log("All data Deleted");
});
}
window.onload=browsingdata;
script-options.js
// JavaScript Document var storage = chrome.storage.local;
function saveOptions() {
console.log("Clicked ... ");
//Use document.querySelectorAll() function when you all multiple check boxes and iterate over them instead of huge if-else chains
if (document.getElementById('protectedWeb').checked) {
// Save it using the Chrome extension storage API.
storage.set({'protectedWeb': 'true'}, function() {
// Notify that we saved.
console.log('Settings saved');
});
} else {
// Save it using the Chrome extension storage API.
storage.set({'protectedWeb': 'false'}, function() {
// Notify that we saved.
console.log('Settings saved');
});
}
}
function getSelectedData() {
chrome.storage.local.get('protectedWeb',function (obj){
if(obj.protectedWeb == "true"){
document.getElementById('protectedWeb').checked = true;
}else{
document.getElementById('protectedWeb').checked = false;
}
});
}
window.onload = function (){
getSelectedData();
document.getElementById('save').onclick=saveOptions;
}