@ -0,0 +1,35 @@ | |||
<!DOCTYPE html> | |||
<html> | |||
<head> | |||
<title>9GAG LILiK Mod Preferences</title> | |||
<link rel="stylesheet" type="text/css" href="style.css"> | |||
</head> | |||
<body> | |||
<header> | |||
<div class="logo"><img src="../assets/logo100.png"></div> | |||
<h1>9GAG LILiK Mod Settings</h1> | |||
</header> | |||
<section class="container"> | |||
<div id="bar"></div> | |||
<table id="settings"> | |||
<thead> | |||
<tr> | |||
<td>Setting</td> | |||
<td>Value</td> | |||
</tr> | |||
</thead> | |||
<tbody> | |||
<tr> | |||
<td>Message</td> | |||
<td><input type="checkbox" id="msg"/></td> | |||
</tr> | |||
</tbody> | |||
</table> | |||
</section> | |||
<script type="text/javascript" src="preferences.js"></script> | |||
</body> | |||
</html> |
@ -0,0 +1,46 @@ | |||
//saves the data into storage | |||
function saveSettings(){ | |||
var message = document.getElementById("msg").checked; | |||
chrome.storage.sync.set({ | |||
message:message | |||
}, 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; | |||
}); | |||
} | |||
//calling the getMessage() function to show the saved message when opening from 2nd time. | |||
document.addEventListener('DOMContentLoaded', function(){ | |||
getMessage(); | |||
loadSettings(); | |||
}); | |||
//binding change event to text box to call function to save data | |||
document.getElementById('msg').addEventListener('change', saveSettings); | |||
var settings = [ | |||
{ | |||
id: 1, | |||
name: "Message", | |||
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>"; | |||
}); | |||
} | |||
@ -0,0 +1,46 @@ | |||
body{ | |||
background: #333; | |||
color: #efefef; | |||
margin: 0; | |||
padding: 0; | |||
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; | |||
font-weight: 300; | |||
} | |||
body > *{ | |||
width: 90%; | |||
margin: 0 auto; | |||
} | |||
header{ | |||
overflow: hidden; | |||
padding-top: 20px; | |||
} | |||
header > *{ | |||
float: left; | |||
vertical-align: middle; | |||
} | |||
header h1{ | |||
font-size: 50px; | |||
font-weight: 100; | |||
margin-left: 10px; | |||
} | |||
section.container{ | |||
clear: both; | |||
} | |||
table{ | |||
width: 100%; | |||
font-size: 18px; | |||
font-weight: 100; | |||
letter-spacing: 0.02em; | |||
} | |||
table tr:nth-child(2n+1){ | |||
background-color: #666; | |||
} | |||
table thead tr td{ | |||
background-color: #222; | |||
} | |||
table td{ | |||
padding: 5px; | |||
} |