├── mata-active-38.png
├── mata-inactive-128.png
├── mata-inactive-16.png
├── mata-inactive-38.png
├── mata-inactive-48.png
├── content.css
├── README.md
├── background.js
├── manifest.json
└── content.js


/mata-active-38.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wilbertliu/Mata/HEAD/mata-active-38.png


--------------------------------------------------------------------------------
/mata-inactive-128.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wilbertliu/Mata/HEAD/mata-inactive-128.png


--------------------------------------------------------------------------------
/mata-inactive-16.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wilbertliu/Mata/HEAD/mata-inactive-16.png


--------------------------------------------------------------------------------
/mata-inactive-38.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wilbertliu/Mata/HEAD/mata-inactive-38.png


--------------------------------------------------------------------------------
/mata-inactive-48.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wilbertliu/Mata/HEAD/mata-inactive-48.png


--------------------------------------------------------------------------------
/content.css:
--------------------------------------------------------------------------------
1 | .mata-friendly, .mata-friendly * {
2 |   background-color: black !important;
3 |   color: #777 !important;
4 | }
5 | 
6 | .mata-friendly, .mata-friendly img {
7 |   opacity: 0.7 !important;
8 | }
9 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | ## Mata
 2 | A Chrome extension that makes reading the web friendly for your eyes. 
 3 | 
 4 | 
 5 | ## Installation
 6 | [Download it on the Chrome Store](https://chrome.google.com/webstore/detail/mata/oakhnpcgdembaopakdnfkejfcaeipeik?hl=en-US)
 7 | 
 8 | ## Demo
 9 | This is Mata, either you could click that 'eye' button or create your own shortcut
10 | ![](http://i.imgur.com/Adw6b37.png)
11 | 
12 | Here is an example of Medium article, which would be turned into 'night' vision
13 | ![](http://g.recordit.co/qtEgeaAP5k.gif)
14 | 
15 | 
16 | 


--------------------------------------------------------------------------------
/background.js:
--------------------------------------------------------------------------------
 1 | chrome.browserAction.onClicked.addListener(function(tab) {
 2 |   chrome.tabs.query({ active: true, currentWindow: true }, function(tabs) {
 3 |     var activeTab = tabs[0];
 4 |     chrome.tabs.sendMessage(activeTab.id, { "message": "clicked_browser_action" });
 5 |   });
 6 | });
 7 | 
 8 | chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
 9 |   // Returned from content script that should contain current_icon_path
10 |   if (request.message == "clicked_browser_action") {
11 |     // Truly change the extension's icon
12 |     chrome.browserAction.setIcon({ path: { "38": request.current_icon_path }, tabId: sender.tab.id });
13 |   }
14 | });
15 | 


--------------------------------------------------------------------------------
/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "manifest_version": 2,
 3 | 
 4 |   "name": "Mata",
 5 |   "description": "Reading the web should be friendly for your eyes",
 6 |   "version": "1.1.0",
 7 | 
 8 |   "icons": {
 9 |     "16": "mata-inactive-16.png",
10 |     "48": "mata-inactive-48.png",
11 |     "128": "mata-inactive-128.png"
12 |   },
13 | 
14 |   "browser_action": {
15 |     "default_icon": { "38": "mata-inactive-38.png" }
16 |   },
17 | 
18 |   "background": {
19 |     "scripts": ["background.js"]
20 |   },
21 | 
22 |   "content_scripts": [
23 |     {
24 |       "matches": [
25 |         "<all_urls>"
26 |       ],
27 |       "css": ["content.css"],
28 |       "js": ["content.js"]
29 |     }
30 |   ]
31 | }
32 | 


--------------------------------------------------------------------------------
/content.js:
--------------------------------------------------------------------------------
 1 | var body = document.body;
 2 | var isActive = false;
 3 | var icon = document.createElement('input');
 4 |     icon.type = 'hidden';
 5 |     icon.value = 'meta-inactive-38.png';
 6 |     icon.id = 'mata-icon-name';
 7 | 
 8 | body.appendChild(icon);
 9 | 
10 | function activate_mata() {
11 |   body.classList.add('mata-friendly');
12 |   icon.value = 'mata-active-38.png';
13 |   isActive = true;
14 | }
15 | 
16 | function deactivate_mata() {
17 |   body.classList.remove('mata-friendly');
18 |   icon.value = 'mata-inactive-38.png';
19 |   isActive = false;
20 | }
21 | 
22 | function toggle_mata() {
23 |   if (isActive) {
24 |     deactivate_mata();
25 |   } else {
26 |     activate_mata();
27 |   }
28 | }
29 | 
30 | function updateStatus() {
31 |   isActive = icon.value === 'meta-inactive-38.png' ? false : true;
32 | }
33 | 
34 | chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
35 |   if (request.message == "clicked_browser_action") {
36 |     toggle_mata();
37 |     chrome.runtime.sendMessage({ "message": "clicked_browser_action", "current_icon_path": icon.value });
38 |   }
39 | });
40 | 
41 | body.addEventListener("DOMSubtreeModified", updateStatus);
42 | 


--------------------------------------------------------------------------------