How to build your own Notes Chrome extension

Hey Guys! So sometime back I had a really cool idea of making a unique chrome extension… But one little problem I didn't know how to even make a simple extension. So I decided on developing a Notes application that can store unique notes for different webpages.

Notes App

I had one requirement that whenever I am reading a research paper I wanted to keep separate notes for each of them. I didn’t want to mix them up together. I know I know … there are many existing extensions that do this but my main problem is they are too complex! I keep playing around with all the different options that they had. So I wanted to keep it simple and also learn about chrome extensions on the way :).

Lets get on with the building the extension:

Skip to the code directly at: https://github.com/jainilparikh/Notes-Chrome-plugin

Logic:

1. Fetch the tabs url.
2. Fetch the content that the user types in the plugin text area.
3. Create a 1:1 mapping between the URL and notes. Then save it in persistence storage.

First some basics.. In any chrome extension there are three important files:

1. Manifest.json: This file controls the permissions that your extension can access, the icon of the extension, name of the extension, names of the other javascript files and also the popup html(basically what you will see when a user clicks on your plugin).
2. popup.js: This file controls all the actions that the user does on the popup window(The window that the user sees when they click on the chrome extension icon). OnClick events, user Inputs can be taken care from here.You cant interact with the web page that the user is viewing from this file.
3. content.js: A content script is a part of your extension that runs in the context of a particular web page (as opposed to background scripts which are part of the extension). You can interact with the web page that the user is viewing from this file using standard DOM APIs.It cant access any other API’s(security reasons!).
4. background.js: This script cant access popup window or user webpage but it can access any API’s.

To communicate between these files we use a messaging system. Generally we send data from content.js to background.js and call a relevant API from there and return the result to content.js. All using the messaging system.

Ok LETS start:

1. First open VS Code(or any editor of your choice)
2. create a new File and name it Manifest.json

The “name” field will define the name seen by users. The “permission” field will ensure that the chrome plugin asks all the needed permissions from the user before they download it.

3. Create a popup.html file. This is the view that you see when the user clicks on the plugin icon on his browser.

4. Create a popup.js file. This file controls the elements on popup.html . Remember that you can access some chrome API’s but can’t access any external API’s. For that you will have to send a message to background.js and return the result from there.

This file calls the chrome.tabs API to get the URL of the current tab.It later fetches the users notes from popup.html and saves then in a Persistence storage. Persistence storage is only deleted when the user explicitly clears it from their browser. So for lazy users it basically stays for ever :).

Chrome.tabs.query : It fetches the URL of the element in focus.

document.getElementById(‘’): it is a callback that is executed when the user clicks the save button.It takes the notes from the text area and creates a 1:1 mapping with the URL that we found above. Then it stores them in persistence storage.

Final Plugin Image

Thanks a lot for being till the End!! Please share your views on the article and the plugins that you made.