If you don't like it, change it.

You got to love the era we are currently living in ( I am of course referring to computing ). We have a lot of options and choices for anything from the programming language we use, the OS we run, the hardware it runs on, an insane amount of choices in every direction you look.

But...

Still sometimes, we have a great product that we use frequently and there is a feature missing that you really, really need. If this is a website you are in luck, because you can use a piece of software ( Chrome - Extension ) that opens up fantastic possibilities for anyone who knows Javascript and CSS to basically, change everything about the Frontend of the Websites or Web Platforms you use frequently.

My initial Problem

I am about to build a workstation for myself so I can do a little more than I am currently able to, with my aging Dell Latitude E6430. What can I say, I hate parting with hardware that still works and I like upgrading these and extend their life expectancy (and of course save the some CO₂ in the process).

So I went over to Amazon ( always use Smile if you don't use it already ) to compile a list of components. I don't know about you, but I am not very good at doing calculations in my head, especially when the numbers have decimals. So I started creating a list hoping that I will have a TOTAL that shows me what my new PC would cost. I don't know why but that is not a feature of the wishlist.

My first solution ( make it work )

Well, this is the point where I remembered the saying that became the title of this article, so I opened the developer tools in Chrome and got to writing this short script:

var majorSpans = document.getElementsByClassName("a-price-whole");
var minorSpans = document.getElementsByClassName("a-price-fraction");
var currencySymbol = document.getElementsByClassName("a-price-symbol")[0];

major=[];
minor=[];

sum = 0;

for(var i=0; i < majorSpans.length; i++) {
    major.push (majorSpans[i].innerText.substring(0, majorSpans[i].innerText.indexOf(".")));
    minor.push (minorSpans[i].innerText);
}

for(var i=0; i < major.length; i++) {
    sum += parseInt(major[i]);
    sum += (parseInt(minor[i]) / 100);
}

console.log("your wishlist costs: " + sum + " " + currencySymbol.innerText);
var listTitle = document.getElementById("profile-list-name");
var oldHtml = listTitle.innerHTML;
listTitle.innerHTML = oldHtml 
+ "<span style='color: #008400; text-weight: bolder;'> ( " 
+ sum.toFixed(2) + " " 
+ currencySymbol.innerText 
+ " ) </span>";

In doing so, I was able to go:

from this

to this

Not bad, eh?

The good solution ( making it right )

Once you got something to work, you need to make it right, and who wants to paste a bunch of code in the developer tools every time, to make this happen? Enter the coolest, most useful chrome extension I have discovered on my own: Javascript and CSS

This thing is awesome. It allows you to hook into the website and inject your own Javascript and CSS to get executed on whichever event you might need.

You can even bring in other libraries such as JQuery and Angular, the sky is the limit.

Just imagine the possibilities!

Until now I used this extension for the following customizations:

• sum up wishlists on amazon
• remove annoying ads and content
• auto liking youtube videos
• highlight specific keywords on news websites
• completely change the navigation / menu of websites

What will you think of?
Tweet @veo_twitt if you have cool ideas that you like to share.

Happy customizing!

Comments

[Viorel PETCU]

Inspired by @emx2anuel

I also wrote another 50 lines to create some nice new feature for YouTUBE.

You end up having queues with total time in parentheses

Happy new year !!!

[emx2anuel]

WOW, this was such a revelation.
I always hated scrollbars and now I have added this to absolutely ALL pages:

/* For Webkit (Chrome, Safari, newer versions of Opera): */
::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.05); /* 95% transparent */
}

/* For Firefox: */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.05) transparent;
}

/* For IE and Edge: */
* {
    -ms-overflow-style: auto;
}

[SavagePixie]

That's very handy!