ArtsAutosBooksBusinessEducationEntertainmentFamilyFashionFoodGamesGenderHealthHolidaysHomeHubPagesPersonal FinancePetsPoliticsReligionSportsTechnologyTravel

The Utility of User Scripts (JS) and User Styles (CSS)

Updated on February 14, 2016
Figure 1: The Greasemonkey and Stylish add-ons for Firefox make it easy to manage and apply user scripts and styles
Figure 1: The Greasemonkey and Stylish add-ons for Firefox make it easy to manage and apply user scripts and styles

JavaScript and CSS are not just server-end technologies. You can write your own scripts and style sheets, and make your Web browser apply them to any website. In this article, we will breeze through this esoteric form of JavaScript and CSS, and learn why it has thousands of loyal fans, many of whom have not even written a single line of JavaScript or CSS, and yet swear that their browsing method is a cut above the rest.
How many times have you wished that some websites had chosen different colours, contrasts or font sizes? Have you wished some websites did not make intolerable demands on your patience or try to make you feel vulnerable? Well... user styles and scripts can help. They can make recalcitrant websites behave and good websites become better. Finally, you will be in control.
User scripts and user styles are supposed to be written by end-users (we, the ones using the browser) to customise the functionality or the look-and-feel of websites they visit. This is quite contrary to the popular perception that CSS and JavaScript files are authored by Web designers and are part of the websites they originate from.

While it may seem that knowledge of CSS and JavaScript is a prerequisite, most fans simply visit websites such as OpenUserJS.org or UserStyles.org to get what they want. Just like bookmarklets, thousands of user JS and user CSS, for almost every imaginable purpose, have been published. I write almost all of my user scripts/styles. If you are a Web developer, you might want to do the same.
In the Firefox, Seamonkey and IceApe browsers, you can use the Greasemonkey add-on to manage and execute user scripts, and the Stylish add-on to manage and apply user styles. Both add-ons provide a text editor to write your JS/CSS. The add-ons also let you apply the CSS/JS to a specific site (using wildcards in URLs) or to all sites, in general.

The pre-Blink Opera (12.x and older) browser always had builtin support for user scripts and styles. It had to do that, as it was eliminated from many popular websites because of ill-informed Web programmers who relied on browser detection (which favoured Internet Explorer) instead of feature detection. Opera has now become a Chrome clone and the Presto-engine-based Opera 12.x has become obsolete.
The utility of user scripts and user styles is best illustrated by examples.

Figure 2: The "Stay signed-in" check box in many big websites is selected by default. This means that these websites will continue to track you even when you click the "Log out" link and when you are on any of their "partner" websites.
Figure 2: The "Stay signed-in" check box in many big websites is selected by default. This means that these websites will continue to track you even when you click the "Log out" link and when you are on any of their "partner" websites.

User script examples

Figure 2 shows the well-known Gmail login page. There was a time when webmail providers would leave the ‘Stay signed in’ unchecked, by default. Now, it is checked by default (not just by Google but by other providers too). Unchecking this box every time you want to log in is an extra step that is easy to forget.
How do you get it automatically unchecked? This Greasemonkey script can do it for you.

// ==UserScript==
// @name Uncheck Google Signed-In Checkbox
// @description Automatically unchecks the “Stay signed-in”
check box
// @include https://accounts.google.com/*
// @version 1
// @grant none
// ==/UserScript==
document.addEventListener(“DOMContentLoaded”,
uncheckGoogleStaySignedInButton,
false);
function uncheckGoogleStaySignedInButton() {
try {
document.getElementById(“PersistentCookie”).checked =
false;
} catch (err) {
console.error(“UGSIC Greasemonkey Error: “ + err);
}
}
Figure 3: This screenshot shows the text editor of the Greasemonkey add-on with the code to uncheck the ‘Stay signed-in’ check box
Figure 3: This screenshot shows the text editor of the Greasemonkey add-on with the code to uncheck the ‘Stay signed-in’ check box

The Greasemonkey add-on executes this script on all pages matching the @include filter. The script finds the checkbox and unchecks it. With minor changes, you can make the same script work on the Yahoo Mail login page too.
Before writing the script, you have to find the HTML element ID of the checkbox. As any web developer worth his / her salt knows, this can be accomplished by rightclicking the checkbox on the Web page and selecting ‘Inspect element’ from the context menu.
Next, do you find the pre-roll Yahoo Mail page asking you for your phone number annoying? Then, this user script will automatically get you past the page.

