Question

当您右键单击所选文本时，我正在创建一个类似于“在Google上搜索”的Chrome扩展程序。但是，当我右键单击mailto：电子邮件链接时，我也需要我的工作。如何选择innerHTML，选择电子邮件地址并将此信息传递到要搜索的扩展名上？

我设法使其与选定的文本一起使用（当在网站上突出显示文本时）并单击鼠标右键，但是当右键单击超链接的电子邮件地址时却无法使用。

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);

现在，它仅在搜索选择。当我尝试搜索电子邮件地址超链接时，搜索到的单词为“未定义”。

我需要将“未定义”更改为超链接中的电子邮件地址。

这就是我需要做的：https://i.imgur.com/2qJrwmk.png

Answer 1

我不确定某些特定于Chrome扩展程序的内容（您的代码段给出的错误是我在没有HTML标记的情况下无法调试），但是我认为此脚本将演示如何执行所需的操作

修改：
您确实确实说过您想知道如何响应右键单击来运行脚本，但是我省略了这一部分。对于那个很抱歉。修订版应对此进行澄清。如果该元素是其锚点href属性以mailto:开头的锚点，它将记录被单击元素的innerHTML（尽管不是在左键单击上）。

// Run the 'checkAnchorForEmail' function on non-primary click events
document.addEventListener("auxclick", checkAnchorForEmail);

function checkAnchorForEmail(event){ //'event' will be our local name for any event that triggers this function
  // Refer to the event's target element as 'clickedElement' 
  let clickedElement = event.target;
  // If the element was an anchor with an 'href' attribute...
  if(clickedElement.tagName.toLowerCase() === "a" &&  clickedElement.href){
    // Define a string to identify anchors with emails
    let comparedString = "mailto:";
    // Only respond if the href begins with that particular string
    if(clickedElement.href.indexOf(comparedString) === 0){
      // Now we know the user right-clicked* an `a` element with an email address and can act accordingly
    console.log(clickedElement.innerHTML);
    }
  }
}

// *Note that the 'auxclick' event is triggered by any non-primary button click. To isolate right-clicks, the 'contextmenu' event may be useful.

<a href="mailto:test@google.com">test@google.com</a><br />
<a href="docs.google.com">google docs</a><br />
<a href="mailto:test2@google.com">test2@google.com</a>

另一件事：
如果需要在脚本完成其任务之前阻止上下文菜单显示，则可以使用event.preventDefault();，但是稍后需要手动显示菜单。一种方法是在目标元素上触发“ contextmenu”事件。

这样做可能会导致该脚本再次运行，从而产生无限循环。如果发生这种情况，您可以尝试像这样（未测试）有条件地调用preventDefault方法：

function checkAnchorForEmail(event){
  // The above code goes here...
    // Now we know the user right-clicked* an `a` element with an email address and can act accordingly
    if(event.target.dataset.ready != "true"){ // Check the data-ready attribute
      // event.preventDefault();
      // event.target.dataset.ready = "true" // Set the data-ready attribute
      // Make your changes to the context menu here
    }
    else{
      // The changes have already been made, so show the context menu here
      // (maybe using a technique like the one in the link below)
    }
  }

如代码内注释中所述，这里是使用MouseEvent界面to open the context menu的建议。

Answer 2

您需要为上下文菜单添加一个事件侦听器。

使用cat给出的示例，我创建了一个快速的jsfiddle： https://jsfiddle.net/kds2Lze8/

下面的代码将事件侦听器添加到文档中，并在右键单击时触发。然后，使用该事件，您可以获取source元素，最终获得innerHTML。

希望有帮助！

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

右键单击电子邮件链接时，如何选择innerHTML？

2 个答案: