Basic prototype code added

aporcupine · Jun 17, 2014 · f9c7d58 · f9c7d58
1 parent a594d8b
commit f9c7d58
Show file tree

Hide file tree

Showing 6 changed files with 142 additions and 0 deletions.
diff --git a/fonts/Open Sans.woff b/fonts/Open Sans.woff
diff --git a/icon.png b/icon.png
diff --git a/manifest.json b/manifest.json
@@ -0,0 +1,27 @@
+{
+  "manifest_version": 2,
+
+  "name": "Dyslexia Color Filter",
+  "description": "Adds a coloured filtered to webpages to aid dislexics.",
+  "version": "1.0",
+  "content_scripts": [
+    {
+      "matches": [
+        "<all_urls>"
+      ],
+      "js": [
+        "overlay.js"
+      ],
+      "run_at": "document_end"
+    }
+  ],
+  "permissions": [
+    "<all_urls>",
+    "storage"
+  ],
+
+  "browser_action": {
+    "default_icon": "icon.png",
+    "default_popup": "popup.html"
+  }
+}
diff --git a/overlay.js b/overlay.js
@@ -0,0 +1,34 @@
+
+// Use of this source code is governed by a GNU-style license that can be
+// found in the LICENSE file.
+
+var overlay = document.createElement("div");
+chrome.storage.sync.get('color', function(data){
+  var color = 'lime';
+  if ('color' in data) {
+    color = data.color;
+  }
+  var style_string = 'height: 100%;' +
+                     'width: 100%;' +
+                     'background-color:' + color + ';' +
+                     'z-index: 2000000000;' +
+                     'position: fixed;' +
+                     'left: 0;' +
+                     'top: 0;' +
+                     'opacity:0.2;' +
+                     'pointer-events: none;';
+  overlay.setAttribute('style', style_string);
+  });
+
+overlay.setAttribute("id", "dyslexia_filter_overlay");
+document.body.appendChild(overlay);
+
+chrome.storage.onChanged.addListener( function(changes, namespace) {
+  for (key in changes) {
+    var storageChange = changes[key];
+    if (key === 'color') {
+      var overlay = document.getElementById('dyslexia_filter_overlay');
+      overlay.style.background = storageChange.newValue;
+    }
+  }
+});
diff --git a/popup.html b/popup.html
@@ -0,0 +1,63 @@
+<!doctype html>
+<html>
+  <head>
+    <title>Dyslexia Filter</title>
+    <style>
+      @font-face {
+        font-family: 'Open Sans';
+        font-style: normal;
+        font-weight: 400;
+        src: url('../fonts/Open Sans.woff') format('woff');
+      }
+
+      body {
+        min-width: 330px;
+        overflow-x: hidden;
+        font-family: 'Open Sans';
+      }
+
+      .button {
+        height: 40px;
+        width: 60px;
+        border: 1px solid black;
+        background-color: transparent;
+        float: left;
+        margin: 10px;
+      }
+
+      .button:hover {
+        cursor: pointer;
+      }
+
+      .button_inner {
+        height: 36px;
+        width: 56px;
+        margin: 2px;
+      }
+
+      #blank_button {
+        width: 72px;
+        height: 1px;
+        border-bottom:
+        1px solid red;
+        -webkit-transform: translateY(18px) translateX(-6px) rotate(34deg); 
+      }
+    </style>
+    <script src="popup.js"></script>
+  </head>
+  <body>
+  <p style="clear:both">Presets:</p>
+  <div data-color="transparent" class="button">
+    <div id="blank_button"></div>
+  </div>
+  <div data-color="lime" class="button">
+    <div class="button_inner" style="background-color:lime;"></div>
+  </div>
+  <div data-color="blue" class="button">
+    <div class="button_inner" style="background-color:blue;"></div>
+  </div>
+  <div data-color="purple" class="button">
+    <div class="button_inner" style="background-color:purple;"></div>
+  </div>
+  </body>
+</html>
diff --git a/popup.js b/popup.js
@@ -0,0 +1,18 @@
+
+// Use of this source code is governed by a GNU-style license that can be
+// found in the LICENSE file.
+
+function addButtonListener() {
+  var color = this.getAttribute('data-color');
+  chrome.storage.sync.set({'color': color}, function() {
+    // Notify that we saved.
+    console.log('Color updated to: ' + color);
+  });
+}
+
+document.addEventListener('DOMContentLoaded', function() {
+    var buttons = document.getElementsByClassName('button');
+    for (var i = 0; i < buttons.length; i++) {
+      buttons[i].addEventListener('click', addButtonListener);
+    }
+});