Categories
100DaysOfCode BROWSER EXTENSION TUTORIALS WEB BROWSER

Use Your Web Browser As A Notepad

Turn your web browser into a text editor such as Notepad in a minute using this code.

Did you know that you can turn your web browser into a notepad like text editor for quickly jotting down some notes while browsing the web?

Yes, it is possible to turn a new browser tab of your favorite browser such as Google Chrome, Firefox or Opera into a text editor in an instant. You do not need to have any programming experience to make this work. You will just need to remember the below little piece of string that you need to type into your favorite web browser to turn it quickly into a notepad.

Below are the steps you need to follow to turn your favorite web browser into a notepad like quick text editor:

  1. Open up a new tab in your web browser
  2. Type in the following piece of code into the URL bar (or the address bar) of your browser tab:
data:text/html, <html contenteditable>

Hit enter and voila! Your browser tab has turned into a notepad! You can now start typing anything you want in the browser tab window and verify that the browser has indeed turned into a note pad!

How does a web browser turn into a text editor?

By typing the above mentioned code into the URL of your web browser we were able to turn the browser tab/window into a text editor. But how did this work?

It works because the above mentioned code instructed the web browser that the current document’s content is of raw text data type – done through the use of keywords data:text/html

On the other hand, by typing in the markup code:

<html contenteditable>

We are instructing the web browser such as Google Chrome or Firefox or Opera to turn this web document into an editable HTML document. This results in browser allowing us to type in any kind of text we want into this browser window from now on!

Thus, we found that by simply typing a simple piece of code:

data:text/html, <html contenteditable>

into the address bar (URL bar) of our web browser, we were successfully able to turn the browser tab into a text editor.

However, it is a little bit difficult to remember this piece of code as it looks a bit cryptic. So to avoid having to remembering this, we will look at how we can create a new Google Chrome extension that can be used to open a browser tab as a notepad every time it is clicked. But that is a topic for my next article.

This article explained how and why typing in some magical code into the address bar of your web browser would convert it into a text editor. Hope it was informational and you learnt something new from it. There are many such simple tricks we can use to convert our web browser into a high performance tool by customizing it to our needs. We will decode each of these tricks as we go further, one step at a time.

Until next time, happy coding! 🙂

By Amar Nath

You can buy me a cup of coffee at:

https://www.buymeacoffee.com/da

One reply on “Use Your Web Browser As A Notepad”