Fixing jQuery's Opacity in Firefox Extensions
The solution below does not seem to work anymore since jQuery 1.7. This Stack Overflow answer seems to provide a working solution.
I managed to get it working too, but I recognized one problem: I was not able to set the opacity of an element via
$(el).css('opacity', 0.5) nor did the effects like
It took some time for me to figure it out (couldn’t find anything on the web about it):
When jQuery loads, it checks, which features are supported by the browser. It seems that the check for opacity fails due the fact, that jQuery runs in another context.
If it is loaded via an overlay for the browser
window is not pointing to the top element of the current page but to the whole browser window. This seems to make at least the opacity test fail
In order to manipulate the current HTML document with jQuery from your extension and to get opacity working, you have to keep two things in mind:
Before you use jQuery in your extension, set
jQuery.supported.opacity = true;
This enables opacity.
Provide the correct context to jQuery when accessing elements from the current website. The
documentelement of the focused website is accessible via
window.content.document. Thus, to select an element with ID
foo, you have to do