Skip to content

Commit c90eca0

Browse files
committed
feat: initial commit
1 parent b5ee006 commit c90eca0

File tree

5 files changed

+163
-1
lines changed

5 files changed

+163
-1
lines changed

README.md

Lines changed: 19 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,20 @@
11
# speed-it-up
2-
a simple browser extension provides a way to adjust playback rate on any website
2+
3+
A simple browser extension provides a way to adjust playback rate for videos on any streaming website
4+
5+
## How to install
6+
7+
1. Download the [zip from Github](https://github.com/devenbansod/speed-it-up/releases)
8+
2. Open Google Chrome and go to [chrome://extensions](chrome://extensions)
9+
3. Enable 'Developer Mode' (toggle on right side of the topbar)
10+
4. Click on 'Load unpacked' button (towards left side of the topbar) and select the downloaded zip
11+
12+
## How to use
13+
14+
Once the extension has been installed and enabled, you would be able to see the icon on your extension bar:
15+
16+
<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">
17+
18+
Clicking on the icon will open up a pop-up where you can set the playback speed:
19+
20+
<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">

icon.png

30.9 KB
Loading

manifest.json

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
{
2+
"name": "Speed it up",
3+
"version": "0.0.1",
4+
"description": "Adds a browser action that provides a way to adjust playback rate on any website",
5+
"permissions": [
6+
"tabs",
7+
"activeTab",
8+
"storage"
9+
],
10+
"browser_action": {
11+
"default_title": "Speed it up",
12+
"default_icon": "icon.png",
13+
"default_popup": "popup.html"
14+
},
15+
"manifest_version": 2
16+
}

popup.html

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
<html>
2+
<head>
3+
<script src="popup.js"></script>
4+
<style>
5+
body {
6+
min-width: 300px;
7+
}
8+
9+
.slidecontainer {
10+
width: 100%;
11+
padding-top: 5%;
12+
padding-bottom: 5%;
13+
}
14+
15+
.slider {
16+
width: 100%;
17+
margin-top: 2.5%;
18+
}
19+
20+
.container {
21+
width: 95%;
22+
margin-left: 2.5%;
23+
}
24+
25+
.slider {
26+
width: 100%;
27+
height: 5px;
28+
background: #d3d3d3;
29+
outline: none;
30+
opacity: 0.7;
31+
-webkit-transition: .2s;
32+
transition: opacity .2s;
33+
}
34+
35+
.slider:hover {
36+
opacity: 1;
37+
}
38+
39+
.slider::-webkit-slider-thumb {
40+
-webkit-appearance: none;
41+
appearance: none;
42+
width: 5px;
43+
height: 10px;
44+
background: #4CAF50;
45+
cursor: pointer;
46+
}
47+
48+
.slider::-moz-range-thumb {
49+
width: 25px;
50+
height: 25px;
51+
background: #4CAF50;
52+
cursor: pointer;
53+
}
54+
</style>
55+
</head>
56+
57+
<body>
58+
<div class="container">
59+
<div id="title"><b>Playback Speed: <span id="currentSpeed"></span>x</b></div>
60+
<div class="slidecontainer">
61+
<input type="range" min="0.25" max="3" value="1" step="0.25" class="slider" id="playbackSpeed">
62+
</div>
63+
<div id="buttons">
64+
<input class="btn" type="button" value="Reset" id="resetPlaybackSpeed" />
65+
</div>
66+
</div>
67+
</div>
68+
</body>
69+
</html>

popup.js

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
function init() {
2+
var slider = document.getElementById('playbackSpeed');
3+
var output = document.getElementById('currentSpeed');
4+
var resetButton = document.getElementById('resetPlaybackSpeed');
5+
6+
getFromStorage(null, function (savedData) {
7+
lastSetSpeed = savedData.lastSetSpeed || 1;
8+
9+
setValueInner(lastSetSpeed);
10+
});
11+
12+
// attach the on-change and on-event handlers
13+
slider.oninput = setValue;
14+
resetButton.onclick = onResetClick;
15+
16+
function setValue() {
17+
setValueInner(this.value);
18+
}
19+
20+
function setValueInner(val) {
21+
output.innerHTML = val;
22+
slider.value = val;
23+
24+
chrome.tabs.executeScript(null, {
25+
code: getUpdatePlaybackRateFn(val)
26+
});
27+
28+
setInStorage('lastSetSpeed', val);
29+
}
30+
31+
function onResetClick() {
32+
setValueInner(1);
33+
}
34+
35+
function getFromStorage(key, callback) {
36+
chrome.storage.sync.get(key, function(data) {
37+
callback(data);
38+
});
39+
}
40+
41+
function setInStorage(key, data) {
42+
// Setting
43+
chrome.storage.sync.set(JSON.parse(`{"${key}": ${data}}`), function() {
44+
if (chrome.runtime.lastError) {
45+
console.error(
46+
'Error setting ' + key + ' to ' + JSON.stringify(data) + ': ' + chrome.runtime.lastError.message
47+
);
48+
}
49+
});
50+
}
51+
}
52+
53+
function getUpdatePlaybackRateFn(val) {
54+
return `document.querySelectorAll('video').forEach((videoElement) => {
55+
videoElement.playbackRate = ${val};
56+
});`;
57+
}
58+
59+
document.addEventListener('DOMContentLoaded', init);

0 commit comments

Comments
 (0)