// ==UserScript==
// @name Bypass Phone Number Prompt on Yahoo Mail
// @description Get past the page that asks for your phone
number
// @include https://edit.yahoo.com/progreg/*
// @exclude %exclude%
// @version 1
// @grant none
// ==/UserScript==
document.addEventListener(“DOMContentLoaded”,
getPastPhoneNumberPage,
false);
function getPastPhoneNumberPage() {
try {
//window.alert(“Moving past the page”);
location.href = “https://mail.yahoo.com”;
} catch (err) {
console.log(“BPNPYM Greasemonkey Error: “ + err);
}
}

If you refused to provide your number once, then should not the site respect that decision by remembering it? By playing dumb every time you log in, it is trying to coerce you into parting with your number.

Figure 4: These screenshots show the ‘before’ and ‘after’ appearances of a DuckDuckGo search engine results page. The actual stylesheet code is not so important as the scope and possibilities that these screenshots illustrate
Figure 4: These screenshots show the ‘before’ and ‘after’ appearances of a DuckDuckGo search engine results page. The actual stylesheet code is not so important as the scope and possibilities that these screenshots illustrate

User style examples

Figure 4 shows a DuckDuckGo page. I use this search engine as the default because it has better respect for people.
However, I found that the colours and the contrast on its Web pages were not much to my liking. So, I wrote a user CSS for it, remembering to suffix the styles with an ‘!important’ attribute to override the page authors' setting.
For the Wikipedia website, I use the following CSS because its pages are usually text-heavy and take up the entire width of the screen. On big monitors, they can literally be a pain in the neck.

* { font-family: Century Schoolbook L!important; }
div#content { font-size: 1.2em; width: 7in; }

User JS/CSS on the mobile

Being a fan of user scripts and styles, I added the ability to run them in a namesake browser that I created for Android. While the user styles can be written in the usual way, the user scripts have to be written in bookmarklet format, prefixed with ‘javascript:’. For example, to edit a Web page, I use this script:

javascript:(function() { document.body.
contentEditable=true;document.designMode='on'; }) ();

Once executed, this brings up the on-screen keyboard and you can then start editing the current Web page. The same code works in a regular desktop browser too. Go ahead and type it in your address bar.

Figure 5: Subhash Browser & Feed Reader, an app created by this writer, supports user scripts and styles. JS and CSS files prefixed with an underscore will be executed/applied automatically on all pages
Figure 5: Subhash Browser & Feed Reader, an app created by this writer, supports user scripts and styles. JS and CSS files prefixed with an underscore will be executed/applied automatically on all pages
Figure 6: This screenshot shows two of my user JS in action. One has displayed a button to download a YouTube video. The video, in turn, shows a user JS in Opera 12.x browser deleting my Facebook posts!
Figure 6: This screenshot shows two of my user JS in action. One has displayed a button to download a YouTube video. The video, in turn, shows a user JS in Opera 12.x browser deleting my Facebook posts!

Maintenance

Of course, Web pages change and the IDs (or whatever you had tried to meddle with) change along with them.
Your Greasemonkey script may eventually stop working. You will have to either fix it yourself, update it from the Web or find a new one.
Recently, I published a Greasemonkey script that would go through all posts in a Facebook profile’s Activity Log and delete one post after another - it is much more fun that way rather than asking Facebook to delete it all in one go.

This was necessitated because an older Greasemonkey script referred by an equally old article [I Decided to Delete All My Facebook Activity, by Jennifer Golbeck] had become obsolete. In another case, a Greasemonkey script I wrote to download YouTube videos as MP4/FLV/WebM files stopped working within a month of release.
Although I fixed it, it may not be long before the script needs attention again.
While it seems that user scripts and styles have a finite shelf life, the beauty of open source ensures that anyone can revive a JS or CSS and bring it back to the community.
Apart from the above-mentioned sites, greasyfork.org also provides user scripts. For a long time, Greasemonkey developers had the userscripts.org site to distribute user scripts. Before becoming defunct, the site was troubled by DMCA requests from control-freak webmasters who did not quite understand user scripts, buckled under spam/ DDOS attacks and went without a full-time admin. Many of the original developers from userscripts.org have not yet moved to the new sites. Hence, many user scripts are littered all over the Web, including sites such as gist.github.com. I would suggest that readers first trawl the comments section or the forums before installing any script or style. The Greasemonkey and Stylish extensions can be easily installed by doing a search in the Firefox add-on manager.

