Apply css filter on video tag not working

Add-ons Development
#1

Nevermind this. Lack of help pushed me to Chrome.

It has what I need out of Chrome’s WebStore.

Thank you anyway.

My LCD sucks so I created this addon to filter the video tag and hopefully add some brightness to videos. The code works ok on a regular page, with the video in it. But not as an addon. My skills are limited enough to create up to this, but doesn’t work.

I have a manifest, popup.html with the slider and at the end calling jquery then the script.

popup.html

<div>
<label><strong>Brightness</strong><code><span id="brightness-val">1</span></code></label>
<input id="brightness" type="range" min="1" max="3" step="0.01" value="1" />
</div>
<script src='jquery.min.js'></script>
<script  src="script.js"></script>

script.js

$("input").on('change',function () {
  var brightness = $("#brightness").val();
  var filters = "brightness(" + brightness + ")";
  var videoTag = document.getElementsByTagName("video");
  $(videoTag).css('-webkit-filter', filters);
  $("#brightness-val").text(brightness);
});

manifest.json

{
"manifest_version": 2,
"name": "Filters",
"description": "video filter",
"version": "1.0",

"permissions": [
"activeTab"
],

"browser_action": {
"default_title": "Filter",
"default_popup": "popup.html",
"default_icon": {
"48": "icon.png"
}
},

"page_action": {
"browser_style": true
},
}

I am over-extending the reach of my know-how because there is not such addon for Mozilla, only ChromeStore offers video filters for html5 videos. So any help would be appreciated.

#2

In case someone stumbles across this or you’re still interested in solving it:
The reason your approach is not working is that you’re trying to apply the filter to all video elements in your popup. However, to affect videos in a tab, you have to use a content script. I’d probably use


In this case, since it means you don’t need a separate content script and can easily run the js on the tab’s DOM. Note that you’d also need to inject jquery if you want to rely on it in the tab’s context.

#3

Hi Martin,
Well, been in that page. But I don’t really program in JS as you could notice, which is the reason I came to ask for help from the pros to help me with those 3… 4 lines of necessary code.

But leave it for posterity as you said, I’ve found my solution in Chrome. And the css3 filter runs smoother in Chrome as well. Now I can watch my paid streams without having to dev console all the time.

Anyway, thanks.

#4

For future reference:

If you have a working script for the Web Console, you have some simpler options for running it against the current page:

(1) On Demand

You can save your script as a bookmarklet and run it with a click, either from the Bookmarks Toolbar or Bookmarks Menu. Also, there is an extension that lists your bookmarklets on the right-click context menu if you don’t want to display the built-in Toolbar/Menu.

(2) Automatically

With a few more metadata lines, you can have a userscript host extension such as Violentmonkey, Tampermonkey, or Greasemonkey run your script when the page loads. If there are complex timing issues related to delayed loading of the video, this may take a little more development.

#5

Don’t forget about Stylus, my (old) favorite. If the thing is css, Stylus can do it.

But those seem to be an overkill. Seems like buying a Ferrari just to go to CVS. I tend to limit the amount of addons/extenssions installed, as they degrade the performance of my ageing 2011 Macbook Pro. Specially if the extension is “heavy” & complex, as those are.

And to be specific about your reply, on demand is what I’ve been doing, which is a pain, as every page load I have to go there and re-do it, breaks my “happy hour” movie/tv time modus “couch” operandi.

And automatically does not cut it, as each movie needs a specific amount of brightness/contrast to it. The reason behind my idea of having a button with a slider where I can do that in .4 seconds using the mouse only.

Thank you jscher2000.