• Skip to primary navigation
  • Skip to main content

Chrome Story

Chromebook News, Tips, and Tricks

  • Chromebook
  • Chrome
  • Chromecast
  • Assistant
  • Videos
Home / Chromebook / This Simple Trick Turns Chrome into a Notepad

This Simple Trick Turns Chrome into a Notepad

February 2, 2013 by Dinsan Francis Updated on: 11:38 pm Leave a Comment

Contents

  • 1 Here is How You Can Take Note on A New Tab
  • 2 How Do I Save This?
  • 3 Advanced Code
  • 4 Related

You can call this the easiest note-taking on Chrome. If you are on Chrome OS, well, this is the easiest. This 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 address bar.

data:text/html, <html contenteditable>

That tab is now your notepad. Try typing something in there (note the address bar). You will see what we are talking about.

Add a bookmark using the code as the URL, for easy access. 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.

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.

Advanced Code

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.

Notepad_chrome


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; }
–>//

Please share your tips in the comments section.

  • Facebook
  • Reddit
  • Twitter
  • WhatsApp
  • Pocket
  • Telegram

Related

Filed Under: Chromebook

About Dinsan Francis

Content Developer and Digital Minimalist. Loves testing new Chromebook features and writing about them. Favorite Chrome OS Channel is Canary. | Twitter

Privacy & Cookies: This site uses cookies. By continuing to use this website, you agree to their use.
To find out more, including how to control cookies, see here: Cookie Policy

Updates via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email.

Join 4,036 other subscribers

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

WordPress | Copyright © 2022 Chrome Story | Chrome is a registered trademark of Google Inc.

  • About
  • Privacy
  • YouTube