edoardoo
9 years ago
4 changed files with 131 additions and 2 deletions
Split View
Diff Options
-
+4 -2manifest.json
-
+35 -0preferences/preferences.html
-
+46 -0preferences/preferences.js
-
+46 -0preferences/style.css
+ 4
- 2
manifest.json
View File
+ 35
- 0
preferences/preferences.html
View File
| @ -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> | |||
+ 46
- 0
preferences/preferences.js
View File
| @ -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>"; | |||
| }); | |||
| } | |||
+ 46
- 0
preferences/style.css
View File
| @ -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; | |||
| } | |||