Categories
100DaysOfCode BROWSER EXTENSION TUTORIALS WEB BROWSER

Use Your Web Browser As A Notepad

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! 🙂

Categories
BROWSER EXTENSION HTML JAVASCRIPT TUTORIALS WEB DEVELOPMENT

Write A Google Chrome Extension In 5 Minutes

What is a Google Chrome Extension and what does it do?

Google Chrome extension is a Google Chrome browser extension that acts like a plug-in which adds additional functionalities to your default Google Chrome web browser experience.

Google Chrome web browser comes with a default set of functionalities that are applicable to a wide range of use cases as utilized by all the websites out there. But if you have a requirement for additional browser functionalities that are not already supported by default in your browser, you can try to make use of the available Google Chrome browser extension APIs to create a browser extension that would fulfill your such requirement.

In other words, Google Chrome Extensions extends the functionality of the default Chrome browser by introducing new set of functionalities into it.

What programming language is used to write a Google Chrome Extension?

In order to write a Google Chrome browser extension, you just need to have basic web development knowledge. The programming languages used to develop Google Chrome browser extension are HTML, CSS and Javascript. Using just these 3 languages along with the provided Google Chrome Browser Extension Application Programming Interfaces (APIs), you will be able to develop your Google Chrome browser extension in no time!

With this background information in hand, let us now figure out how to write a new Chrome browser extension.

Getting started with developing Google Chrome extension

All Google Chrome browser extensions must have one required file, the manifest.json file. It is using this manifest.json file that the Google Chrome web browser can identify and display all the available information about your Google Chrome extension.

The manifest.json file will have entries related to your Google Chrome browser extension such as its name, description, version number of the extension, author name, permissions and many other metadata, all stored in JSON format.

So let us now go ahead and create a new directory which I called coolExt where we will store all the files related to this Google Chrome extension. Under this newly created directory, create our manifest.json file with the following content:

manifest.json (The only file required to get Chrome extension started!)
{
    "name":"Cool Extension",
    "description":"My new cool extension",
    "manifest_version":2,
    "version":"1.0",
    "author":"@digitallyamar"
}

You can see that this file contains a set of JSON key:value pairs. Here, each of these JSON key values such as “name”, “manifest_version”, “author” etc are already defined by Google’s Chrome API and hence we cannot alter it but use it as is. On the other hand, the values of these are determined by us according to how we want to describe and design our Chrome browser extension!

With the manifest.json file and its contents in place, it is now time to test our Google Chrome extension. In order to do so, open up your Google Chrome browser and in the address bar type: chrome://extensions

This should now open up a new Chrome Extensions window listing any Google Chrome extensions you might have already installed. At the top of this window, you should see an button called “Load unpacked“, click on it and browse to the “coolExt” directory where we have the above manifest.json file saved in and open it. This should now result in our Google Chrome extension getting installed into our Google Chrome browser and displayed as an installed extension in chrome://extensions

Google Chrome Extension Development In Action

There we have it! A basic version of our simple Google Chrome extension is created and installed into our Google Chrome browser. Although at the moment the Google Chrome extension is not doing much other than just describing itself and some other meta information, we have successfully created the basic framework for our Chrome extension.

We will in the next article continue to develop on this basic Chrome extension to bring in some interesting functionalities to our browser and to some of the websites we will visit. But that will be in the next article, so for now hope you got a basic understanding of how Chrome extensions are built under the hood. Checkout for the next article and if you have any comments on queries with respect to this article, do let me know in the comments below.

Until next time, happy coding! 🙂