Changing background color

[tyeeman]

I'm new to these type of scripts. I entered this into Firemonkey but it does not work -

/*
==UserCSS==
@name           addCSS
@match          *://*/*
@version        1.0
==/UserCSS==
*/

function addCss(cssString) {
var head = document.
getElementsByTagName('head')[0];
return unless head; var newCss = document.createElement('style');
newCss.type = "text/css";
newCss.innerHTML = cssString;
head.appendChild(newCss);
}
addCss (
'* { background-color: red ! important; }'
);

Any tips why the color does not change. In the Browser Console I get this -

Error: WebExtension context not found! ExtensionParent.jsm:1275:13
Content Security Policy: Ignoring ‘x-frame-options’ because of ‘frame-ancestors’ directive.
[Exception... "Component returned failure code: 0x80004005 (NS_ERROR_FAILURE) [nsIDOMWindowUtils.removeSheetUsingURIString]"  nsresult: "0x80004005 (NS_ERROR_FAILURE)"  location: "JS frame :: resource://gre/modules/ExtensionCommon.jsm :: runSafeSyncWithoutClone :: line 75"  data: no] ExtensionCommon.jsm:75:12
[Exception... "Component returned failure code: 0x80004005 (NS_ERROR_FAILURE) [nsIDOMWindowUtils.removeSheet]"  nsresult: "0x80004005 (NS_ERROR_FAILURE)"  location: "JS frame :: resource://gre/modules/ExtensionCommon.jsm :: runSafeSyncWithoutClone :: line 75"  data: no] ExtensionCommon.jsm:75:12

[erosman]

==UserScript== is for injecting JavaScript.

==UserCSS== is for injecting CSS.

In ==UserCSS== JavaScript does not work and not needed for injecting CSS (that is the beauty of it).

Here is an example based on your code:

/*
==UserCSS==
@name           addCSS
@match          *://*/*
@version        1.0
==/UserCSS==
*/

* { background-color: red !important; }

[tyeeman]

OK, thanks, that works fine. That was a test script and it isn't quite doing what I need, the following is what I really wanted to get working. It was a bookmarklet and I used an online converter to make an extension. I just loaded it but it's not working, it's probably a syntax error because the original bookmarklet works good. I will include the bookmarklet below also.

/*
==UserScript==
@name  Zap White Backgrounds
@match  *://*/*
@version        1.0
==/UserScript==
*/

function getRGBColor(node,prop){var rgb=getComputedStyle(node,null).getPropertyValue(prop);var r,g,b;if(/rgb((d+),s(d+),s(d+))/.exec(rgb)){r=parseInt(RegExp.$1,10);g=parseInt(RegExp.$2,10);b=parseInt(RegExp.$3,10);return[r/255,g/255,b/255];}return rgb;} R(document.documentElement); function R(n){var i,x,color;if(n.nodeType==Node.ELEMENT_NODE && n.tagName.toLowerCase()!="input" && n.tagName.toLowerCase()!="select" && n.tagName.toLowerCase!="textarea"){for(i=0;x=n.childNodes[i];++i)R(x); color=getRGBColor(n,"background-color");if( (typeof(color)!="string" && color[0] + color[1] + color[2] >= 2.8) || (n==document.documentElement && color=="transparent")) { n.style.backgroundColor = "tan";/*Moz 1.0*/ n.style.setProperty("background-color", "tan", "important");/*Moz 1.4 after zap colors*/ } }}

Original Bookmarklet

javascript:(function(){function getRGBColor(node,prop){var rgb=getComputedStyle(node,null).getPropertyValue(prop);var r,g,b;if(/rgb\((\d+),\s(\d+),\s(\d+)\)/.exec(rgb)){r=parseInt(RegExp.$1,10);g=parseInt(RegExp.$2,10);b=parseInt(RegExp.$3,10);return[r/255,g/255,b/255];}return rgb;} R(document.documentElement); function R(n){var i,x,color;if(n.nodeType==Node.ELEMENT_NODE && n.tagName.toLowerCase()!="input" && n.tagName.toLowerCase()!="select" && n.tagName.toLowerCase!="textarea"){for(i=0;x=n.childNodes[i];++i)R(x); color=getRGBColor(n,"background-color");if( (typeof(color)!="string" && color[0] + color[1] + color[2] >= 2.8) || (n==document.documentElement && color=="transparent")) { n.style.backgroundColor = "tan";/*Moz 1.0*/ n.style.setProperty("background-color", "tan", "important");/*Moz 1.4 after zap colors*/ } }}})()

[erosman]

I had a look at the code. It appears that it was written long time ago. It uses a recursive loop that is quite resource intensive.

The modern method is to use a NodeIterator or TreeWalker.

Even then, changing the 'background-color' of every element one by one with JavaScript is also resource intensive.

Changing all or some, with CSS uses little resources but there is no logic evaluation (i.e. if this then that).

[tyeeman]

Yes, I would prefer the css method like you posted above but maybe you can modify it a bit to prevent some action that I can see it's doing which the bookmarklet isn't. Take a look at these 3 screen shots, the first is the original, the second is the css, the third is the bookmarklet. Can the css script be modified to give the same output as the bookmarklet?

Original

Css

Bookmarklet

[erosman]

Can the css script be modified to give the same output as the bookmarklet?

Yes... but that would site specific as each site would have different elements.

If you want fit for some specific sites, then it is easy enough. Matching a wide verity of sites would make it a bit more difficult.

In case of above site.... here is an example based on the screenshot

/*
==UserCSS==
@name           blu-ray.com
@match          *://www.blu-ray.com/*
@author         erosman
@version        1.0
@run-at         document-start
==/UserCSS==
*/

body > center > table:not(.newlogo) {
 background-color: tan !important;
}

PS. this CSS practically takes no resources in comparison with that bookmarklet script

[tyeeman]

Thanks, I will try it. Since I'm not a coder, is there an easy way to find out how to add/delete certain sections of web pages, like Firefox's Web Developer Tool? Is that what you used?

[erosman]

is there an easy way to find out how to add/delete certain sections of web pages,

It requires some HTML/CSS knowledge but no JavaScript.

like Firefox's Web Developer Tool? Is that what you used?

Yes.. that is what I do (key F12). find the top most element and change the background and then see if anything else ned fixing.

[tyeeman]

OK, thanks. I found a script that works great in Firemonkey Here. The Howard Smith script down the page. Thanks for all your help. I learned something!

[erosman]

"Bookmarklets to User Scripts" Here.

That only converts a bookmarklet to a user-script and requires further editing before the script would work.

A bookmarklet is just a simple script.

You can convert it to a user script by: 1- remove javascript: from the start 2- add UserScript metadata block

That is all.

You can tidy up the code to look decent by using online tools such as JS NICE.

Bookmarklet only runs when you want it and only on sites that you want.

Setting @match *://*/* would mean it would run on every site and every time. That is a wasted resource and can slow down browser.

Many sites update their content after loading the page, like sites that add new content on scroll e.g. facebook, etc.

Such UserScript wont work on the newly created content, unless extra listeners are added to re-run when new content is added and rerunning will again use more resources.

On the other hand, CSS would work all the time because it is a rule, even when new content is created (not like user-script that changes each element one by one).

[tyeeman]

Yes, I'm seeing what you mean with this Howard Smith script. Even editing here causes it to turn back to white when I save my post. Maybe I should stay with CSS then.

[erosman]

There are many UserStyle available on the net for dark theme for sites. You can use them or adapt them.