feat: initial commit

devenbansod · Jun 6, 2019 · c90eca0 · c90eca0
1 parent b5ee006
commit c90eca0
Show file tree

Hide file tree

Showing 5 changed files with 163 additions and 1 deletion.
diff --git a/README.md b/README.md
@@ -1,2 +1,20 @@
 # speed-it-up
-a simple browser extension provides a way to adjust playback rate on any website
+
+A simple browser extension provides a way to adjust playback rate for videos on any streaming website
+
+## How to install
+
+1. Download the [zip from Github](https://github.com/devenbansod/speed-it-up/releases)
+2. Open Google Chrome and go to [chrome://extensions](chrome://extensions)
+3. Enable 'Developer Mode' (toggle on right side of the topbar)
+4. Click on 'Load unpacked' button (towards left side of the topbar) and select the downloaded zip
+
+## How to use
+
+Once the extension has been installed and enabled, you would be able to see the icon on your extension bar:
+
+<img width="500" alt="Screen Shot 2019-06-06 at 5 29 58 PM" src="https://user-images.githubusercontent.com/5762808/59031369-1b330d00-8881-11e9-84c8-fe708ad46af2.png">
+
+Clicking on the icon will open up a pop-up where you can set the playback speed:
+
+<img width="500" alt="Screen Shot 2019-06-06 at 5 16 57 PM" src="https://user-images.githubusercontent.com/5762808/59030632-24bb7580-887f-11e9-8316-fac57871bb33.png">
diff --git a/icon.png b/icon.png
diff --git a/manifest.json b/manifest.json
@@ -0,0 +1,16 @@
+{
+    "name": "Speed it up",
+    "version": "0.0.1",
+    "description": "Adds a browser action that provides a way to adjust playback rate on any website",
+    "permissions": [
+        "tabs",
+        "activeTab",
+        "storage"
+    ],
+    "browser_action": {
+        "default_title": "Speed it up",
+        "default_icon": "icon.png",
+        "default_popup": "popup.html"
+    },
+    "manifest_version": 2
+}
diff --git a/popup.html b/popup.html
@@ -0,0 +1,69 @@
+<html>
+    <head>
+        <script src="popup.js"></script>
+        <style>
+            body {
+                min-width: 300px;
+            }
+
+            .slidecontainer {
+                width: 100%;
+                padding-top: 5%;
+                padding-bottom: 5%;
+            }
+
+            .slider {
+                width: 100%;
+                margin-top: 2.5%;
+            }
+
+            .container {
+                width: 95%;
+                margin-left: 2.5%;
+            }
+
+            .slider {
+                width: 100%;
+                height: 5px;
+                background: #d3d3d3;
+                outline: none;
+                opacity: 0.7;
+                -webkit-transition: .2s;
+                transition: opacity .2s;
+            }
+
+            .slider:hover {
+                opacity: 1;
+            }
+
+            .slider::-webkit-slider-thumb {
+                -webkit-appearance: none;
+                appearance: none;
+                width: 5px;
+                height: 10px;
+                background: #4CAF50;
+                cursor: pointer;
+            }
+
+            .slider::-moz-range-thumb {
+                width: 25px;
+                height: 25px;
+                background: #4CAF50;
+                cursor: pointer;
+            }
+        </style>
+    </head>
+
+    <body>
+        <div class="container">
+            <div id="title"><b>Playback Speed: <span id="currentSpeed"></span>x</b></div>
+            <div class="slidecontainer">
+                <input type="range" min="0.25" max="3" value="1" step="0.25" class="slider" id="playbackSpeed">
+            </div>
+            <div id="buttons">
+                <input class="btn" type="button" value="Reset" id="resetPlaybackSpeed" />
+            </div>
+            </div>
+        </div>
+    </body>
+</html>
diff --git a/popup.js b/popup.js
@@ -0,0 +1,59 @@
+function init() {
+    var slider = document.getElementById('playbackSpeed');
+    var output = document.getElementById('currentSpeed');
+    var resetButton = document.getElementById('resetPlaybackSpeed');
+
+    getFromStorage(null, function (savedData) {
+        lastSetSpeed = savedData.lastSetSpeed || 1;
+
+        setValueInner(lastSetSpeed);
+    });
+
+    // attach the on-change and on-event handlers
+    slider.oninput = setValue;
+    resetButton.onclick = onResetClick;
+
+    function setValue() {
+        setValueInner(this.value);
+    }
+
+    function setValueInner(val) {
+        output.innerHTML = val;
+        slider.value = val;
+
+        chrome.tabs.executeScript(null, {
+            code: getUpdatePlaybackRateFn(val)
+        });
+
+        setInStorage('lastSetSpeed', val);
+    }
+
+    function onResetClick() {
+        setValueInner(1);
+    }
+
+    function getFromStorage(key, callback) {
+        chrome.storage.sync.get(key, function(data) {
+            callback(data);
+        });
+    }
+
+    function setInStorage(key, data) {
+        // Setting
+        chrome.storage.sync.set(JSON.parse(`{"${key}": ${data}}`), function() {
+            if (chrome.runtime.lastError) {
+                console.error(
+                    'Error setting ' + key + ' to ' + JSON.stringify(data) + ': ' + chrome.runtime.lastError.message
+                );
+            }
+        });
+    }
+}
+
+function getUpdatePlaybackRateFn(val) {
+    return `document.querySelectorAll('video').forEach((videoElement) => {
+        videoElement.playbackRate = ${val};
+    });`;
+}
+
+document.addEventListener('DOMContentLoaded', init);