QWERTYCOD

Direct to solution!

Email sender Chrome extension

Published on:  


What is browser extension ?

It’s a kind of small software which can run for you every time you open a webpage in your selected browser. The software can have a UI as well where you can see the output of your logic.

We’ll talk about Google chrome in this blog.

You can see the extensions in your Chrome browser using this URL:  chrome://extensions

It should look like this, here there an extension named Email sender chrome extension, it’s showing a toggle button in bottom to control it.

It’s also showing a random ID, Errors button to check if there is any error in the extension code.

We want to have a browser extension which will:

– On page load, will check all the valid email address on the page

– Will highlight all the valid email

– Will attach a click handler on the highlighted email Ids

– On click of email Ids will open a small pop-up to ask (Send email?)

– On click on small pop-up will open another popup to show the actual mailer box

 

Below GIF show it works, we have searched for valid email address in Google chrome, our extension will find the valid email address and have highlighted them already, next action can be seen in GIF.

The final email popup (Email Service) is coming from another source(URL), we are using iframe to load that

 


How to code for it ?

1 – The main file is the manifest.json file which contains information about all the other files in component, it’s like package.json of Node

Most important things to not here are:

  • main.js, it contains the main logic of the extension, scripts inside this file gets executed one page load.
  • co.css, it contains the CSS for our extension
  • popup.html, its the UI for our extension
{
  "name": "Email sender chrome extension",
  "description": "Find valid email and send mail",
  "version": "1.0",
  "manifest_version": 3,
  "permissions": [
      "contextMenus",
      "tabs"
  ],
  "content_scripts":[
    {
      "matches":[""],
       "js":["main.js"],
      "css":["co.css"]

    }
  ],
  "browser_action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "img/icon16.png",
      "32": "img/icon32.png",
      "48": "img/icon48.png"
    }
  }
}

2- Main.js

Methods of main.js are:

a – highlightSearchTerms : It’s a generic method where we can pass our required search term, but we are finding valid email addresses in this method.

b – doHighlight : It highlights the selected words; we are adding a class mailer to highlight the specific strings.

c – There a script snippet which runs for all the div elements with class mailer class it then attaches a click handler over the element, on click of these div elements we are opening a small popup window, in the popup window we ask if the user wants to send mail to this email address, if user click on the small popup window a large popup window is opened using <iframe />. 

d. setUpLargePopup: In this method we are attaching another click handler on popup1 class, it will open a large popup window where we have actual mail system. In the popup window gif as shown above I am showing our mail system, but you don’t have your personal mail system then you can use Gmail.com

If you want to create a similar mail system, then you can do it using the very efficient Azure communication services. You can find its SDK here. 

e – clearPopup: It clears all the popups

Below are all the methods and code from main.js

console.log('Mail extension loaded...')

function highlightSearchTerms(searchText, treatAsPhrase, warnOnFailure, highlightStartTag, highlightEndTag)
{
if (!document.body || typeof(document.body.innerHTML) == "undefined") {
if (warnOnFailure) {
  alert("Sorry, for some reason the text of this page is unavailable. Searching will not work.");
}
return false;
}

var bodyText = document.body.innerHTML;
var search_in = document.body.innerHTML;
string_context = search_in.toString();

array_mails = string_context.match(/([a-zA-Z0-9._-]+@[a-zA-Z0-9._-]+\.[a-zA-Z0-9._-]+)/gi);

if(!array_mails){return}

for (var i = 0; i < array_mails.length; i++) {
bodyText = doHighlight(bodyText, array_mails[i], highlightStartTag, highlightEndTag);
}

document.body.innerHTML = bodyText;
return true;
}
function doHighlight(bodyText, searchTerm, highlightStartTag, highlightEndTag) 
{
// the highlightStartTag and highlightEndTag parameters are optional
if ((!highlightStartTag) || (!highlightEndTag)) {
highlightStartTag = "<font class='mailer' style='color:blue; background-color:yellow;'>";
highlightEndTag = "</font>";
}

// find all occurences of the search term in the given text,
// and add some "highlight" tags to them (we're not using a
// regular expression search, because we want to filter out
// matches that occur within HTML tags and script blocks, so
// we have to do a little extra validation)
var newText = "";
var i = -1;
var lcSearchTerm = searchTerm.toLowerCase();
var lcBodyText = bodyText.toLowerCase();

while (bodyText.length > 0) {
i = lcBodyText.indexOf(lcSearchTerm, i+1);
if (i < 0) {
  newText += bodyText;
  bodyText = "";
} else {
  // skip anything inside an HTML tag
  if (bodyText.lastIndexOf(">", i) >= bodyText.lastIndexOf("<", i)) {
    // skip anything inside a  script  block
    if (lcBodyText.lastIndexOf("/script>", i) >= lcBodyText.lastIndexOf("<script", i)) {
      newText += bodyText.substring(0, i) + highlightStartTag + bodyText.substr(i, searchTerm.length) + highlightEndTag;
      bodyText = bodyText.substr(i + searchTerm.length);
      lcBodyText = bodyText.toLowerCase();
      i = -1;
    }
  }
}
}

return newText;
}

