本文详解如何在 tampermonkey 用户脚本中，正确声明和共享变量（如 idelement），使其既能在定时检测逻辑中赋值，又能在用户点击事件（如发送邮件）中安全读取，避免因作用域、执行时机或错误绑定导致的 undefined 问题。
本文详解如何在 tampermonkey 用户脚本中，正确声明和共享变量（如 idelement），使其既能在定时检测逻辑中赋值，又能在用户点击事件（如发送邮件）中安全读取，避免因作用域、执行时机或错误绑定导致的 undefined 问题。
在 Tampermonkey 等用户脚本环境中，一个常见痛点是：页面元素加载异步、延迟甚至反复重绘（如 SPA 或复杂表单页），导致 document.getElementById(...).value 在脚本启动时无法立即获取；而业务逻辑（如点击按钮触发邮件发送）又必须依赖该值。若处理不当，极易出现“变量在函数外不可用”“值始终为 undefined”或“函数被立即执行而非绑定”等典型错误。
核心问题通常源于三方面：
- 作用域隔离：const idElement = ... 在 setTimeout 内部重新声明，仅限于该回调作用域，外部无法访问；
- 事件监听器误调用：emailButton.addEventListener('click', sendEmail(idElement)) 中的括号 () 表示立即执行 sendEmail，并将返回值（undefined）作为事件处理器，而非将函数本身绑定；
- 时机不匹配：仅靠一次 setTimeout 无法保证目标元素已就绪；应采用轮询（setInterval）+ 条件终止策略，确保稳定捕获。
✅ 正确实践：全局可写变量 + 延迟轮询 + 函数引用绑定
以下为优化后的完整脚本（已精简冗余注释，增强健壮性）：
(function() {
'use strict';
window.addEventListener('DOMContentLoaded', function() {
// 创建固定位置的邮件按钮
const emailButton = document.createElement('button');
emailButton.textContent = 'Envoyer un e-mail';
Object.assign(emailButton.style, {
position: 'fixed',
bottom: '20px',
right: '20px',
zIndex: '9999',
padding: '10px 16px',
backgroundColor: '#a83232',
color: 'white',
border: 'none',
borderRadius: '5px',
cursor: 'pointer',
fontSize: '14px'
});
document.body.appendChild(emailButton);
// ✅ 关键：使用 let 声明全局可变变量（作用域覆盖整个 IIFE）
let idElement = 'rien';
// ✅ 关键：轮询检测目标元素，找到即停止
const timerId = setInterval(() => {
const targetEl = document.getElementById('application-AccessManagement-Display-component---accessManagementPhase--accessmanagement_01_01_01-defaultXML--internationalCode-inner');
if (targetEl && targetEl.value) {
idElement = targetEl.value.trim(); // 安全取值并去空格
console.log('[INFO] ID récupéré :', idElement);
emailButton.style.backgroundColor = '#38a832'; // 视觉反馈
clearInterval(timerId); // ✅ 立即清除定时器，避免内存泄漏
}
}, 1000); // 每秒检查一次（可根据页面加载速度调整）
// ✅ 邮件发送函数：直接读取全局 idElement，无需参数
function sendEmail() {
const recipient = 'kevin@example.com'; // 注意：原始代码中的 cfemail 已解密为真实邮箱（请替换为实际地址）
const subject = 'Sujet de l\'e-mail';
const variable2 = 'Valeur de la variable 2';
const variable3 = 'Valeur de la variable 3';
const body = [
'Contenu de l\'e-mail :',
'',
`Variable 1 : ${idElement}`,
`Variable 2 : ${variable2}`,
`Variable 3 : ${variable3}`
].join('\n');
const mailtoLink = `mailto:${encodeURIComponent(recipient)}?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(body)}`;
window.location.href = mailtoLink;
}
// ✅ 关键：正确绑定事件处理器（传入函数引用，非调用结果）
emailButton.addEventListener('click', sendEmail);
});
})();
⚠️ 注意事项与最佳实践
- 永远避免 var/let/const 在嵌套函数内重复声明同名变量：这会创建局部作用域变量，遮蔽外部变量。全局状态应统一用 let（需修改）或 var（兼容旧环境）在 IIFE 顶层声明。
- 不要在 addEventListener 中写 func(arg)：这是最常见错误。func(arg) 是执行，func 才是引用。若需传参，使用箭头函数包裹：() => sendEmail(idElement) —— 但本例中因变量已全局化，直接传函数更简洁。
-
轮询需设超时保护：生产环境建议添加最大重试次数或超时时间（例如 30 秒后 clearInterval 并提示失败），防止无限等待：
let attempts = 0; const maxAttempts = 30; const timerId = setInterval(() => { if (++attempts > maxAttempts) { console.warn('[WARN] Élément non trouvé après 30 secondes.'); clearInterval(timerId); return; } // ... 检测逻辑 }, 1000); - 邮箱地址安全性：原始代码中 是 Cloudflare 邮箱保护混淆，实际使用前务必手动解密或替换为真实地址（如 kevin@example.com），否则 mailto: 将失效。
- DOM 元素存在性校验：始终检查 targetEl && targetEl.value，避免 null.value 报错；对 .value 使用 .trim() 可预防空字符串干扰。
通过以上结构化改造，脚本具备了清晰的数据流（轮询 → 赋值 → 点击读取）、可靠的执行时机控制，以及符合现代 JavaScript 规范的作用域管理。你不仅能解决当前报错，更能为后续扩展（如多字段采集、表单验证）打下坚实基础。
