init

.gitignore

@@ -0,0 +1,3 @@
+node_modules
+.idea
+.DS_Store

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2018
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,43 @@
+# Sloth
+
+`Sloth` - an extension to make you suffer, browsing the web.
+
+Do you think that users have fast device/connection as you as developer has?
+
+No they are not. Their devices/connection are slow! Very slooow!
+
+![](https://media.giphy.com/media/6olNeyYPutJjq/giphy.gif)  
+
+---
+
+So enabling network and cpu throttling to have the same user experience.
+
+---
+
+## Conditions:
+
+- CPU: `4x` throttling
+
+- Network connection: `1.6Mbps` - download, `750Kbps` - upload
+
+## Testing
+
+Extension is tested using [puppeteer](https://github.com/GoogleChrome/puppeteer).
+Token was generated to rich tested extension page. It's value stored in fixtures the same as fixture for manifest.json.
+All other files (background.js, popup.html, popup.js) are symlinks (./extension -> ./test/fixtures)
+
+## Development
+
+After adding new permissions commands below has to be run.
+
+```
+# Create private key called key.pem
+2>/dev/null openssl genrsa 2048 | openssl pkcs8 -topk8 -nocrypt -out key.pem
+
+# Generate string to be used as "key" in manifest.json (outputs to stdout)
+2>/dev/null openssl rsa -in key.pem -pubout -outform DER | openssl base64 -A
+
+# Calculate extension ID (outputs to stdout). Should be added to URL to path to extention page, aka chrome-extension://new_generate_key/popup.html
+2>/dev/null openssl rsa -in key.pem -pubout -outform DER |  shasum -a 256 | head -c32 | tr 0-9a-f a-p
+ 
+```

extension/background.js

@@ -0,0 +1,107 @@
+class Storage {
+  constructor() {
+    this.storage = chrome.storage;
+
+    this.schema = {
+      throttlingEnabled: 'throttlingEnabled',
+      applyToAllTabs: 'applyToAllTabs'
+    }
+  }
+
+  set(key, value) {
+    const data = {};
+    data[key] = value;
+    return new Promise((resolve, reject) => {
+      this.storage.sync.set(data, () => {
+        if (chrome.runtime.error) {
+          reject('Value was not set');
+        }
+
+        resolve();
+      });
+    })
+  }
+
+  get(key) {
+    return new Promise((resolve, reject) => {
+      this.storage.sync.get(key, value => {
+        if (chrome.runtime.error) {
+          reject('Value can\'t be get');
+        }
+        resolve(value);
+      });
+    });
+  }
+
+  onChanged(cb) {
+    this.storage.onChanged.addListener(cb);
+  }
+}
+
+class Debugger {
+  constructor() {
+    this.debugger = chrome.debugger;
+  }
+
+  sendCommand(target, method, commandParams = null) {
+    return new Promise((resolve, reject) => {
+      this.debugger.sendCommand(target, method, commandParams, () => {
+        if (chrome.runtime.error) {
+          reject(chrome.runtime.lastError);
+        }
+
+        resolve();
+      });
+    });
+  }
+
+  attach(target, requiredVersion) {
+    return new Promise((resolve,reject) => {
+      this.debugger.attach(target, requiredVersion, () => {
+        if (chrome.runtime.error) {
+          reject(chrome.runtime.lastError);
+        }
+
+        resolve();
+      });
+    });
+  }
+}
+
+
+class Tabs {
+  constructor() {
+    this.tabs = chrome.tabs;
+  }
+
+  getOpenedTabs() {
+    return new Promise(resolve => {
+      this.tabs.query({}, resolve);
+    });
+  }
+
+  getCurrentTab() {
+    const queryInfo = {
+      active: true,
+      currentWindow: true
+    };
+
+    return new Promise(resolve => {
+      chrome.tabs.query(queryInfo, (tabs) => {
+        resolve(tabs[0]);
+      });
+    });
+  }
+
+  onCreated(cb) {
+    this.tabs.onCreated.addListener(cb);
+  }
+}
+
+const storage = window.storage = new Storage();
+const chromeDebugger = window.chromeDebugger = new Debugger();
+const chromeTabs = window.chromeTabs = new Tabs();
+
+chrome.debugger.onDetach.addListener(() => {
+  storage.set(storage.schema.throttlingEnabled, false);
+});

extension/manifest.json

@@ -0,0 +1,21 @@
+{
+    "name": "Sloth",
+    "description": "Brings connection like your users have to you ;)",
+    "version": "0.1",
+    "icons": {
+        "16": "images/icon-16x16.png",
+        "120": "images/icon-120x120.png"
+    },
+    "permissions": [
+        "debugger",
+        "storage"
+    ],
+    "background": {
+        "scripts": ["background.js"]
+    },
+    "browser_action": {
+        "default_title": "Sloth - slooow connection by default",
+        "default_popup": "popup.html"
+    },
+    "manifest_version": 2
+}

extension/popup.html

@@ -0,0 +1,105 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Enable throttling</title>
+  <style>
+    .container {
+      width: 300px;
+      background: #1f1a25;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      min-height: 200px;
+      flex-direction: column;
+    }
+    .input-group {
+      margin-bottom: 25px;
+      display: flex;
+      justify-content: center;
+      color: #58afd1;
+      font-size: 14px;
+      cursor: pointer;
+    }
+    .input-group label {
+      cursor: pointer;
+      padding: 0 5px;
+    }
+    /* button by @Giana - https://codepen.io/giana/pen/xdXpJB */
+    .draw-border {
+      box-shadow: inset 0 0 0 4px #58afd1;
+      color: #58afd1;
+      transition: color 0.25s 0.08333333s;
+      position: relative;
+    }
+    .draw-border::before, .draw-border::after {
+      border: 0 solid transparent;
+      box-sizing: border-box;
+      content: '';
+      pointer-events: none;
+      position: absolute;
+      width: 0;
+      height: 0;
+      bottom: 0;
+      right: 0;
+    }
+    .draw-border::before {
+      border-bottom-width: 4px;
+      border-left-width: 4px;
+    }
+    .draw-border::after {
+      border-top-width: 4px;
+      border-right-width: 4px;
+    }
+    .draw-border:hover,
+    .draw-border:disabled {
+      color: #ffe593;
+    }
+    .draw-border:hover::before, .draw-border:hover::after {
+      border-color: #ffe593;
+      transition: border-color 0s, width 0.25s, height 0.25s;
+      width: 100%;
+      height: 100%;
+    }
+    .draw-border:disabled::before, .draw-border:disabled::after {
+      border-color: #ffe593;
+      transition: none;
+      width: 100%;
+      height: 100%;
+    }
+    .draw-border:hover::before {
+      transition-delay: 0s, 0s, 0.25s;
+    }
+    .draw-border:hover::after {
+      transition-delay: 0s, 0.25s, 0s;
+    }
+
+    .btn {
+      background: none;
+      border: none;
+      cursor: pointer;
+      line-height: 1.5;
+      font: 700 1.2rem 'Roboto Slab', sans-serif;
+      padding: 1em 2em;
+      letter-spacing: 0.05rem;
+    }
+    .btn:focus {
+      outline: 2px dotted #55d7dc;
+    }
+  </style>
+</head>
+<body>
+  <div class="container">
+    <div class="input-group">
+      <input type="checkbox" id="apply-to-tab" class="js-apply-to-tab" name="apply-to-tab" value="apply-to-tab" checked disabled>
+      <label for="apply-to-tab">Apply to current tab</label>
+    </div>
+    <div class="input-group">
+      <input type="checkbox" id="apply-to-all-tabs" class="js-apply-to-all-tabs" name="apply-to-all-tabs" value="apply-to-all-tabs" checked>
+      <label for="apply-to-all-tabs">Apply to all opened tabs</label>
+    </div>
+    <button class="btn draw-border js-enable-throttling" type="button">Apply throttling</button>
+  </div>
+  <script src="popup.js"></script>
+</body>
+</html>