highlightSearchTerms(null, null, null, null, null)
for (let i = 0; i < document.querySelectorAll(".mailer").length; i++) {
document.querySelectorAll(".mailer")[i].addEventListener('click', function(e){ 
  e.preventDefault()
  if(document.getElementById('ctxmenu')){
    document.getElementById('ctxmenu').style.display = "block"; 
    return
  }

  let menu = document.createElement("div")
  menu.id = "ctxmenu"
  menu.style = `top:${e.pageY-40}px;left:${e.pageX-40}px;display:block`
  menu.classList.add('ctxmenu')
  menu.onmouseleave = () => {
    clearPopup()
  }

  menu.innerHTML =  "<div class='popup' id='popup1'><span class='popuptext show' id='myPopup'>Send Mail...  ?</span></div>" 

  document.body.appendChild(menu)

  setUpLargePopup();
  menu.onmouseleave = () => {
    document.getElementById('ctxmenu').outerHTML = ''
  }      
  return
})
}   
function setUpLargePopup() {
  document.getElementById("popup1").addEventListener('click', function (e) {

  document.getElementById('popup1').innerHTML = "<div id='mainpopupdiv'><span id='closebutton' class='closebutton'>X</span>" +
  '<iframe id="maileriframe" onload="doIt()" src="https://mail.google.com/mail/" allow="camera; microphone" width="667" height="375">no iframe support</iframe>' +
  "<div/>";

  document.getElementById("closebutton").addEventListener('click', function (e) {
  clearPopup();
  });

  setTimeout(() => {
  var iframe = document.getElementById("maileriframe");
  iframe.contentWindow.document.getElementById('Receipent').value = 'sssss';
}, 2000);
});
}

 

 function clearPopup(){
      document.getElementById('popup1').outerHTML = ''
      document.getElementById('ctxmenu').outerHTML = ''
    }
function hasClass(elem, className) {
    return elem.className.split(' ').indexOf(className) > -1;
}

Source Code

We have kept the source code on our  github repository for Email sender Chrome extension.

To install this chrome extension, download the extension folder and open chrome extension tab and click on Load Unpacked button, then select the folder, thats it, notice if the extension is switched on.

Troubleshooting

In case your extension is not running in the chrome

– Try to switch it on or off

– Check for error by click on the Error button

– Remove and add the extension again using the Load Unpacked button

– To refresh the extension code after making some changes just click on the reload button of the extension as shown in image.

In case some of the functionalities on any website stops working after installing this extension, try to switch off the extension and refresh the page.

More from Node/Javascript:

Natalie Harris
With references from Alan Plang
132
Kyle Aniston
With references from Alan Plang
75
Kyle Aniston
With references from StackOverflow
381
Mike Morgan
With references from StackOverflow
105
Mike Morgan
Forwared by QwertyBot
560
Mike Morgan
Forwared by QwertyBot
1.4k
Kyle Aniston
Forwared by Alan Plang
1.0k

8 responses to “Email sender Chrome extension”

  1. Patel Avatar
    Patel

    very helpful, I was always looking for it

  2. Mike James Avatar
    Mike James

    Is there anything else we can make using extension ?

  3. Panda Avatar
    Panda

    Thanks for sharing!

  4. Alex K Avatar
    Alex K

    Really helpful…

  5. Mike Gardner Avatar
    Mike Gardner

    Quite interesting, I have shown it to my clients

  6. Georgetes Avatar
    Georgetes

    Very insightful

Leave a Reply

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