user1141649 user1141649 - 4 months ago 7
jQuery Question

How to change webpage look using JQuery?

I would like to create JQuery script which will change a look of html page. My goal in this example is to use black background and white text with big wide font.

$("<style type='text/css'> body, div, p, li { background-color: black; color:white; font-family:\"Arial Black\"; font-size: 20px; font-weight:bold; font-size:28px;} </style>").appendTo("head");


I am developing this as a part of webextension and a sample page which I apply on this page:

https://www.mozilla.org/en-US/

(Notice: You won't find my code there, the website above is a subject or target to change)

The following is optional - only if anybody wants to test the JQuery code as an extension:

If you want to check the Mozilla site using my extension you need the manifest.json

{
"description": "Changes the webpage",
"manifest_version": 2,
"name": "Facilitate my work",
"version": "1.0",
"homepage_url": "https://www.mozilla.org/en-US/",
"icons": {
"48": "icons/border-48.png"
},
"applications": {
"gecko": {
"id": "facil070716",
"strict_min_version": "45.0"
}
},
"content_scripts": [
{
"matches": ["*://*.mozilla.org/*"],
"js": [
"scripts/jquery-3.0.0.js",
"scripts/change_DOM.js"]
}
]
}


and two scripts - jquery downloaded from here:
https://code.jquery.com/jquery-3.0.0.js
and change_DOM.js containing the JQuery code.

Which you can add to Addons Debuger in Firefox 45 and greater

So when I apply the Jquery code on Mozilla site I can see this:

example image

It looks like there are some big images but these areas are li elements (green, purple, blue and orange rectangles). E.g. the style applied on the green li is:

.promo-large-landscape.encryption {
background: #6fbe4a;
}


and I would like it to be black but for some reason the my style li was not applied.

So this is the question, how do it the webpage to be completely black, but text to be white.

Also if you can give me tips how to to it to detect such situation like this: there are great rectangles which are just taking space and I would like them to remove - so how to detect them. It could be just a add, but it takes most of the space on the screen so I would like to detect it. The algorithm must be general so I can apply it on any website not just Mozilla.

Updated:
Current code which I am working with is this:

$('body, h1, h2, h3, h4, h5, div, p, ul, li').css({'background-color': 'black', 'color':'#f7fab0', 'font-family':'Arial Black', 'font-size': '20px', 'font-weight':'bold', 'font-size':'28px', 'padding-left':'0px', 'padding-right':'0px'});

Answer

You can use the jQuery .css function:

$('body, div, p, li').css({'background-color': 'black', 'color':'white', 'font-family':'Arial Black', 'font-size': '20px', 'font-weight':'bold', 'font-size':'28px'});

In your code change the part .appendTo("head") to .appendTo($("head")):

$("<style type='text/css'> body, div, p, li { background-color: black; color:white; font-family:\"Arial Black\"; font-size: 20px; font-weight:bold; font-size:28px;} </style>").appendTo($("head"));
Comments