Category Archives: chrome extension

Frontb.in screenshot

The Front-End Tab

During your normal debugging and designing applications, what do you require the most ?

How about designing a an extension for chrome that will automatically load all your favourite tools on your new tab page.This is what I have done this weekend.

Currently It has got the following tools :
Checkout the demo here

  1. JS Beautifier
  2. Html Beautifier
  3. CSS Beautifier
  4. JSON Lint
  5. Url Encoder
  6. Url decoder
  7. JShint

Update: version 0.2

  1. Added CodeMirror for syntax highlighting
  2. Remove Whitespace from json and normal text
  3. Html Renderer
  4. Markdown Renderer

Update: version 0.3

  1. Express-js App for running.
  2. Mongodb for storing the pastebins.
  3. html5 pushState while saving
  4. html5 localstorage for saving previous pastebins
  5. Added Grunt Workflow

Update version 0.4

  1. Changed to a better design with congruent background and logo
  2. Added Favicons
  3. Added Nanobar for showing progress

Update 18th Oct 2014

  1. All button sizes should be same
  2. Reset button should be up
  3. Should be viewable on mobile.Made it responsive
  4. Added basic description on clicking on logo
  5. Fixed a bug in JSONLint
  6. Fix Scroll issue in Codemirror caused by overflow:scroll

Check out the demo !
Don’t forget to fork it on github and submit pull requests and issues.

Its open sourced under MIT License.

lifeline chrome extension

Lifeline Chrome extension

TL;DR

Lifeline Chrome Extension that saves all the webpages when you are browsing .So the next time you are offline you can visit the page.

This was my extension for TechFest 2012.

Introduction: Lifeline is a chrome extension to read your favourite web pages as they are even when there is no Internet connectivity.
Necessity: More than 2 billion people are active users of internet. India ranks a extremely poor 114rd in the world. India’s average broadband connection is 0.9 mbps (about 900 kbps) as compared to 13.7 mbps in South Korea.A Times Of India Article dated May 2,2012 :
http://articles.timesofindia.indiatimes.com/2012-05-02/internet/31537373_1_256kbps-speed-internet-speed-akamai. In its report Akamai also listed 100 cities with fastest internet connections in the world. None of the Indian cities are on the list.

(Ctrl+H) for history.Search within the history for the page you want to visit.

Google Chrome already has a save page option . But you cant manually save all the pages you visit .It has got to happen in the background .

How Easy.

If you are worrying about the memory consumption then a simple Comparision : There’s a chrome extension which stores the whole wikipedia offline in just 1Gb.

Technical Stuff :

The elements that make up a webpage are html , css , images .css is used for styling while html is used for markup.

 

To store images, the new HTML5 technology of canvas was used to first create a paint the image in the canvas and get its base64 encode and then toring it.

To store Stylesheets, Ajax (Asynchronous JavaScript and XML) with the help of jQuery was used. Css was necessary for better typography and similiarity of the page.

The whole html page was then converted into a single string ( along with the css and images base64 string) and stored locally.

 

While offline that corresponding string of html was obtained using the key stored and shown on the page.

No javascript is saved.Only the important text ,styles and images.Also , the saved page looks approximately the same as the online.

GitHub Repo :



0 forks.
0 open issues.
Recent commits:

  • ,
  • ,
SpeakerDeck Presentation :
[speakerdeck url="https://speakerdeck.com/kanakiyajay/lifeline-chrome-extension/"]
http://www.youtube.com/watch?v=lKgMTX1R1JU