谷歌扩展Popup页面发送邮件按钮
需求
谷歌扩展程序开发中，如何在 popup 页面加一个链接，点击这个链接触发发送邮件功能
方案
- 在扩展程序的文件夹中，创建一个名为
popup.html的 HTML 文件，并在其中添加所需的链接。例如，您可以添加一个简单的链接元素：
<!DOCTYPE html>
<html>
<head>
<title>My Extension</title>
</head>
<body>
<a href="#" id="sendEmail">发送邮件</a>
<!-- 在这里添加其他内容 -->
<script src="popup.js"></script>
</body>
</html>
- 在同一文件夹中，创建一个名为
popup.js的 JavaScript 文件，并在其中编写代码以处理链接的点击事件和发送邮件功能。您可以使用chrome.tabs.create方法创建一个新的选项卡来打开默认的电子邮件链接。例如：
document.addEventListener('DOMContentLoaded', function() {
var sendEmailLink = document.getElementById('sendEmail');
sendEmailLink.addEventListener('click', function() {
var subject = encodeURIComponent('Feedback');
var body = encodeURIComponent('Dear Developer,\n\nI find XXXX,\n\nBest Regards,\nXXX');
var emailUrl = 'mailto:example@example.com?subject=' + subject + '&body=' + body;
chrome.tabs.create({ url: emailUrl });
});
});
在上面的示例中，subject 变量和 body 变量包含了您要添加的默认文本。使用 encodeURIComponent 函数对文本进行编码，以确保在 URL 中正确传递。
请记住，根据用户的电子邮件客户端和配置，有些客户端可能会忽略或以不同的方式处理 subject 和 body 参数。因此，无法保证默认文本在所有情况下都会被正确显示。
- 在扩展程序的清单文件（manifest.json）中，确保已将
popup.html添加为浏览器动作（browser_action）的默认页面。例如：
{
"manifest_version": 2,
"name": "My Extension",
"version": "1.0",
"browser_action": {
"default_popup": "popup.html"
},
"permissions": [
"tabs"
]
}
- 在 Chrome 浏览器中，打开扩展程序管理页面（chrome://extensions/）。确保开发者模式已启用，并加载您的扩展程序文件夹。
现在，当您单击扩展程序的图标时，会弹出一个包含“发送邮件”链接的页面。单击链接时，将打开一个新的选项卡，并启动默认的电子邮件客户端，自动填写收件人为example@example.com。您可以根据需要修改链接的 URL 和在邮件中的收件人。
请注意，您需要确保在清单文件中添加所需的权限（在上述示例中为"tabs"），以便能够创建新选项卡。
评论