I am trying to build a Firefox extension to increase the speed of videos on Vimeo and Youtube.
Without an extension, I am able to succesfully do that with (e.g., 3 times the normal speed):
document.getElementsByTagName("video")[0].playbackRate = 3
I just need to run that on the Firefox Web Console (control+shift+k).
In order to build this, I am following the great tutorial provided by Mozilla on the Your First Extension and I was able to successfully replicate what was shown on the tutorial.
After repeating the lesson, I tried some small tweaks.
I did this color change on the borderify.js file. This script has direct access to the webpage:
document.body.style.border = "50px solid yellow";
And on the manifest.json I changed the matches values to get youtube and vimeo domains/sub-domains:
{
"manifest_version": 2,
"name": "Borderify",
"version": "1.0",
"description": "Adds a red border to all webpages matching mozilla.org.",
"icons": {
"48": "icons/border-48.png"
},
"content_scripts": [
{
"matches": [
"*://*.youtube.com/*",
"*://*.vimeo.com/*",
],
"js": [
"borderify.js"
]
}
]
}
My doubts are:
1 - The implementation was able to change the color of the Vimeo pages:
However, the color change ** does not happen** on Youtube.
Why does that happen?
Do I need to write something on the .js file to override Youtube's CSS/HTML source?
Why Youtube and Vimeo behave in a different way?
2 - This color tweak was just a small iteration to see if was doing things right. What I really want to do is speed up the videos by 3x the normal speed.
Hence, I changed my script on borderify.js to really use the code I mentioned above:
document.getElementsByTagName("video")[0].playbackRate = 3
//document.body.style.border = "50px solid yellow";
Despite the fact that this single line of code work on my console browser, it does not work on the firefox extension.
Different from the yellow sidebar, this command does not work either on Vimeo or Youtube.
Why does that happen? How can I fix this?
Thanks in advance.
