屏蔽网页点击邮件链接弹出邮件客户端

前言

mailto: 是很多网页上都会使用的电子邮件联系链接，只需要点一下就能打开邮件客户端。然而，对于大多数人来说，这个操作很不友好，希望关闭这个功能。要关闭它，其实不那么难。

步骤

给浏览器安装“油猴”浏览器扩展应用

“油猴”（Tampermonkey）其实是一个脚本管理器，它的魅力其实是脚本文件的魅力。现代的网页特效缤纷，外观出彩，其中 CSS 样式表和 JavaScript 脚本起到了不可或缺的作用，比如说我的博客上的各种文字、图片的显示效果就是通过 CSS 和 JavaScript 脚本来实现的。Tampermonkey 通过加载第三方的脚本文件，改变页面中的 CSS 和 JavaScript 元素，可以让整个网页大变样，也可以在网页中增加额外的功能。安装步骤如下（以 Chrome 浏览器为例）：

点击 Chrome 浏览器菜单【更多工具】-【扩展程序】。

将“油猴”crx 安装文件拖放到这个页面，并确认安装。

需要“油猴”crx 安装文件朋友可以关注我订阅号【巧克力风暴】后在后台回复：油猴，就可以直接获取下载地址了。

注：Firefox 浏览器点击 https://addons.mozilla.org/zh-CN/firefox/addon/tampermonkey/?src=search 链接直接安装

编写屏蔽 mailto 的脚本

邮件点击“油猴”图标，点击【选项】：

点击【+】新建脚本：

编写屏蔽 mailto 的 JavaScript 脚本：

点击【文件】标签的【保存】：

点击【已安装脚本】，可以看到已安装脚本列表里面有了【Kill mailto】:

关闭油猴选项页面后，任意访问一个网站，可以发现“油猴”的图标已经显示一个红色的角标了，说明这个脚本已经生效。

点击网站上的邮件链接，你会发现没像往常一样有弹出邮件客户端，而是弹出了一个对话框【邮件地址已经复制到了你的剪切板中。】，这时你可以在任意输入框 Ctrl + V 一下，发现邮件地址被粘贴上了。

具体脚本如下：

// ==UserScript==
// @name Kill mailto
// @namespace
// @version 0.0.2
// @author caolist
// @description
// @icon 
// @homepage 
// @supportURL 
// @match *://*/*
// @grant GM_setClipboard
// ==/UserScript==

window.onload=function(){
  document.querySelectorAll('p').forEach((el, index, thisArray)=>{
    el.innerText.match(/[A-Za-z0-9+/]*={0,2}(?=[^>]*(<[^\/script|^\/style]|$))/g).forEach((strMaybeBase64)=>{
      if(strMaybeBase64.length>0){
        try{
          const strText = window.atob(strMaybeBase64)
          if(strText.match(/^([A-Za-z0-9_\-.])+\@([A-Za-z0-9_\-.])+\.([A-Za-z]{2,6})$/) !== null){
            const reg = new RegExp(strMaybeBase64+'(?=[^>]*(<(?!\/(script|style))|$))', 'gi')
            const newCode = '<a href="mailto:'+strText+'">'+strText+'</a>'
            el.innerHTML = el.innerHTML.replace(reg, newCode)
          }
        }
        catch(e){}
      }
    })
    if(index === thisArray.length-1){
      document.querySelectorAll('a[href^=mailto]').forEach((thelink)=>{
        const themail = thelink.href.replace(/^mailto:(.*?@[^?]*).*$/i, '$1')
        thelink.onclick = function(e){ e.preventDefault(e) }
        thelink.addEventListener('click', (e)=>{
          e.preventDefault(e)
          GM_setClipboard(themail)
          alert('邮件地址已经复制到了你的剪切板中。')
          e.preventDefault()
        })
      })
    }
  })
}

总结

这篇文字的核心其实是“油猴”，他不仅仅只是做到能屏蔽 mailto，更强大的功能值得你去探索。如果有 JavaScript 基础的话，可以试着编写自己需要的功能。