Make Chrome Your Notepad With This Small Trick (The Easiest Note Taking You Can Think of!)
I am calling this the easiest note taking on Chrome. If you are on Chrome OS, well, this is the easiest. This btw will work on all modern web browsers, and not Chrome specific.
Here is How You Can Take Note on A New Tab
Open up a new tab and type this in the addressbar.
data:text/html, <html contenteditable>
Boom! that tab is now your notepad! Try typing something in there (note the addressbar). You will see what I am talking about!
Add a bookmark using the code as the URL, for easy access!
Did I mention that this works on Chrome for Android too?
How Do I Save This?
As soon as I posted this one on Google Plus, Joe Nicholson commented to let me know that we can just press CTRL + S to save the note. It saves as “dataurl.mhtml” by default.
Rino van Dam sent me a link with more information on this feature. I got the following from there. Useful information indeed.
You don’t need to remember it. It’s not rocket science. We are using the Data URI’s format and telling the browser to render an html (try “javascript:alert(‘Bazinga’);”). The content of said html is a simple html line with the html5 attribute contenteditable. This works only on modern browsers that understand this attribute.
And Then Something Awesome Happened.
I started reading comments from that article, and was blown away. Here is a few things I learned.
http://a5.gg/ uses this feature to let you take notes. Simple note taking, and it auto saves using local storage of your browser.
If you use the following code, you will get a fancier note making experience, better font and the background color of the tab will change as you type.
data:text/html, <html><head><link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'><style type="text/css"> html { font-family: "Open Sans" } * { -webkit-transition: all linear 1s; }</style><script>window.onload=function(){var e=false;var t=0;setInterval(function(){if(!e){t=Math.round(Math.max(0,t-Math.max(t/3,1)))}var n=(255-t*2).toString(16);document.body.style.backgroundColor="#ff"+n+""+n},1e3);var n=null;document.onkeydown=function(){t=Math.min(128,t+2);e=true;clearTimeout(n);n=setTimeout(function(){e=false},1500)}}</script></head><body contenteditable style="font-size:2rem;line-height:1.4;max-width:60rem;margin:0 auto;padding:4rem;">
<!–
html { font-family: “Open Sans” } * { -webkit-transition: all linear 1s; }
–>//
Nice, isn’t it?