Is there a way to grab the inner content of an e-mail link by right-clicking on it?

Question

Is there a way to grab the inner content of an e-mail link by right-clicking on it?

I am currently developing a Chrome Extension that functions similarly to the "Search on Google" feature when you right-click on selected text. However, I am facing an issue with making it work when right-clicking on a mailto: email link. How can I extract the innerHTML containing the email address and pass this information to the extension for searching purposes?

While I have successfully implemented the functionality for selected text on websites, the same does not apply when clicking on hyperlinked email addresses.

for(var i=0; i<numentries; i++)
{
//alert(_all[i][3]);
if(_all[i][3])
{
_all[i][0] = chrome.contextMenus.create({"title": _all[i][1], "contexts":["selection", "link"], "onclick": searchOnClick});
//alert("Menuitem created");
}
else _all[i][0] = -1;
}

var ask_options = getItem("_askoptions")=="true"? true : false;

if(ask_options){
//show separator
chrome.contextMenus.create({"type": "separator", "contexts":["selection", "link"]});
//show the item for linking to extension options
chrome.contextMenus.create({"title": "Options", "contexts":["selection", "link"], "onclick": function(){chrome.tabs.create({"url":"options.html"});}});
}
}

function searchOnClick(info, tab)
{
var itemindex = 0;
for(var i=0; i<numentries; i++)
{
if(info.menuItemId == _all[i][0])
{
//alert(i);
itemindex = i;
}
}
var ask_fg = getItem("_askbg")=="true"? false : true;
var ask_next = getItem("_asknext")=="true"? true : false;
var index = 1000;

var targetURL = _all[itemindex][2].replace("TESTSEARCH", info.selectionText);
targetURL = targetURL.replace("%s", info.selectionText);

Currently, the extension only searches for the selected text. When attempting to search for an email address hyperlink, it returns "undefined".

I need to modify this behavior so that instead of "undefined," the searched word is replaced by the actual email address in the hyperlink.

This is the desired outcome: https://i.stack.imgur.com/0OANN.png

javascript

Answer 1

Answer №1

Make sure to implement an event listener for the contextmenu.

To illustrate this, I put together a quick jsfiddle following Cat's example: https://jsfiddle.net/kds2Lze8/

The code snippet below attaches the event listener to the document and triggers upon right-click. By utilizing this event, you can extract the source element and its innerHTML content.

I trust you will find this information helpful!

document.addEventListener('contextmenu', function(event) {
    event.preventDefault();
    alert(event.srcElement.innerHTML);
    return false;
}, false);

Answer 2

Make sure to implement an event listener for the contextmenu.

To illustrate this, I put together a quick jsfiddle following Cat's example: https://jsfiddle.net/kds2Lze8/

The code snippet below attaches the event listener to the document and triggers upon right-click. By utilizing this event, you can extract the source element and its innerHTML content.

I trust you will find this information helpful!

document.addEventListener('contextmenu', function(event) {
    event.preventDefault();
    alert(event.srcElement.innerHTML);
    return false;
}, false);

Answer 3

Answer №2

When it comes to Chrome extension-specific features, your snippet is encountering an error that I couldn't troubleshoot without seeing your HTML markup. However, the script below should illustrate how to achieve your desired functionality.

Edit:
I initially overlooked your request to run the script on a right-click event. My apologies for that oversight. The updated version now addresses that requirement. It logs the innerHTML of the clicked element (excluding left-clicks) if the element is an anchor tag with an `href` attribute beginning with "mailto:".

// Execute the 'checkAnchorForEmail' function on non-primary click events
document.addEventListener("auxclick", checkAnchorForEmail);

function checkAnchorForEmail(event){
  let clickedElement = event.target;
  
  if(clickedElement.tagName.toLowerCase() === "a" && clickedElement.href){
    let comparedString = "mailto:";
    
    if(clickedElement.href.indexOf(comparedString) === 0){
      console.log(clickedElement.innerHTML);
    }
  }
}

// *Note: 'auxclick' triggers on any non-primary button click. To isolate right-clicks, consider using the 'contextmenu' event.

Additional Note:
To prevent the context menu from appearing before your script completes its tasks, you can utilize event.preventDefault();. In this case, you would need to manually display the menu later by firing the 'contextmenu' event on the target element.

If executing this action causes the script to loop indefinitely, you could try implementing conditional logic like the untested example below:

function checkAnchorForEmail(event){
    // Insert the code snippet here...
   
    if(event.target.dataset.ready != "true"){
        // event.preventDefault();
        // event.target.dataset.ready = "true";
        // Add necessary context menu modifications
    }
    else{
        // Context menu changes have already been applied, so display the menu here
    }
}

Referencing the MouseEvent interface mentioned in the code comments, you can follow this guide on triggering the context menu.

Answer 4

When it comes to Chrome extension-specific features, your snippet is encountering an error that I couldn't troubleshoot without seeing your HTML markup. However, the script below should illustrate how to achieve your desired functionality.

Edit:
I initially overlooked your request to run the script on a right-click event. My apologies for that oversight. The updated version now addresses that requirement. It logs the innerHTML of the clicked element (excluding left-clicks) if the element is an anchor tag with an `href` attribute beginning with "mailto:".

// Execute the 'checkAnchorForEmail' function on non-primary click events
document.addEventListener("auxclick", checkAnchorForEmail);

function checkAnchorForEmail(event){
  let clickedElement = event.target;
  
  if(clickedElement.tagName.toLowerCase() === "a" && clickedElement.href){
    let comparedString = "mailto:";
    
    if(clickedElement.href.indexOf(comparedString) === 0){
      console.log(clickedElement.innerHTML);
    }
  }
}

// *Note: 'auxclick' triggers on any non-primary button click. To isolate right-clicks, consider using the 'contextmenu' event.

Additional Note:
To prevent the context menu from appearing before your script completes its tasks, you can utilize event.preventDefault();. In this case, you would need to manually display the menu later by firing the 'contextmenu' event on the target element.

If executing this action causes the script to loop indefinitely, you could try implementing conditional logic like the untested example below:

function checkAnchorForEmail(event){
    // Insert the code snippet here...
   
    if(event.target.dataset.ready != "true"){
        // event.preventDefault();
        // event.target.dataset.ready = "true";
        // Add necessary context menu modifications
    }
    else{
        // Context menu changes have already been applied, so display the menu here
    }
}

Referencing the MouseEvent interface mentioned in the code comments, you can follow this guide on triggering the context menu.

Is there a way to grab the inner content of an e-mail link by right-clicking on it?

Answer №1

Answer №2

Similar questions

Ways to manage numerous AJAX actions within a single HTTP request?

Protractor's isDisplayed method may return a false value for an element that is actually visible

An issue occurred during the project compilation using npm

Having trouble rendering the React app; encountered an error: JSX contents are unterminated

Is it possible for a Vue component to contain both data and props simultaneously?

Create a visual representation of an image by sketching a detailed line profile using HTML5's

"Error: The property $notify is not found in the type" - Unable to utilize an npm package in Vue application

Stop the loop in cypress

Having difficulty in closing Sticky Notes with JavaScript

Using Angular 2 for two-way binding with input masking

Double Assignment in JavaScript

Troubleshooting compatibility issues between Sailsjs Services and TypeScript in Vscode

I am looking for an image search API that supports JSONP so that users can easily search for images on my website

Exploring the View-Model declaration in Knockout.js: Unveiling two distinct approaches

Do we need to wait a considerable amount of time for an asynchronous function to run in a request?

The location.reload function keeps reloading repeatedly. It should only reload once when clicked

What could be causing the issue with clicking on children of jstree not working?

How can we leverage the nullish coalescing operator (`??`) when destructuring object properties?

Unable to retrieve dynamically generated object property from an array in AngularJS 2+

Backend data displayed on carousel presents either all images or none at all