如何用JavaScript实现浏览器自动刷新与页面监控功能（无扩展）

需求清单 #

• 每隔约1秒自动刷新页面
• 自动识别并点击页面中偶尔出现的指定链接
• 链接出现时播放提示音效
• 链接出现时发送邮件通知
• 全程禁止使用浏览器扩展，仅通过代码实现

现有尝试的问题 #

之前在控制台运行的代码：

win1 = window.open("https://www.myUrl.com/");
timer1 = setInterval(function(){win1.location.href="https://www.myUrl.com/"}, 1500);

存在两个核心问题：

1. 需要跨标签页控制（标签页A操控标签页B），实际操作中容易因为浏览器安全限制失效
2. 直接在目标页面控制台运行代码的话，页面刷新后代码会被完全清除，无法持续执行逻辑

解决方案 #

一、解决代码刷新后丢失的核心问题 #

要让脚本在每次页面加载时自动执行，推荐两种无需扩展的方式：

方式1：浏览器本地覆盖（最稳定）

适合Chrome/Edge等主流浏览器，通过修改页面的本地副本，让每次加载都自动注入你的脚本：

• 打开目标页面，按F12打开开发者工具
• 切换到「Sources」面板，找到「Overrides」选项卡
• 启用本地覆盖，选择一个本地文件夹保存修改
• 在「Page」面板找到目标页面的HTML文件，右键选择「Save for overrides」
• 编辑本地HTML文件，在<head>末尾插入<script>标签，把下面的功能代码放进去
• 保存后，每次页面加载都会自动执行你的脚本，刷新也不会丢失

方式2：书签工具（Bookmarklet）

如果无法使用本地覆盖，可以把代码打包成书签，每次打开/刷新页面后点击书签启动脚本：

• 新建书签，把压缩后的代码作为书签的URL（可使用在线JS压缩工具把代码压成一行）

二、完整功能实现代码 #

以下是整合所有需求的脚本，根据实际场景修改配置项即可：

// 配置项，根据实际情况修改
const CONFIG = {
  refreshInterval: 1000, // 刷新间隔（毫秒），建议不要太频繁触发反爬
  targetLinkSelector: 'a.your-target-link', // 目标链接的CSS选择器，比如带特定class的链接
  soundUrl: 'data:audio/wav;base64,UklGRnoGAABXQVZFZm10IBAAAAABAAEAQB8AAEAfAAABAAgAZGF0YQoGAACBhYqFbF1fdJivrJBhNjVgodDbq2EcBj+a2/LDciUFLIHO8tiJNwgZaLvt559NEAxQp+PwtmMcBjiR1/LMeSwFJHfH8N2QQAoUXrTp66hVFApGn+DyvmwhBSuBzvLZiTYIG2m98OScTgwOUarm7blmGgU7k9n1unEiBC13yO/eizEIHWq+8+OWT', // Base64编码的提示音效，可替换为你的音效URL
  emailRecipient: 'your-email@example.com', // 收件邮箱
  emailSubject: '目标链接已出现',
  emailBody: '页面中检测到目标链接，请及时处理'
};

// 播放提示音效
function playAlertSound() {
  const audio = new Audio(CONFIG.soundUrl);
  audio.play().catch(err => console.error('音效播放失败:', err));
}

// 发送邮件通知（用mailto协议唤起本地邮件客户端，自动发送需后端支持）
function sendEmailAlert() {
  const mailtoLink = `mailto:${CONFIG.emailRecipient}?subject=${encodeURIComponent(CONFIG.emailSubject)}&body=${encodeURIComponent(CONFIG.emailBody)}`;
  window.open(mailtoLink, '_blank');
}

// 检测并点击目标链接
function checkAndClickLink() {
  const targetLink = document.querySelector(CONFIG.targetLinkSelector);
  if (targetLink) {
    playAlertSound();
    sendEmailAlert();
    targetLink.click();
    clearInterval(window.refreshTimer); // 找到链接后停止刷新，可根据需求调整
    console.log('已触发链接检测、点击、音效和邮件通知');
  }
}

// 页面加载完成后初始化
function init() {
  checkAndClickLink(); // 先检测当前页面是否有链接
  // 设置刷新定时器
  window.refreshTimer = setInterval(() => {
    checkAndClickLink(); // 刷新前再检测一次
    window.location.reload();
  }, CONFIG.refreshInterval);
}

// 启动逻辑
if (document.readyState === 'complete') {
  init();
} else {
  window.addEventListener('load', init);
}

三、补充说明 #

1. 目标链接选择器：如果链接没有特定class，可以通过文本内容匹配，比如用以下代码替代querySelector：

// 查找包含指定文本的链接
const links = document.querySelectorAll('a');
const targetLink = Array.from(links).find(link => link.textContent.includes('目标文本'));

2. 邮件自动发送：上述代码用mailto协议会唤起本地邮件客户端，若需要完全自动发送邮件，需要搭建后端服务。学习方向：Node.js基础、Express框架、Nodemailer邮件库
3. 音效处理：如果网站有CSP限制，建议把音效转成Base64编码嵌入代码，避免跨域问题
4. 反爬注意：频繁刷新可能触发网站反爬机制，建议适当延长刷新间隔（比如3-5秒）

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