added setting permamence. Only checkbox working

preferences/preferences.html

@@ -20,10 +20,7 @@
 			</tr>
 		</thead>
 		<tbody>
-			<tr>
-				<td>Message</td>
-				<td><input type="checkbox" id="msg"/></td>
-			</tr>
+			
 			
 		</tbody>
 	</table>

preferences/preferences.js

@@ -1,44 +1,71 @@
 //saves the data into storage
 function saveSettings(){
-    var message = document.getElementById("msg").checked;
-    chrome.storage.sync.set({
-        message:message
-    }, function(){
+    var setting = this.id;
+    setting = setting.split("_")[1];
+    var value = this.childNodes[1].childNodes[0].checked;
+
+    var obj = {};
+    obj[setting] = value;
+    chrome.storage.sync.set(
+        obj
+    , function(){
         //callback function after saving the preferences
         document.getElementById("bar").innerHTML = "Saved the preferences.";
         
-    })
+    });
     
 }
 
 //get the value stored in the storage and will be shown in the text box.
-function getMessage(){
-    chrome.storage.sync.get("message",function(obj){
-         document.getElementById("msg").checked = obj.message;
+function getSetting( settingId ){
+    chrome.storage.sync.get( settingId ,function(obj){
+
+         document.getElementById( "setting_" + settingId ).childNodes[1].childNodes[0].checked = obj[settingId];
+         // console.dir( obj[settingId]);
     });   
 }
 
-//calling the getMessage() function to show the saved message when opening from 2nd time.
+//calling the getSetting() function to show the saved message when opening from 2nd time.
 document.addEventListener('DOMContentLoaded', function(){
-    getMessage();
     loadSettings();
+    addListener();
+
 });
 //binding change event to text box to call function to save data
-document.getElementById('msg').addEventListener('change', saveSettings);
+function addListener(){
+    var settingsElement = document.getElementsByClassName("setting");
+
+    for( var i = 0 ; i < settingsElement.length; i++){
+        settingsElement[i].addEventListener('change', saveSettings);
+
+    }
+
+    
+}
 
 var settings = [
     {
-        id: 1,
+        id: "1",
         name: "Message",
         type: "checkbox"
-    }
+    }, {
+        id: "2",
+        name: "Message 2",
+        type: "checkbox"
+    }, {
+        id: "3",
+        name: "Message 3",
+        type: "checkbox"
+    }, 
 ];
 
 function loadSettings(){
     var table = document.getElementById("settings");
+
     settings.forEach( function( setting ){
         var type = "";
-        table.innerHTML = table.innerHTML + "<tr id='setting_"+setting.id+"''><td>"+setting.name+"</td><td><input type='"+setting.type+"'></td><tr>";
+        table.innerHTML = table.innerHTML + "<tr id='setting_"+setting.id+"'' class='setting'><td>"+setting.name+"</td><td><input type='"+setting.type+"'></td><tr>";
+        getSetting( setting.id );
     });
     
 }