如何用JavaScript实现Chrome扩展中Local Storage内容的邮件发送

核心修改点 #

• 通过prompt()弹窗获取用户输入的收件人邮箱，支持留空
• 将myLeads数组转换为换行分隔的字符串作为邮件正文，修复原代码中myLeads.value的错误（数组无value属性）
• 动态构建mailto链接，空收件人时直接打开邮件客户端的新邮件窗口
• 可选优化：将邮件按钮的双击事件改为单击，符合常规操作习惯

修改后的完整代码 #

HTML（无需改动）

<html>
    <head>
        <link rel="stylesheet" href="index.css">
    </head>
    <body>
        <textarea cols="40" rows="5" id="input-el"> </textarea>

        <button id="input-btn">SAVE INPUT</button>
        <button id="delete-btn">DELETE ALL</button>
        <button id="email-btn">EMAIL LEADS</button>
        <ol id="ul-el">
        </ol>
        <script src="index.js"></script>
    </body>
</html>

JavaScript

let myLeads = []
const inputEl = document.getElementById("input-el")
const inputBtn = document.getElementById("input-btn")
const ulEl = document.getElementById("ul-el")
const deleteBtn = document.getElementById("delete-btn")
const leadsFromLocalStorage = JSON.parse(localStorage.getItem("myLeads"))
const tabBtn = document.getElementById("tab-btn")

console.log(leadsFromLocalStorage)

if (leadsFromLocalStorage) {
    myLeads = leadsFromLocalStorage
    render(myLeads)
} else {
    console.log("No local storage data")
}

inputBtn.addEventListener("click", function() {
    myLeads.push(inputEl.value)
    inputEl.value = ""
    localStorage.setItem("myLeads", JSON.stringify(myLeads))
    render(myLeads)
})

deleteBtn.addEventListener("dblclick", function(){
    myLeads = [];
    localStorage.clear();
    render(myLeads);
})

function render(leads) {
    let listItems = ""
    for (let i = 0; i < leads.length; i++) {
        listItems += `
            <li>
                ${leads[i]}
            </li>
        `
    }
    ulEl.innerHTML = listItems  
}

const emailBtn = document.getElementById("email-btn")

emailBtn.addEventListener("click", function() {
    // 获取收件人邮箱，允许留空
    const recipient = prompt("请输入收件人邮箱（可留空）：") || "";
    
    // 将数组转换为换行分隔的正文内容
    const emailBody = myLeads.join('\n');
    
    // 构建mailto链接
    let mailtoLink = "mailto:";
    if (recipient) {
        mailtoLink += encodeURIComponent(recipient);
    }
    mailtoLink += "&subject=" + encodeURIComponent("我的Leads列表") + "&body=" + encodeURIComponent(emailBody);
    
    // 打开邮件客户端
    window.location.href = mailtoLink;
})

关键逻辑说明 #

1. 收件人处理：prompt()弹窗让用户输入邮箱，若用户点击取消或留空，recipient会被设为空字符串，此时mailto:链接后无收件人，邮件客户端会自动引导用户填写。
2. 正文格式化：myLeads.join('\n')把数组中每个lead用换行符分隔，确保邮件正文每行显示一条内容，提升可读性。
3. 链接编码：使用encodeURIComponent()处理收件人、主题和正文，避免特殊字符导致链接失效。

内容的提问来源于stack exchange，提问作者Andy