I have a super simple video playback speed extension. It should increase playback speed by 0.25 when Shift + MouseWheelUp is done and decrease by 0.25 when Shift + MouseWheelDown is done.
When I test it (on YouTube or any other video site with a HTML video tag) I get the following problems:
I put the code below. Feel free to copy everything and test yourself.
Why are these problems happening and how can I fix them?
manifest:
{
"manifest_version": 2,
"name": "Playback Speed Controller",
"version": "1.0",
"description": "Change playback speed using Shift + Scroll Up/Down.",
"icons": {
"48": "icons/playback-speed-controller-48.png"
},
"content_scripts": [
{
"matches": [
"https://odysee.com/*",
"http://odysee.com/*",
"https://www.youtube.com/*"
],
"js": [
"playspeed.js"
],
"run_at": "document_end"
}
]
}
playspeed.js
vid = document.querySelector('video');
document.addEventListener('keydown', changeSpeed);
function changeSpeed(ke) {
if (ke.shiftKey) {
document.addEventListener('wheel', function (se) {
if (se.deltaY < 0) {
increaseSpeed();
} else if (se.deltaY > 0) {
decreaseSpeed();
}
})
}
}
function decreaseSpeed() {
vid.playbackRate -= 0.25;
}
function increaseSpeed() {
vid.playbackRate += 0.25;
}
You're adding a new wheel listener each time the shiftKey is pressed so all these past listeners run forever and get triggered on a wheel scroll and apply their changes to the rate.
The solution is to remove keydown and use one global wheel listener that checks the shiftKey:
document.addEventListener('wheel', e => {
if (e.shiftKey) {
vid.playbackRate -= Math.sign(e.deltaY) * .25;
}
});