working

This website uses cookies

As a user in the EEA, your approval is needed on a few things. To provide a better website experience, hubpages.com uses cookies (and other similar technologies) and may collect, process, and share personal data. Please choose which areas of our service you consent to our doing so.

For more information on managing or withdrawing consents and how we handle data, visit our Privacy Policy at: https://corp.maven.io/privacy-policy

Show Details
Necessary
HubPages Device IDThis is used to identify particular browsers or devices when the access the service, and is used for security reasons.
LoginThis is necessary to sign in to the HubPages Service.
Google RecaptchaThis is used to prevent bots and spam. (Privacy Policy)
AkismetThis is used to detect comment spam. (Privacy Policy)
HubPages Google AnalyticsThis is used to provide data on traffic to our website, all personally identifyable data is anonymized. (Privacy Policy)
HubPages Traffic PixelThis is used to collect data on traffic to articles and other pages on our site. Unless you are signed in to a HubPages account, all personally identifiable information is anonymized.
Amazon Web ServicesThis is a cloud services platform that we used to host our service. (Privacy Policy)
CloudflareThis is a cloud CDN service that we use to efficiently deliver files required for our service to operate such as javascript, cascading style sheets, images, and videos. (Privacy Policy)
Google Hosted LibrariesJavascript software libraries such as jQuery are loaded at endpoints on the googleapis.com or gstatic.com domains, for performance and efficiency reasons. (Privacy Policy)
Features
Google Custom SearchThis is feature allows you to search the site. (Privacy Policy)
Google MapsSome articles have Google Maps embedded in them. (Privacy Policy)
Google ChartsThis is used to display charts and graphs on articles and the author center. (Privacy Policy)
Google AdSense Host APIThis service allows you to sign up for or associate a Google AdSense account with HubPages, so that you can earn money from ads on your articles. No data is shared unless you engage with this feature. (Privacy Policy)
Google YouTubeSome articles have YouTube videos embedded in them. (Privacy Policy)
VimeoSome articles have Vimeo videos embedded in them. (Privacy Policy)
PaypalThis is used for a registered author who enrolls in the HubPages Earnings program and requests to be paid via PayPal. No data is shared with Paypal unless you engage with this feature. (Privacy Policy)
Facebook LoginYou can use this to streamline signing up for, or signing in to your Hubpages account. No data is shared with Facebook unless you engage with this feature. (Privacy Policy)
MavenThis supports the Maven widget and search functionality. (Privacy Policy)
Marketing
Google AdSenseThis is an ad network. (Privacy Policy)
Google DoubleClickGoogle provides ad serving technology and runs an ad network. (Privacy Policy)
Index ExchangeThis is an ad network. (Privacy Policy)
SovrnThis is an ad network. (Privacy Policy)
Facebook AdsThis is an ad network. (Privacy Policy)
Amazon Unified Ad MarketplaceThis is an ad network. (Privacy Policy)
AppNexusThis is an ad network. (Privacy Policy)
OpenxThis is an ad network. (Privacy Policy)
Rubicon ProjectThis is an ad network. (Privacy Policy)
TripleLiftThis is an ad network. (Privacy Policy)
Say MediaWe partner with Say Media to deliver ad campaigns on our sites. (Privacy Policy)
Remarketing PixelsWe may use remarketing pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to advertise the HubPages Service to people that have visited our sites.
Conversion Tracking PixelsWe may use conversion tracking pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to identify when an advertisement has successfully resulted in the desired action, such as signing up for the HubPages Service or publishing an article on the HubPages Service.
Statistics
Author Google AnalyticsThis is used to provide traffic data and reports to the authors of articles on the HubPages Service. (Privacy Policy)
ComscoreComScore is a media measurement and analytics company providing marketing data and analytics to enterprises, media and advertising agencies, and publishers. Non-consent will result in ComScore only processing obfuscated personal data. (Privacy Policy)
Amazon Tracking PixelSome articles display amazon products as part of the Amazon Affiliate program, this pixel provides traffic statistics for those products (Privacy Policy)
ClickscoThis is a data management platform studying reader behavior (Privacy Policy)