LAPTOP i7

Diving into an hacked Chrome extension

Diving into an hacked Chrome extension

This page explain how to make minified JS code readable.

Dive into HTML

The HTML part is usually easy : just need to open the .html files and to look around. However, mine appeared tricky ! The developers, a professional software company wishing to increase its visibility, voluntarily made the code harder to read. My .html is actually almost empty, and filled through js event. So I went on...

Javascript

The JS code was itself *minified* : no comments, no spaces, no lines jumps. This practice increase code opacity, making it quite unreadable for humans. Below is an example, I changed some code (ie:myID) so you can guess a bit:

function openurl(){chrome.extension.sendRequest({openurl:http://www.mywebsite.com},window.close()}var fill=document.getElementById(myDivID);fill.innerHTML=<font color="#888888"><b>My Bold Sentence:</b></font>;fill.title=Fly over title ;);fill=document.getElementById(mySpanID);fill.innerHTML=<img id="image" src="myIcon.png" >My small sentence.;?

After asking a friend for keywords, I googled for a "minifier/unminifier". I loved:

1. http://jsbeautifier.org/: website, simple, efficient, online deminifier
2. Pretty Beautiful Javascript (Chrome extension): elegant, efficient, on-fly deminifier ! In chrome://settings/extensions need to "Allow access to file URLs" chrome extension, need based on the website script

function openurl() {
    chrome.extension.sendRequest({
        openurl: http://www.mywebsite.com
    },
    window.close()
}
var fill = document.getElementById(myDivID);
fill.innerHTML = <font color="#888888"><b>My Bold Sentence:</b></font>;
fill.title = Fly over title ;);
fill = document.getElementById(mySpanID);
fill.innerHTML = <img id="image" src="myIcon.png" >My small sentence.;????

Much nicer ! The code is now far more readable and human-friendly. Prepare a cup of coffee, warm up your eyes and fingers: you will have to code tonight !