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 ?
- 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:
Clear and to the point story
very helpful, I was always looking for it
Is there anything else we can make using extension ?
Thanks for sharing!
Concise and clear.
Really helpful…
Quite interesting, I have shown it to my clients
Very insightful
Thanks from Turkey
original one
Im not that much of a online reader to be honest but your sites
really nice, keep it up! I’ll go ahead and bookmark your site to come back later
on. Many thanks