Background to the problem

Raunaq Patel

·

Follow

5 min read

·

Feb 27, 2019

--

Listen

Share

I graduated from the Copenhagen Institute of Interaction Design in December, and since January 2019, I am designing my portfolio website and going through job boards to find available opportunities for me to work. While going through all these job posts, in most of them if not every, they ask you to send an email to the recruiter.

And as soon as you click that link, BAAM! A new window opens up your email client app. It annoys me so much as, on my MacBook, I never use the default mail app. I usually use google chrome, to log in to mail accounts, be it personal or work email.

It can get really annoying when every 4th link you visit opens up the mail client again and you have to discard the email written or else it will be saved in the drafts automatically.

My intent always is to copy that email so that I can use it in a relevant email client. And I think this is a bad user experience that has been carried out for long, that we direct a user to a default mail client when we don't use a single email ID for all purposes. A person can have personal or work email separate and through different email services.

Solution

So, I decided to make a chrome extension for personal use, which will do the following:

1. Stop the default behaviour of opening the links in an app.
2. Copy the link instead to the clipboard and notify me that the link has been copied.
3. Save the link for future usage.

Development Part

I have less experience with coding and development, so this was fun as I learnt using javascript to make a chrome extension. So, I started looking at the official documentation from Google to develop a chrome extension.
This medium article by Jake Prins also helped me gain a better understanding. If you are a complete newbie, I will recommend you to go through both of them.

What is Chrome Extension usually made up of?

1. Manifest.json file
2. Background script:
   Runs in the extension process, exist for the lifetime of the extension, and only one instance of it at a time is active
3. Content scripts:
   JavaScript files that run in the context of web pages and can access DOM properties of the page.
4. Popup.html:
   The HTML page that opens when you click the icon of the extension in your browser.

For our extension, the setup looks something like this:

Manifest.json

Let’s start by creating a manifest JSON file which will work as the backbone for our project and we will declare all the images, pages, permissions, background and content-script here.

As you can see in the manifest code below, we have declared the following things:

1. Permissions:
   We need permissions from chrome to access the active tabs, chrome storage (to save emails), notifications (to notify the user when email is saved) and to have access on all URLs.
2. Background-scripts:
   We have one script background.js which we declared here.
3. Content-scripts:
   all_frames true- is used to make sure that our extension works in iFrames too and we will stop links from there also.
   js- is used to declare all the content scripts which we will need access to.
4. Browser-action:
   This refers to the extension button in the chrome address bar and what HTML page should be opened when you click it, where are the icons are declared here.

Popup.js

This file is used to stop all the link opening the email client, and instead copy the email to the clipboard. This file also sends the email to the background.js to store the email into chrome storage.

Link click function gets the email using regex and then passes that email to a function copytoClipboard which in turn, copies the link to clipboard and passes the link to background.js by using :

chrome.runtime.sendMessage({arg:val}, function(response{});

Here we are passing two things:

1. type = saveEmail
   For background.js to know where the request came from (in-case, in future we need to pass multiple messages to the background.)
2. msg = str
   The email ID to save

Background.js

You can send a message to background script from content script in order to achieve some result.

We use Request.type in order to differentiate between requests from different pages. Here, in this case, we get the ‘saveEmail’ from popup.js which tells us to save the email. We save the email to the chrome storage using the saveChanges method. We also create a notification for that email is saved.

Popup.html

Now let us create an HTML page that will be loaded when you click the extension icon.

Note: we have used jQuery in the project. So make sure to download that in the root folder.

Now last step:

Page.js

This Javascript file will be used to get all the stored email IDs and then display them in a list. If you click any of the emails in that list, the email will be copied to the clipboard.

Conclusion

It took me less than a day to learn and develop this extension. I am sure I might not have used the best practices in some places but this solves one of my biggest annoyance for now.

The code is available on Github :-)

Also, I published the extension if you are not a developer and want to use this :-)